<JavaScript 형 변환>

정의

• 처음에 값으로 정해진 자료형을 다른 자료형으로 바꾸는 것

방법

• 형 변환은 console.log와 같이 JavaScript에서 기본적으로 제공하는 함수를 활용한다.

문자열로 변환 : String 함수
숫자로 변환 : Number 함수
불린으로 변환 : Boolean 함수
(앞 글자는 반드시 대문자로 기재)

console.log('10' + '7'); //결괏값 : 문자열 107
console.log(10 + 7); //결괏값 : 숫자 17

위 코드는 아래와 같이 형 변환 가능하다.

console.log(Number('10') + Number('7')); //결괏값 : 숫자 17
console.log(String(10) + String(7)); //결괏값 : 문자열 107

Boolean 함수

• 대부분의 경우, 어떤 값을 불린으로 변환하면 true로 변환된다.

let x = '문자';
console.log(x); //결괏값 : 문자
console.log(Boolean(x)); //결괏값 : true
console.log(typeof x); //결괏값 : string
console.log(typeof Boolean(x)); //결괏값 : boolean

let x = '123';
console.log(x); //결괏값 : 문자열 123 
console.log(Boolean(x)); //결괏값 : true
console.log(typeof x); //결괏값 : string
console.log(typeof Boolean(x)); //결괏값 : boolean

• falsy값 : 불린값으로 형 변환 시 false로 변환되는 값
  : false, null, undefined, '', 0, NaN

숫자로 형 변환

• 숫자가 아닌 형태의 문자열을 숫자로 변환하면 NaN이 출력된다.

let x = '문자';
console.log(x); //결괏값 : 문자
console.log(Number(x)); //결괏값 : NaN
console.log(typeof x); //결괏값 : string
console.log(typeof Number(x)); //결괏값 : number 

• 문자열이라도 숫자 형태의 문자열인 경우 숫자로 형 변환이 가능하다.

let x = '123';
console.log(x); //결괏값 : 문자열 123 
console.log(Number(x)); //결괏값 : 숫자 123 
console.log(typeof x); //결괏값 : string
console.log(typeof Number(x)); //결괏값 : number

• 불린을 숫자로 형 변환 시, true는 숫자 1, false는 숫자 0으로 변환된다.

let y = true;
console.log(y); //결괏값 : true
console.log(Number(y)); //결괏값 : 1
console.log(typeof y); //결괏값 : boolean
console.log(typeof Number(y)); //결괏값 : number

자동 형 변환

JavaScript의 경우 직접 함수를 적어주지 않고도 자동으로 형 변환이 가능하기도 하다.

(1) 산술 연산 (+, -, *, /, %, **)

• 연산되는 값들을 숫자형으로 변환한다.
• JavaScript에서 +의 경우, 숫자보다 문자열 연산이 더 강하다. 따라서 산술 연산에서 연산되는 값들 중 문자열이 하나라도 있을 경우, 문자열 연산으로 동작한다.

console.log(3 + '1'); //결괏값 : 문자열 31

• NaN은 어떤 값과 연산을 하더라도 NaN이 출력된다.

console.log(7 % 'two'); //결괏값 : NaN (문자열 two를 숫자로 형 변환하면 NaN이므로 이것을 어떤 값과 연산하더라도 NaN 출력)

(2) 관계 비교 연산 (>, >=, <, <=)

• 특별한 경우를 제외하고 산술 연산과 같이 값을 모두 숫자형으로 변환한다.
• 비교가 불가능한 경우 false가 출력된다.

console.log('two' >= 1); //결괏값 : false (문자열 two를 숫자로 형 변환하면 NaN, NaN을 숫자 1과 비교할 수 없으므로 false 출력)

(3) 같음 비교 연산자 (==(동등), !=(부등), ===(일치), !==(불일치))

• 동등 비교(==, !=) : 숫자형으로 형 변환
• 일치 비교(===, !==) : 형 변환이 일어나지 않음

console.log(1 === '1'); //결괏값 : false
console.log(1 === true); //결괏값 : false
console.log(1 == '1'); //결괏값 : true (문자열 1이 숫자 1로 변환)
console.log(1 == true); //결괏값 : true (불린 true가 숫자 1로 변환)