[JavaScript] 자바스크립트 형변환(Type Conversion) 이해하기 - 2

[JavaScript] 자바스크립트 형 변환(Type Conversion) 이해하기 - 1에서는
자바스크립트의 형 변환 중 명시적 형 변환에 대해서 정리를 했었다.

이번에는 암시적 형 변환에 대해서 이어서 정리를 해보자.

 

암시적 형변환은 연산할 때 일어난다.

당연한 얘기로 들릴 느껴질 수도 있지만 암시적 형 변환은 당연히 연산할 때 일어난다.
어떤 값과 값이 연산되어질 때 필요한 상황에 따라 형 변환이 일어난다는 얘기다.

자바스크립트에 대한 호불호가 극명하게 갈리는 요소중 하나가 바로 이 암시적 형 변환이 아닐까 생각이 되지만

개인적으로는 여러 상황들을 고려해보면 나름대로 개발의 속도를 올리는데는 확실히 긍정적인 메커니즘이 아닌가 싶다.
자, 그럼 몇 가지 연산자로 서로다른 자료형 연산을 하면서 암시적 형 변환을 확인해보자.
근데 연산을 하기에 앞서서, symbol과 object에 대한 내용은 다루지 않겠다.

symbol은 아직까지도 그 쓰임이 드물고, object 의 경우에도 생각해보면 여러 값들의 덩어리인 객체를 덩어리채 연산하는 일이 흔치 않다. 그런 특별한 경우는 여기에 정리하는 것보다는 그냥 필요할 때 구글링 하는 것이 좀 더 나은 것 같다.

 

덧셈 연산자 ( + )

// string
console.log('문자' + 1234); // 문자1234
console.log('문자' + true); // 문자true
console.log('문자' + false); // 문자false
console.log('문자' + null); // 문자null
console.log('문자' + undefined); // 문자undefined

// number
console.log(1234 + '1234'); //12341234
console.log(1234 + true); // 1235
console.log(1234 + false); // 1234
console.log(1234 + null); // 1234
console.log(1234 + undefined); // NaN

// boolean
console.log(true + 123); // 124
console.log(false + 123); // 123
console.log(true + null); // 1
console.log(false + null); // 0
console.log(true + undefined); // NaN
console.log(false + undefined); // NaN

// null
console.log(null + 1234); // 1234


// undefined
console.log(undefined + 1234); // NaN

+ 연산자는 사칙연산에 사용되는 연산자들 중에서도 숫자를 더하는 산술연산에도 사용되고, 문자열 연산에도 사용되는 독특한 연산자지만,

언제 어떤 연산을 하는지를 구분하는 건 생각보다 간단하다.

 

+ 연산을 할 때는 피연산자가 한쪽이라도 '문자열'이면 문자열 연산이 된다.

그런 원리로 string 구간을 보면, 한쪽만 문자열인 경우 반대편도 문자열 형태로 형변환을 일으킨 뒤 연산을 수행한다.

그리고 나머지 경우는 산술덧셈 연산을 수행하는데, string을 제외한 구간을 살펴보면
덧셈 연산을 할 때 양쪽 피연산자를 모두 숫자형으로 형 변환을 일으킨 뒤 연산을 수행한다.

숫자형으로 형변환이 일어나기 때문에 true는 1, false와 null은 0, undefined는 NaN으로 형 변환이 일어난다.

문자열 연산 때문에 + 기호를 예시로 들었는데, -, *, /, %, ** 등 산술 연산은 모두 같은 개념으로 형 변환이 일어난다.

특별히 주의해야 될 부분은 number구간 첫번째. 더하기 연산에서 문자열 1234가 연산될 때다.

사실 문자열 1234는 숫자형으로 변환 될 때 숫자 1234로 형 변환이 될 수 있기 때문에, 자칫 2468이란 결과가 나오길 기대할 수도 있지만,
특별히 더하기 연산에서의 경우는 '1234'도 문자열이기 때문에 문자 연산이 이루어진다.
문자열 '1234'가 숫자가 되는게 아니라 숫자형 1234가 오히려 문자가 되는 것이다.

 

관계 연산자 ( <, <=, >, >= )

// string
console.log('a' <= 'b'); // true
console.log('a' <= 1234); // false
console.log('a' <= true); // false
console.log('a' <= false); // false
console.log('a' <= null); // false
console.log('a' <= undefined); // false

// number
console.log(1234 <= 1234); // true
console.log(1234 <= true); // false
console.log(1234 <= false); // false
console.log(1234 <= null); // false
console.log(1234 <= undefined); // false

// boolean
console.log(false <= true); // true
console.log(false <= false); // true
console.log(false <= null); // true
console.log(false <= undefined); // false

// null
console.log(null <= null); // true
console.log(null <= undefined); // false

// undefined
console.log(undefined <= undefined); // false

관계 연산자도 산술연산과 동일하다. 양쪽 모두 문자열인 경우를 제외하면 양쪽 모두 숫자형으로 형 변환을 일으킨 후 연산한다.

역시 true는 1, false와 null은 0, undefined는 NaN으로 형변환이 일어난다.

undefined가 NaN으로 형 변환이 되기 때문에 undefined의 경우에는 어떤 연산을 하더라도 false 값이 나온다.

특별히 문자열과 문자열간의 관계 연산을 하게 되면 각 문자를 단순 어휘 비교(알파벳 순서)를 하게 되는데,
흔한 경우가 아니기 때문에 '어휘 비교를 한다' 정도만 이해해 두자.

 

나머지 암시적 형 변환은 다음에..

두 번에 나눠서 정리하면 다 끝날 줄 알았는데, 생각보다 정리하다 보니 내용이 길어지는 것 같다.

동치 연산자(==, ===, !=, !==)와 논리 연산자(&&, ||, !)에 대해서 정리하고 싶었는데 
이 부분은 다음에 이어서 정리해야겠다.