[JS] 타입 변환

타입 변환

자바스크립트의 모든 값은 타입이 있다. 값의 타입은 개발자가 의도적으로 값의 타입을 변환하는 명시적 타입 변환 또는 타입 캐스팅이라 한다.

 

var x = 10;

var str = x.toString();

console.log(typeof x, x); // number, 10
console.log(typeof str, str); //string, 10

 

개발자의 의도와는 상관없이 자바스크립트 엔진에 의해 암묵적으로 타입이 변환되는 것을 암묵적 타입 변환 또는 타입 강제 변환이라고 한다.

 

var x2 = 10;
var str2 = "" + x2;
console.log(typeof str2, str2); // string, 10

 

 

명시적 타입 변환이나 암묵적 타입 변환이 기존 원시 값을 직접 변경하는 것은 아니다.

자바스크립트 엔진은 표현식을 평가하기 위해 변수의 숫자 값을 바탕으로 새로운 문자열 값을 생성해서 평가를한다.

이때 암묵적으로 생성된 문자열은 변수에 재할당되지 않는다. 단지 평가를 위해 생성하고 사용하고 버린다.

 

console.log("10" + 2) // 102
console.log("10" * 2); // 20

 

표현식을 평가할 때 코드의 문맥에 부합되지 않는 상황이 발생할 수 있는데 자바스크립트는 가급적 에러를 발생시키지 않도록 암묵적 타입 변환을 한다.

 

-암묵적 타입 변환-

 

문자형 타입으로 변환

console.log(typeof (1 + "")); //string
console.log(typeof (NaN + "")); //string
console.log(typeof (true + "")); //string

 

숫자형 타입으로 변환

console.log(1 - "3"); // -2
console.log(1 / "one"); //NaN 숫자가 아닌것들은 NaN으로 반환
console.log(1 - {}) //NaN

 

불리언 타입으로 변환

-Falsy-

false값이 아닌것들은 모두 true값이다.

 

• false
• undefined
• null
• 0, -0
• NaN
• ""(빈 문자열)

function isFalsy(y){
    return console.log(!y);
}
function isTruthy(y){
    return console.log(!!y);
    // !! 논리값을 반환하기 위해 사용
}
isFalsy(0); //true
isFalsy(NaN); //true
isFalsy(""); //true

isTruthy(1); //true
isTruthy("hello"); //true
isTruthy([1,2]); //true

 

 

-명시적 타입 변환-

 

문자열 타입으로 변환

 

• String 생성자 함수 사용
• toString() 함수 사용
• 문자열 연결 연산자 사용

 

// String 
console.log(typeof String(1)); //string
console.log(typeof String(NaN)); //string
console.log(typeof String(true)); //string

//toString()
console.log(typeof (1).toString()); //string
console.log(typeof (true).toString()); //string
console.log(typeof (NaN).toString()); //string

//문자열 연결 연산자 +
console.log(typeof (4 + "")); //string
console.log(typeof (true + "")); //string
console.log(typeof (NaN + "")); //string

 

 

숫자 타입으로 변환

 

• Number 생성자 함수 사용
• parseInt, parseFloat 함수 사용(문자열만 변환 가능)

 

// Number
console.log(typeof Number("str"), Number("str")); //number, NaN
console.log(typeof Number(true), Number(true)); //number, 1
console.log(typeof Number(NaN), Number(NaN)); //number, NaN

// parseInt, parseFloat
console.log(typeof parseInt("1"), parseInt("1")); //number, 1
console.log(typeof parseInt("10.5"), parseInt("10.5")); //number, 10
console.log(typeof parseFloat("10.5"), parseFloat("10.5")); //number, 10.5
console.log(typeof parseInt("-2"), parseInt("-2")); //-2

 

 

불리언 타입으로 변환

 

• Boolean 생성자 함수 사용
• ! 연산자 사용

 

//Boolean
console.log(typeof Boolean("str"), Boolean("str")); //true
console.log(typeof Boolean(NaN), Boolean(NaN)); //false
console.log(typeof Boolean(""), Boolean("")); //true

// !
console.log(typeof !!"str", !!"str"); //true
console.log(typeof !"str", !"str"); //true