4. 형 변환(Type conversion)

형 변환 Type conversion

: 자바스크립트가 강제적으로 값을 변환시키는 것.

강제적 형변환은 코드 작성에 있어 피하는 것이 좋다.

 

아래 예시를 통해 플러스 연산자가 어떻게 형 변환을 일으키는지 살펴보자.

 

예시 1

예시 2

 

플러스 연산자는 '수학적 연산', '문자열 연결'의 2가지 기능을 수행한다.

위 예시 1, 2를 보면  +연산자로 인해 true는 1로, false는 0으로 형변환된 것을 확인할 수 있다(수학적 연산).

 

예시 3

예시 4

 

예시 3의 경우에는 "true"가 따옴표 안에 들어 있기 때문에 불리언이 아닌 문자열로 인식되어 2true라는 값을 출력하고 있다(문자열 연결).

예시 4의 경우, JavaScript는 코드를 왼쪽에서 오른쪽으로 읽어나가기 때문에, 1+2를 먼저 수학적으로 연산하고(3), 다음으로 true라는 문자열을 연결한 것을 볼 수 있다.

 

 

예시 5

 

마이너스 연산자 또한 형 변환을 일으킨다. 예시 5에서 "1"은 따옴표 안에 들어있기 때문에 사실 문자열이지만, -연산자가 이를 숫자로 형변환하여 19라는 결과값을 내어주었다.

 

 

텅 빈 문자열("")과 0은 false다.

NaN, Undefined, null 또한 false다.

 

텅 빈 문자열은 0byte이기 때문에 자바스크립트가 0으로 형변환하기 때문이다.

---

==와는 달리, ===은 형 변환을 일으키지 않는다.

 

예시 6

예시 7

예시 6의 "1" == 1 에서 "1"은 숫자 1로 형변환되었다. 그래서 true 값을 출력한다.

반면 예시 7의 "1"은 형변환 되지 않고 문자열 "1"로 남았다. 따라서 false를 출력한다.

 

 

예시 8

우리는 예시 6을 통해 "1" == 1이 true라는 걸 확인했다. ==가 문자열 "1"을 숫자 1로 바꾸었기 때문이다.

하지만, "ture" == true는 거짓이다. 왤까?

 

==는 boolean을 만나면 숫자로 변환하기 때문이다.

따라서 위 경우"true"는 숫자로 변환되지 않았고(=문자열이고), 뒤의 ture는 1이 됐다.

"true"(문자열) == 1(숫자) 이라고 해석했기 때문에 false를 출력한 것이다.

 

우리는 이상한 규칙(형 변환)들을 유발하는 ==보다는 ===를 사용하는 습관을 들이자.

이는 많은 버그들을 피해갈 수 있게끔 만들어준다.