[JavaScript] 기초 3. 형변환(casting)

유의사항: 해당 글은 공부한 내용을 정리하는 용도이므로, 수정이 필요할 경우 내용의 수정이 있을 수 있습니다.

개요

 

이전 글에서는 자바스크립트에서 존재하는 자료형들을 알아봤다. 이번에는 해당 자료형을 변환하는 형변환에 대해서 알아보자

---

형변환이란?

형변환은 변수의 자료형을 변경하는 것을 의미한다. 예를 들어, String자료형을 가진 변수의 값이 "123"이라면 해당 값을 숫자 123으로 바꾸고 싶은경우 형변환을 통해 바꾸게 된다.

 

암시적 형변환(implicit casting)

형변환은 서로 다른 자료형을 가진 변수들이 연산을 할 때 시스템에 의해 암시적으로 형변환 된다. 암시적 형변환에는 규칙이 존재하므로 참고해두면 좋다.

 

문자열

let result1 = 1 + "2";		     // 숫자 + 문자열 => 문자열
console.log(result1);                // output: 12
console.log(typeof result1);         // output: string

let result2 = "1" + true;	     // 문자열 + boolean => 문자열
console.log(result2);                // output: 1true
console.log(typeof result2);         // output: string

문자열은 + 연산자와 만났을 때 우선순위가 높기 때문에 결과값이 문자열로 형변환되는 경우가 많다. ( {}, null, undefined과 만나도 문자열로 형변환된다! )

 

숫자

let result3 = 1 - "2";
console.log(result3);                // output: -1
console.log(typeof result3);         // output: number

let result4 = "2" * "3";
console.log(result4);                // output: 6
console.log(typeof result4);         // output: number

숫자와 문자열이 만나는 경우 +연산자를 제외한 다른 사칙연산자는 숫자의 우선순위가 높아 숫자로 형변환된다.

 

명시적 형변환 (explicit casting)

명시적 형변환은 형변환될 타입을 직접 명시하는 것을 의미한다. 시스템적으로 어떤 자료형으로 형변환 되는지 헷갈린다면 명시적 형변환을 통해 확실히 형변환 해주는 것이 낫다.

 

boolean

console.log(Boolean(0));                // output: false
console.log(Boolean(""));               // output: false
console.log(Boolean(null));             // output: false
console.log(Boolean(undefined));        // output: false
console.log(Boolean(NaN));              // output: false
console.log(Boolean("false"));          // output: true
console.log(Boolean({}));               // output: true

 

문자열

let result5 = 123;
console.log(String(result5));               // output: "123"
console.log(typeof result5);                // output: number

 

숫자

let result6 = "456";
console.log(Number(result6));               // output: 456
console.log(typeof result6);                // output: string

 

Falsy한 값, Truthy한 값

 

자료형들을 boolean값으로 형변환 값에 따라 같은 자료형도 true또는 false값을 가지게 된다. 이 때 결과값이 false가 나오는 값은 Falsy한 값, true가 나오는 값은 Truthy한 값이라고 한다. 아래 코드를 보고 어떤 값이 true또는 false값을 가지는 지 이해해보자.

if (0){
    console.log("0");
}

if (1){
    console.log("1");
}

if (""){
    console.log("빈 문자열");
}

if ({}){
    console.log("{}");
}

if ([]){
    console.log("[]");
}

if (null){
    console.log("null");
}

if (undefined){
    console.log("undefined");
}

if (NaN){
    console.log("NaN");
}

if (false){
    console.log("false");
}

if (true){
    console.log("true");
}

// Output: 
// 1
// {}
// []
// true

숫자는 0을 제외한 모든 값이 true이며, 비정상적인 값을 표현하는 null, undefined, NaN은 false로 취급된다. 신기한 점은 [], {}와 같이 Object자료형은 비어있어도 true로 취급한다.