모던 JavaScript 튜토리얼을 읽고 정리한 글입니다.
Preview
문자형으로 변환: 무언가를 출력할 때 주로 일어난다.
String(value)
를 사용하면 문자형으로 명시적 변환을 할 수 있다.숫자형으로 변환: 수학 관련 연산 시 주로 일어난다.
Number(value)
로도 형 변환을 할 수 있다.
전달받은 값 형 변환 후 undefined
NaN
null
0
true / false
1
/0
string
전달받은 문자열을 그대로 읽되, 처음과 끝의 공백을 무시한다. 문자열이 비어있으면 0
, 오류가 발생하면NaN
이 된다.불린형으로 변환: 논리 연산 시 발생한다.
Boolean(value)
으로도 변환할 수 있다.
전달받은 값 형 변환 후 0
,null
,undefined
,NaN
,""
false
그 외의 값 true
형 변환
함수와 연산자에 전달되는 값은 대부분 적절한 자료형으로 자동 변환된다. 이를 형 변환이라고 한다.
alert
가 전달받은 값의 자료형과 관계없이 문자열로 자동 변환하여 보여주는 경우- 수학 관련 연산자가 전달받은 값을 숫자로 변환하는 경우
- 전달받은 값을 원하는 타입으로 변환(명시적 변환)하는 경우
🔠 문자형으로 변환
문자형으로의 형 변환은 문자형의 값이 필요할 때 일어난다. alert
메서드는 매개변수로 문자형을 받는데, 만약 다른 형의 값을 전달받으면 문자형으로 자동 변환된다. String(value)
함수를 호출해 전달받은 값을 문자열로 변환할 수도 있다.
let value = true;
alert(typeof value); // boolean
value = String(value); // 변수 value엔 문자열 "true"가 저장된다.
alert(typeof value); // string
false
는 문자열 "false"
로, null
은 문자열 "null"
로 변환되는 것처럼 문자형으로의 변환은 대부분 예측한대로 일어난다.
🔢 숫자형으로 변환
숫자형으로의 변환은 수학과 관련된 함수 및 표현식에서 자동으로 일어난다. 숫자형이 아닌 값에 나누기를 적용한 경우처럼!
alert( "6" / "2" ); // 3, 문자열이 숫자형으로 자동변환된 후 연산이 수행된다.
Number(value)
함수로 주어진 값을 숫자형으로 명시해서 변환할 수 있다.
let str = "123";
alert(typeof str); // string
let num = Number(str); // 문자열 "123"이 숫자 123으로 변환된다.
alert(typeof num); // number
숫자형 값을 문자 기반 폼(form)을 통해 입력받는 경우 명시적 형 변환이 필수이다.
숫자 이외의 글자가 들어가 있는 문자열을 숫자형으로 변환하면 그 결과는 NaN
이 된다.
let age = Number("임의의 문자열 123");
alert(age); // NaN, 형 변환이 실패합니다.
숫자형으로 변환 시 적용되는 규칙
전달받은 값 | 형 변환 후 |
---|---|
undefined |
NaN |
null |
0 |
true / false |
1 / 0 |
string |
문자열의 처음과 끝 공백이 제거된 후 남아있는 문자열이 없으면 0, 있으면 문자열에서 숫자를 읽는다. 변환에 실패하면 NaN 이 된다. |
alert( Number(" 123 ") ); // 123
alert( Number("123z") ); // NaN ("z"를 숫자로 변환하는 데 실패함)
alert( Number(true) ); // 1
alert( Number(false) ); // 0
null
과 undefined
의 결과가 다르다! null
은 0
이 되고 undefined
는 NaN
이 된다.
❓ 불린형으로 변환
불린형으로의 변환은 논리 연산을 수행할 때 발생한다. Boolean(value)
를 호출하면 명시적으로 수행할 수 있다.
불린형으로 변환 시 적용되는 규칙
- 숫자
0
, 빈 문자열,null
,undefined
,NaN
과 같이 비어있는 값 ➡️false
- 그 외의 값 ➡️
true
alert( Boolean(1) ); // 숫자 1(true)
alert( Boolean(0) ); // 숫자 0(false)
alert( Boolean("hello") ); // 문자열(true)
alert( Boolean("") ); // 빈 문자열(false)
⚠️ 문자열 "0"
은 true
이다! PHP 등 일부 언어에서는 false
로 취급하지만, JavaScript에서 비어 있지 않은 문자열은 항상 true
이다.
형 변환 시 적용되는 규칙 대부분은 이해하고 기억하기 쉽지만 아래의 예외적인 경우에 주의하자 🌟
- 숫자형으로 변환할 때
undefined
는0
이 아니라NaN
이 된다. - 문자열
"0"
과 공백(" "
)은 불린형으로 변환하면true
가 된다.