Javascript : 자동 형변환

 

 

대부분의 프로그래밍 언어에서는 

서로 다른 자료형의 연산을 오류라고 처리한다.

하지만 자바스크립트에서는 

일정한 규칙으로 자동 형변환이 일어나 연산이 되기도 한다.

 

 

이를 제대로 이해하지 못하면 

우리가 원하지 않은 형태로 연산이 되어버릴 수도 있다.

 

그렇다면 그 일정한 규칙이 무엇일까?

연산자 별로 나누어 살펴보자.

 

1. 산술 연산자

 

console.log(4 + '2');
console.log(4 + 2);
console.log(4 - true);
console.log(4 * false);
console.log(4 / '2');
console.log('4' ** true);
console.log(4 % 'two');

42
6
3
0
2
4
NaN

산술연산자에서는 연산되어지는 값을 

모두 숫자형으로 변환한 다음 연산을 한다.

 

유의할 점은 '더하기' 연산자이다. 

이유는 문자열을 연결하는 역할도 하기 때문이다. 

 

더하기처럼 두 가지 기능이 있을 땐 헷갈릴 수 있다.

 

이 때, 더하기 연산자는 문자열을 연결하는 기능이

숫자를 계산하는 기능보다 우선시 된다.

 

그래서 위의 코드에서 첫 연산의 결과가 6이 아니라 42가 된 것이다.

 

따라서, 더하기 연산 시 한 쪽에 문자열이 있다면 

둘 다 문자열로 만든 다음 문자열을 연결한다. 

 

그리고 맨 마지막 연산을 보면 

two는 숫자형으로 형변환했을 때, NaN이다.

NaN 어떠한 것과 연산을 해도 NaN이다.

 

 

2. 관계 비교 연산자

 

관계 비교 연산자란?

<, >, <=, >= 등을 의미한다.

 

특별한 경우를 제외하면 두 값을 모두 

숫자형으로 바꿔서 비교한다.

 

console.log(2 < '3');
console.log(2 > true);
console.log('2' <= false);
console.log('two' >= 1);

 

true
true
false
false

마지막의 경우 'two'가 NaN으로 형변환되는데

두 값을 비교하는 연산에서는 true 혹은 false를 결과로 내야하기에 

비교가 불가능한 경우에도 false가 출력된다.

 

3. 같음 비교 연산

1) ===와 !===

일치와 불일치라고 부른다.

 

 

2) ==와 !=

동등과 부등이라고 부른다. 

숫자형으로 형변환이 일어난 후에 같음 비교를 한다.

 

 

=> 안전한 코드를 위해 2)보다는 1)을 추천한다.