자바스크립트 개발자라면 알아야 할 Concept 33 [#4. Type Coercion]

2020/11/03 - [Developer/Javascript] - 자바스크립트 개발자라면 알아야 할 Concept 33 [#1. Call Stack]

2020/11/06 - [Developer/Javascript] - 자바스크립트 개발자라면 알아야 할 Concept 33 [#2. Primitive Types]

2020/11/16 - [Developer/Javascript] - 자바스크립트 개발자라면 알아야 할 Concept 33 [#3. Value Types and Reference Types]

 

"자바스크립트 개발자라면 알아야하는 핵심 컨셉 33개"

33개의 개념은 다른 개발자가 Github에 올려준 내용을 바탕으로 한다. [https://github.com/yjs03057/33-js-concepts]

 

 

 

 

 

 

 

 

---

Type Coercion

 

 

다음과 같은 코드를 가정해보자.

console.log(3 + "Hi");
console.log(3 + 3 + "Hi");
console.log("" == true);
console.log(1 == true);
console.log(11 + true);

 

어떻게 생각하는가?

 

3 + "Hi"

3 + 3 + "Hi"

 

"불가능해"

 

33 + boolean

 

"불가능해"

 

 

그러나 자바스크립트에서는 가능하다.

 

 

위 코드를 실행하면

다음과 같은 결과가 출력된다.

 

 

이것을 Type Coercion이라고 한다.

Coercion은 Conversion 이라고 생각하면 된다.

 

즉, 자바스크립트가 값을 강제적으로 변환시킨다는 뜻이다.

 

 

 

 

5번째줄의 코드를 보자

console.log(11 + true);

11 + true에서

true를 1로 변환시켜서 연산했다.

결과는 12를 출력.

 

비슷하게 false는 0으로 변환해서 연산한다.

 

더하기, 빼기, 곱하기, 나누기 연산에서

모두 가능하다.

 

console.log(11 - true)
console.log(11 - false)
console.log(11 * true)
console.log(11 * false)
console.log(11 / true)
console.log(11 / false)

 

 

그러나, 더하기 연산이 항상 숫자로 바꾸지는 않는다.

"string"의 경우, 하나의 string 덩어리로 인식한다.

그리고 오직 더하기에서만 하나의 덩어리가 된다.

 

이것을 loaded operator라고 한다.

 

 

다음 코드를 살펴보자.

console.log(11 + 66 + "false");

 

 

11 + 66의 연산 결과로 77이 되었고,

77 + "false"의 연산 결과로

77false가 되었다.

 

자바스크립트는 왼쪽에서 오른쪽으로 읽는다.

따라서 11 + 66의 연산을 먼저 했고,

이후에 + "false"연산을 한 것이다.

 

왼쪽에서 오른쪽으로 읽어가며

11 + 66은 숫자끼리의 연산이라

변환할 필요가 없어서 그대로 계산했고

계산된 77과 "false"의 연산은

"false"가 string이라서

하나의 string 덩어리로 본 것이다.

 

 

console.log(77 - "1);

77 - "1"에서

"1" string을 숫자로 변환한 것이다.

이것이 Type Coercion이다.

 

 

 

 

 

맨 처음 코드에서3번째 줄을 보자.

console.log("" == true);

"" == ture는 false가 출력되었다.

 

empty string은 false가 된다.

 

 

null, 0, NaN, Undefined는 모두 false이다.

이는 쉽게 예상된 결과이다.

 

그러나, ""의 경우 예상된 결과는 아니다.

 

 

 

왜 empty string은 false인가?

 

 

 

"", empty string은

자바스크립트에서 제로 바이트로 인식된다.

 

그리고 자바스크립트는

제로 바이트를 0으로 변환한다.

 

변환된 0은 false라서

"" = true가 false가 되는 것이다.

 

 

 

---

 

" = = = " , " = = "

"==="를 사용하게 되면, Type Coercion이 일어나지 않는다.

 

 

console.log("1" === 1);

 

false를 출력하는데,

"==="를 사용하면

Type Coercion이 일어나지 않기 때문이다.

 

반면에,

console.log("1" == 1);

"=="를 사용하면,

Type Coercion이 일어났기 때문에

true를 출력한다.

 

 

---

 

그렇다면,

"true" == true를 하게 된다면?

 

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

결과는

False

 

"true" string은 거짓인데,

왜 "1" string은 참이 되는 것인가?

 

 

"=="은 boolean형을 만나게 되면

숫자로 변환한다.

 

즉, true를 1로 변환하는 것이다.

또한, 앞에 string을 숫자로 변환하려고 한다.

 

"true" == true를

"1" == 1의 형태로 변환하려는 것이다.

 

그러나

"true"는 숫자로 변환되지 않는다.

 

console.log(parseInt("true"));

를 해보면 알 수 있다.

결과는 다음과 같이 NaN가 출력된다.

 

즉,

console.log("true" == true)를

console.log(NaN == true)로 바꾼 것이다.

 

따라서

console.log("true" == true)는

false를 출력하게 되는 것이다.

 

 

위 같은 과정처럼, 

"=="는

boolean형을 만나면

숫자로 변환하고

그리고 앞에 string이 있다면

숫자로 변환하고

숫자와 string 간의 연산이라면

string으로 인식해서 연산하는 등

복잡한 규칙을 거쳐가게 된다.

 

 

따라서

"=="이 아닌

"==="을 사용하면 Type Coercion 규칙을 피해 갈 수 있다.

 

Type Coercion에 대해서 알아두고

"==="을 사용하면

이 규칙을 피할 수 있다는 것을 알면

많은 버그들을 피해갈 수 있으니

알아두는 것이 좋다.