자바스크립트의 자료형 변환

자바스크립트라는 언어는 다른 프로그래밍 언어들에 비해서 굉장히 유연한 성격을 가지고 있다. 이것이 큰 장점이 될 수도 있지만 예기치 못한 오류를 발생시키는 단점이 될 수도 있다. 그래서 오히려 자바스크립트에서 자료형이 어떤 식으로 인식이 되고 언제 변환이 되는지 잘 알고 있어야 깔끔한 프로그래밍을 할 수 있다.

console.log(1 + '1');
console.log(1 - '1');

위 코드의 출력결과를 예상해보고 확인해보자. 상당히 헷갈린다.

그래서 헷갈리던 부분들을 정리해보고자 한다.

📌숫자 자료형으로 변환

• Number() 사용

Number(자료)

Number('1098') // 출력: 1098
typeof(Number('1098')) // 출력: 'number'

Number('학수123');	// NaN
typeof Number('학수123');	// number

Number(true)	// 1
Number(false)	// 0

• 숫자 연산자(-, *, /) 사용

'898' - 23	// 875
typeof('898' - 23) // number 

true - 3 // -2
typeof (true - 3)	// number    

📌문자열 자료형으로 변환

• String() 사용

String(자료)

String(42.178)	// '42.178'
String(false)	// 'false'

• 문자열 연결 연산자('+') 사용

898 + '' // '898'
false + '123' // 'false123'
'1' + 1	// '11'

문자열 연결 연산자를 사용하는 부분은 유용하게 사용될 수 있으면서도, 특히 헷갈릴 수 있는 부분이라서 잘 기억하고 있는 것이 좋을 것이다.

📌불 자료형으로 변환

0, NaN, '', null, undefined 이 5가지 자료형은 불로 변환했을 때 false로 변환된다. 위 5가지 외에는 true로 변환된다.

• Boolean() 사용

Boolean(자료)

Boolean(0)		// false
Boolean('0')	// true

Boolean(false)		// false
Boolean('false')	// true

Boolean(NaN)	// false
Boolean('NaN')	// true

Boolean('')		// false
Boolean(null)	// false

Boolean(undefined)	// false

let a
Boolean(a)		// false

let b = 3
Boolean(c)		// true

• 논리 부정 연산자(!) 사용

논리 부정 연산자인 !를 사용해서 다른 자료형을 불 자료형으로 변환할 수 있다.
불이 아닌 다른 자료에 논리 부정 연산자를 2번 사용하면 불 자료형으로 변환된다.

!!579		// true
!!0			// false
!!null		// false
!!'hello' 	// true

!'hi'		// false
typeof(!'hi')	// boolean

책 내용에는 위와 같이 써있었지만 실제로 1번만 사용해도 변환이 되었다.