JavaScript [형 변환]
함수와 연산자에 전달되는 값은 대부분 적절한 자료형으로 자동 변환됩니다. 이러한 과정을 '형 변환'이라고 합니다.
aleret가 전달받은 값의 자료형과 관계없이 이를 문자열로 자동 변환하는 것이나 수학 연산자가 전달받은 값을 숫자로 변환하는 경우가 대표적입니다.
이번 시간에는 형 변환에 대해 알아보겠습니다.
❗ 객체의 형변환은 객체를 배운 후 다루도록 하겠습니다
문자형으로 변환
문자형으로의 형 변환은 문자형의 값이 필요할 때 일어납니다.
alert는 매개변수로 문자형을 받기 때문에 alert(value)에서 value는 문자형이어야 합니다. 만약 다른 형의 값을 받으면 문자형으로 자동 변환합니다.
String(value)함수를 호출해 전달받은 값을 문자열로 변환 할 수 있습니다.
let value = true;
alert (typeof value);
string을 이용하면 false, null 등도 문자열로 변환된다.
숫자형으로 변환
숫자형으로의 변환은 수학과 관련된 함수와 표현식에서 자동으로 일어난다.
사칙연산을 적용했을 때가 대표적이다.
Number(value)함수를 사용하면 주어진 값(value)을 숫자형으로 변환할 수 있습니다.
let str = "123"
alert(typeof str); // string
let num = Number(str); // 문자열에서 숫자로 변환
alert(typeof num); // number
그리고 숫자 이외의 글자가 들어가 있는 문자열을 숫자형으로 변환하려는 경우, 그 결과는 NaN이 됩니다.
(NaN은 계산 중 에러가 발생했다는 것을 나타내는 값)
문자 기반 폼을 통해 입력받는 경우 이처럼 숫자형 변환이 필수적입니다.
| 전달받은 값 | 형 변환 후 |
| undefined | NaN |
| null | 0 |
| true and false | 1 과 0 |
| string | 문자열의 처음과 끝 공백 제거 후 문자열이 없다면 0, 있다면 NaN, 실패하면 NaN이 됩니다. |
예시
alert( Number(" 123 ") ); // 123
alert( Number("123z") ); // NaN ("z"를 숫자로 변환하는 데 실패함)
alert( Number(true) ); // 1
alert( Number(false) ); // 0null과 undefined를 숫자형으로 변환 시 결과가 다르다는 점을 유의하시길 바랍니다. null은 0이 되고 undefined는 NaN이 됩니다.
불린형으로 변환
불린형으로의 변환은 논리 연산을 수행할 때 발생합니다.
Boolean(value)를 호출하면 명시적으로 불리언으로의 형 변환을 수행할 수 있습니다.
불린형으로 변환 시 적용되는 규칙은 다음과 같습니다.
- 숫자 0, 빈 문자열, null, undefined, NaN과 같이 직관적으로 '비어있다고' 느껴지는 값들은 false가 됩니다.
- 그 외의 값은 true가 됩니다.
예시
alert(Boolean(1)); // true
alert(Boolean(0)); // false
alert(Boolean("hello"); // true
alert(Boolean("")); // false
alert(Boolean("0")); // true (문자열 0이기 때문)
* 요약 *
문자형 변환 : String(value)
숫자형 변환 : Number(value)
숫자형으로의 변환은 다음 규칙을 따릅니다.
| 전달받은 값 | 형 변환 후 |
| undefined | NaN |
| null | 0 |
| true / false | 1 / 0 |
| string | 전달 받은 문자열을 그대로 읽지만 처음, 끝의 공백 무시 문자열이 비었으면 0, 문자열이 있으면 NaN |
불린형 변환: Boolean(value)
불린형은 0, ull, undefined, NaN, ""(공백)은 false가 되며 그 외의 값은 true가 된다.