Section 2. 자바스크립트 문자열에 사용되는 연산자

비교연산자

비교연산자는 True 아니면 False를 반환한다.

표를 보면 사전순상 이라고 되어 있는데 조금 이해하기가 힘들다.

이 의미는 문자열을 비교할 때를 설명한 것인데 간단히 말하면 a, b가 있다고 생각해보자.

a는 b보다 먼저 온다 (사전에서 a 다음 b가 오고 c 가 그 다음에 오듯이). 따라서 a가 b보다 그 값이 더 작다~ 가 되는것이다.

예제를 보면서 더 잘 이해해보자.

console.log(
  '안녕하세요~' === "안녕하세요~",
  '안녕하세요~' === `안녕하세요~`,
  "안녕하세요~" === `안녕하세요~`,
); //자바스크립트에서는 표기방식을 구분하지 않는다

주석에 쓰여 있듯이 자바스크립트에서는 표기방식을 구분하지 않기 때문에 값은 모두 true 이다. 

하지만 대소문자는 구분한다.

'Hello!' === 'hello!' //false를 반환한다

자바스크립트에서는 특이하게도 ==, != 하면 암묵적으로 타입 변환이 일어난다. 즉, 자료형을 구분하지 않는다.

console.log(
  '1' == '1', //true
  '1' == 1, //true
  '1' == 2 //false
);

console.log(
  '1' != '1', //false
  '1' != 1, //false
  '1' != 2 //true
);

각 출력문에서 2번째를 주의깊게 보면 문자열 1과 숫자 1을 비교했을때 true와 false가 반환된 것을 볼 수 있다.

그 이유는 자바스크립트에서 비교할때 자료형이 다르면 타입을 변환을 해서 비교를 하기 때문이다. 

이 코드에서는 문자열 쪽을 숫자로 변환해서 비교를 하게 된다. 암묵적으로 타입 변환이 일어났다.

 

그렇다면 ===, !== 으로 비교를 해보면 다음과 같다.

console.log(
  '1' === '1', //true
  '1' === 1, //false
  '1' === 2 //false
);

console.log(
  '1' !== '1', //false
  '1' !== 1, //true
  '1' !== 2 //true
);

==, != 을 썼을때와 확연한 차이가 보인다. 자료형은 굉장히 중요해서 되도록이면 암묵적 형변환이 일어나지 않게 코드를 작성하는 것을 추천한다.

 

사전순 비교

console.log(
  'ABC' < 'abc', //true
  'apple' <= 'banana', //true
  '가나다' > '라마바', //false
  '안녕' >= '안녕' //true
);

여기서 알 수 있는 것은 컴퓨터 상에서는 대문자가 소문자보다 사전적으로 앞에 온다는 것이다. 즉 , 대문자가 소문자보다 그 값이 더 작다라고 이해하면 되겠다.

3번째를 보면 이렇게 말로 풀어낼 수 있다. '가나다' 는 '라마바' 보다 나중에 오는가? 당연히 '가나다'가 '라마바' 보다 먼저오니까 false가 된다.

 

그렇다면 숫자와 문자열 비교를 다시 해보자.

// ⚠️ 숫자 문자열 관련 주의!
console.log(
  100 > 12, // 숫자는 그 자체로 비교. true
  '100' > '12', // 문자는 사전순으로 비교. false
  '100' > 12, // 문자와 숫자를 비교하면 문자를 숫자로 변환 //true
);

두번째를 주의깊게 보면 문자열이 아라비아 문자 그대로 바뀌어서 비교를 한다고 생각하면 된다. 

100에서 1다음 0이 왔는데 12에서는 1에서 2가 왔다. 즉, 12가 100보다 사전적으로는 나중에 온다는 것이다. 나중에 오니까 그 값이 100보다 더 크다고 생각할 수 있다. 

 

연결 연산자

 

+연산자 부터 보자. 이항연산자 라고도 한다.

let str1 = 'Hello';

// 값 반환
let str2 = ' ' + 'World';

console.log(str1); //Hello
console.log(str2); // World

let str3 = str1 + str2; 

console.log(str3); //Hello World

// 부수효과 없음
console.log(str1); //Hello
console.log(str2); // World

+연산자는 문자열을 이어준다. 그리고 부수효과가 없다. 부수효과는 할당연산자에서 알아보자.

 

+= 연산자. 할당연산자 라고도 한다.

let str1 = '헬로';
str1 += ' 월드';

// 부수효과
console.log(str1); //헬로 월드

// 값 반환
let str2 = str1 += '~~~';

console.log(str2); //헬로 월드~~~

// 부수효과
console.log(str1); //헬로 월드~~~

str2를 보면 '헬로 월드' 라는 값을 가지고 있는 str1에 ~~~를 할당연산자를 사용해서 뒤에 붙여서 값을 담았다.

그리고 다시 str1을 출력해 봤더니 str1의 값이 str2와 동일해진 것을 볼 수 있다. 이것을 부수효과 라고 한다.

 

주의해야 할 점은 다음과 같다.

// ⚠️ 오류. 왼쪽 값은 부수효과의 대상(변수)이어야 함
let str = '헬로' += '월드';

// ⚠️ 오류. 왼쪽 값은 부수효과의 대상(변수)이어야 함
const STR = '안녕~';
STR += ' 반가워요!';

 

다수의 문자열 이어붙이기

const lyric1 = '노는 게 제일 좋아'
+ '\n친구들 모여라'
+ '\n언제나 즐거워'
+ '\n개구쟁이 뽀로로';

console.log(lyric1);

let lyric2 = '눈 덮인 숲 속 마을';
lyric2 += '\n꼬마펭귄 나가신다';
lyric2 += '\n언제나 즐거워';
lyric2 += '\n뽀롱뽀롱뽀롱뽀롱 뽀로로';

console.log(lyric2);

딱히 설명이 필요하지 않다.

 

다른 자료형과 더하면 문자열 반환

let result = '안녕' + 1 + true;

console.log(result); //안녕1true
console.log(typeof result); //string

result += null; 
result += undefined;

console.log(result); //안녕1truenullundefined
console.log(typeof result); //string

+연산자나 +=연산자를 사용하면 같이 사용되는 것들은 자료형이 어떻든 문자열로 바꿔서 취급한다.