[JS] 자료의 형 변환

 자바스크립트에는 총 8가지의 자료형이 있지만 대표적으로는 문자, 숫자, 불린 타입의 자료형이 있다. 그런데 코딩을하다보면 문자열 "123"을 숫자 123으로 변환해서 쓸 때가 있는데, 이렇게 자료의 형을 변환시켜서 사용하는 과정을 우리는 자료의 형 변환이라고 한다. 또한 명시적으로 변환을 안해줘도 alert함수와 같이 자동으로 형 변환을 해주는 경우도 존재한다. 주로 쓰이는 형 변환은 문자형으로의 변환, 숫자형으로의 변환, 불린형으로의 변환 세 가지가 있다. 이번 포스팅에서는 이 세 가지 변환을 다루려고 한다.

 

 

1. 문자형으로의 변환

  문자형으로의 형 변환은 문자형의 값이 필요할 때 일어난다. alert 함수는 매개변수로 문자형을 받기 때문에 alert(value)의 경우 value는 문자형이어야만 한다. 하지만 만약 다른 값을 받게 되더라도 alert는 그 값을 문자형으로 자동변환시켜준다.

let value = true;
alert(value); //자동으로 true를 문자열려 변환시켜준다(자동 변환)
console.log(typeof value) // boolean 타입이므로 boolean 출력

/* 명시적 변환 */
value = String(true);
alert(value); // 문자열 true 출력
console.log(typeof value); // String 출력

console.log(String(null)); // "null"
console.log(String(false)); // "false"

 

 

2. 숫자형으로의 변환

 숫자형으로의 변환은 수학과 관련된 함수의 표현식에서 변환된다. 

console.log("6"/"3"); // 2 출력
console.log("6"*1); // 6 출력

 

또한 Number 함수를 사용하면 명시적인 형 변환을 할 수 있다. 하지만 Number 함수에 숫자 이외에 글자가 들어가 있는 문자열을 변환하면 NaN을 출력한다.

let str = "123";
console.log(str); // "123" 출력
console.log(Number(str)); // 123 출력

/* Number는 매개변수에 따라 출력 결과가 달라진다 */
console.log(Number(undefined)); // NaN
console.log(Number(null)); // 0
console.log(Number(true)); // 1
console.log(Number(false)); // 0
console.log(Number("123z")); // NaN
console.log(Number("  456  ")); //공백 제거 후 456 출력

 

 

3. 불린형으로의 변환

불린형으로의 변환은 아주 간단하게 Boolean 함수를 쓰면 된다.

console.log( Boolean(1) ); // 1(true)
console.log ( Boolean(0) ); // 0(false)

console.log( Boolean("hello") ); // true
console.log( Boolean("") ); // false

console.log( Boolean("0") ); //true
console.log( Boolean(" ") ); // true

console.log(Boolean(null)); // false;
console.log(Boolean(Number("zasv"))); // false
console.log(Boolean(undefined)); // false

 

 

4. 참고자료

 코어 자바스크립트 - 형변환