20. [JavaScript] Type Conversion 형변환

Type Conversion

String() > 문자형으로 변환

Number() > 숫자형으로 변환

Boolean() > 불린형으로 변환

 

형 변환이 필요한 이유

String + String = String

Number + Number = Number

String + Number = String 이런 경우 의도치 않은 동작이 발생합니다.

 

수학, 과학 점수를 입력받아 평균을 내는 프로그램을 만들어보겠습니다.

const mathScore = prompt("수학 점수는?"); // 80
const engScore = prompt("영어 점수는?"); // 60
const result = (mathScore + engScore) / 2;

console.log(result); // 4030

 

이렇게 값을 입력하면 전혀 이상한 값이 나옵니다.

입력받은 값은 String으로 처리되어 "80" + "60"으로 처리된 이후 "8060" / 2가 계산되어 4030 Number 타입으로 변환됩니다.

타입이 자동으로 변하는 것을 "자동 형 변환"이라고 합니다.

자동 형변환이 편할 때도 있는데 제대로 된 동작을 하지 않는 경우가 발생할 때는 "명시적 형 변환"을 해줘야 합니다.

 

String()

문자열 타입으로 변환시킵니다

console.log(
    String(3),
    String(true),
    String(false),
    String(null),
    String(undefined),
);

// "3" "true" "false" "null" "undefined"

 

 

Number()

숫자 타입으로 변환시킵니다.

문자열을 Number 메서드로 변환시키면 NaN을 리턴합니다.

true와 false은 각각 1과 0을 리턴합니다.

console.log(
    Number("1234"),
    Number("abcd"),
    Number(true),
    Number(false),
);

// 1234 NaN 1 0

 

주의사항

버그 없는 코드를 만들기 위해서는 주의사항을 잘 알고 계셔야 합니다.

사용자로부터 나이를 입력받는데 그냥 취소 버튼을 누르면 null이 할당되고 null은 0으로 변환되게 됩니다.

console.log(
    Number(null),
    Number(undefined)
);

// 0 NaN

 

 

Boolean()

false

• 숫자 0
• 빈 문자열 ""
• null
• undefined
• NaN

이외의 값은 전부 true를 반환합니다.

console.log(
    Boolean(1),
    Boolean(true),
    Boolean("javascript")
);

// true true true

console.log(
   Boolean(0),
   Boolean(""),
   Boolean(null),
   Boolean(undefined),
   Boolean(Nan)
);

// false false false false false

 

 

주의사항

버그 없는 코드를 만들기 위해서는 주의사항을 잘 알고 계셔야 합니다.

console.log(
    Boolean(0), // false
    Boolean('0'), // true
    Boolean(''), // false
    Boolean(' ') // true
);