[JS] 형 변환

연성·2021년 9월 1일
0

JS

목록 보기
3/13
post-thumbnail

형 변환의 기본은 다루지 않습니다. 자세한 사항은 자료 출처에서 보실 수 있습니다.

자료 출처 - 모던 JavaScript 튜토리얼

형 변환❓ 너무 쉬운데❓

라고 생각했다.
아래 문제를 보고 아니라고 생각했다.

"" + 1 + 0
"" - 1 + 0
true + false
6 / "3"
"2" * "3"
4 + 5 + "px"
"$" + 4 + 5
"4" - 2
"4px" - 2
7 / 0
"  -9  " + 5
"  -9  " - 5
null + 1
undefined + 1
" \t \n" - 2

문자열 ➕ 숫자, 문자열 ➖ 숫자

"" + 1 + 0
"" - 1 + 0

위 코드의 결과는 아래와 같다.

10
-1
  • 문자열 + 숫자는 문자열 더하기가 된다.
    • 문자열 더하기는 이어붙이기다.
  • 문자열 - 숫자는 문자열이 숫자로 형 변환이 일어난다.

아니 왜? 🤭
+, -가 바뀌었다고 결과가 이렇게 바뀔일인가? + 연산의 경우 문자열과 숫자 모두 존재하기 때문에 문자열 더하기 숫자는 문자열 더하기로 숫자가 문자열로 형 변환이 일어난다.
반면, 문자열에는 - 연산이 없기 때문에 - 연산을 하기 위해 문자열이 숫자로 형변환이 일어난다.

문자열이 숫자로 형 변환되는 경우

6 / "3"
"2" * "3"
"4" - 2
"4px" - 2
"  -9  " - 5

모두 문자열이 숫자로 형 변환되는 경우다. /, *, - 등 숫자 연산에서만 존재하는 연산자로 연산을 하는 경우다. 답은 아래와 같다.

2
6
2
NaN
-14

위에서부터 3개의 예제는 흔히 볼 수 있는 형 변환 예제이다. 뒤의 2개 예제 역시 문자열이 숫자로 형 변환되는 예제인데, 처음 보았다.
문자열 "4px"이 - 연산자를 만나 숫자로 형 변환이 일어난다. "4px"은 숫자로 형 변환할 수 없기 때문에 NaN이 된다. NaN에 -2를 해봐야 NaN이 된다.
문자열 " -9 "는 - 연산자를 만나 숫자로 형 변환이 된다. 문자열이 숫자로 형 변환 될 때 공백은 모두 제거 된다. 따라서 " -9 "는 -9가 되고 계산 결과는 -14가 된다.

"  -9  " + 5

반면, 위 예제는 처음 예제와 마찬가지로 + 연산이기 때문에 숫자가 문자열로 형 변환이 된다. 결과는 아래와 같다.

  -9    5

문자열이 숫자로 형 변환될 때는 공백이 사라진다

위에서 말했던 것과 같이 문자열이 숫자로 형 변환 될 때는 공백이 사라진다. 따라서

" \t \n" - 2

탭과 줄 바꿈은 모두 사라진다. " \t \n"은 길이가 0인 문자열이 된다. 최종적으로 공백은 숫자로 형 변환 될 때 0이 된다.

null은 0이고 undefine은 NaN❓

null + 1
undefined + 1

위 계산의 결과는 각각

1
NaN

이 된다. null은 숫자로 형 변환이 될 때, 0이 되고 undefineNaN이 된다.

나는 왜 형 변환이 쉽다고 생각했을까. 내가 쉬운 예제만 보았던 것이었다. 사람은 항상 겸손해야 한다.

0개의 댓글