[이론]js 개발자라면 알아야하는 핵심 컨셉 33개 #4.Type Coercion

Type Coercion

오늘의 주제는 Type Coercion, 직역하면 '형 변환'이다.

강의자에 따르면 JS는 매우 forgiving한 언어이기 때문에,

위와 같은 멍청한(?) 코드를 작성해도 오류를 내지 않고 적당한 조치를 취한 후에 결과를 나타내는데

이때 '적당한 조치'가 바로 '형 변환'이다.

 

다음 코드부터 살펴보자.

console.log(66+true); //67
console.log(66+false); //66
console.log(66-true); //65

66+true(false)를 계산할 때, JS는 true(false)를 1(0)로 변환시키고

66+1(0)을 더하여 콘솔에 출력한다. 따라서 결과는 67(66)이 된다.

마이너스의 경우에도 동일하게 작동한다.

Boolean 자료형을 Number 자료형과 +,-연산하는 경우 true=1, false=0으로 형 변환한다.

 

다음과 같이 String 자료형에 Number를 덧셈한 결과는 다음과 같다.

console.log(66+"false"); //"66false"
console.log(10+66+"false"); //"76false"
console.log(66-"1"); //65
console.log(66*"2"); //132
console.log(66/"2"); //33
console.log(66%"5"); //1

Number 자료형과 String 자료형을 덧셈하면, Number가 String으로 변환되고 두 개의 String이 합쳐진다.

2행의 경우 왼쪽에서부터 코드를 읽어나가므로 (10+66)+"false"="76false"가 된다.

3행은 눈여겨볼 필요가 있는 코드이다.

1행의 (Number+String) 연산에서 Number가 String으로 변환되어 합쳐진 것과는 다르게 String이 Number로 변환되어 계산되었다.

뺄셈 연산과 마찬가지로 곱셈, 나눗셈 및 나머지 연산에서도 String->Number의 형 변환이 일어난다.

 

console.log(""==false); //true

위의 코드는 true를 출력한다.

이것에 대해서는 Boolean 문맥에서 평가되는 truthy와 falsy 및 Equality comparisons and sameness 링크를 참고하면 이해가 깊게 될 것 같다.

 

 

아무튼 이렇게 ==을 사용할 경우 자바스크립트는 비교 값들을 형 변환하기 때문에,

모든 comparisons을 빠삭하게 파악하고 있는 경우가 아니라면 때로는 어리둥절한 결과가 도출될 수도 있다.

이런 경우에 ===을 사용하면 형 변환이 발생하지 않아 더욱 확실한 결괏값을 기대할 수 있으므로

꼭 필요한 경우가 아니면 ==보다는 ===을 추천한다.(물론 어디에 어떻게 사용하느냐에 따라 다르겠지만!)

 

 

 

 

출처 : github js-33concepts, Nomad Coders