[강좌]자바스크립트 형변환 String()/Number()/Boolean()

자바스크립트 형변환

 

자바스크립트에서는 크게 세 가지 형변환을 제공하고 있다. 형변환의 종류와 형변환 방법을 알아보고 사용 예를 간단하게 살펴보겠습니다.

 

1. 형변환의 종류

String() => 문자형으로 변환
Number() => 숫자형으로 변환
Boolean() => 참 거짓형으로 변환

 

 

2. 형변환이 필요한 이유

문자열 더하기 문자열을 하면 문자열이 연결되어 결괏값이 나타납니다.
숫자 더하기 숫자를 하면 더하기 연산이 됩니다.
그런데 문자열 더하기 숫자를 하면 의도하지 않은 결과 값이 나타날 수 있습니다.
아래는 예시입니다.

 

예1)
3번째 결과값을 보면 원하지 않는 값인 35가 나온 것을 알 수 있습니다.

let s1 = "Hi ";
let s2 = "su";
console.log(s1+s2);
let n1 = 3;
let n2 = 5;
console.log(n1+n2);
let s3 = "3";
let n3 = 5;
console.log(s3+n3);

예 2) prompt를 이용해 값을 입력받을 경우 문자열로 가져오기 때문에 원하지 않는 값이 나타나는 것을 알 수 있다.

let mathScore = prompt("수학 몇점?");
let engScore = prompt("수학 몇점?");
let result = (mathScore + engScore) / 2;
console.log(result);
 

 

3. 형변환방법

3-1. String()으로 형변환하는 방법

예)

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

3-2. Number()로 형 변환하는 방법 

예)

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

결과
3 1 0 0 NaN

 

주의사항 1)

Number("문자") // NaN
Number(null) // 0
Number(undefined) // NaN

주의사항 2)

Number(0) // false
Number('0') // true
Number('') // false
Number(' ') // true

 

3-3. Boolean()로 형 변환하는 방법 

Boollean형변환 같은 경우 false가 되는 경우만 알아두면 됩니다.

false가 되는 경우는 아래와 같으며 나머지는 true를 반환합니다.
- 숫자 0 
- 빈문자열 ''
- null
- undefined
- NaN

예)

    console.log(
        Boolean(0),
        Boolean(''),
        Boolean(null),
        Boolean(undefined),
        Boolean(NaN),
        );

 

 

여기까지 형변환 강좌 마치겠습니다. 감사합니다.

 

 

 

유튜브 코딩앙마 님의 영상을 보고 공부한 내용을 바탕으로 작성하였습니다.
혹시 틀린 내용이 있다면 댓글 부탁드립니다.