우리가 자바스크립트에서 사용하는 모든 값은 제각각의 타입을 가지고 있습니다.

이런 타입은 개발자의 의도에 따라 변환되기도 하고, 암묵적으로 평가되기도 합니다.

암묵적 타입 변환(Implicit Coercion)

자바스크립트 엔진은 표현식을 평가할 때 맥락에 따라 타입을 강제로 변환할 때가 있습니다. 개발자의 의도와 무관하게 작동하는 방식입니다.

자바스크립트 엔진이 어떻게 타입을 변환하는지 알게 되면, 타입이 바뀌어 발생할 수 있는 오류에 대응하기 쉽습니다.

if(1) 은 실행되는 블록일까요? if(!val) 은 무엇을 의미하는 걸까요? 타입 변환을 통해 알아봅시다.

'10' + '1' // '101' '10' + 1 // '101' 10 + '1' // '101' '10' * '10' // 100 10 * '10' // 100 if(1) { } // 1은 true로 평가 if(!0) { } // 0은 false로 평가

+ 연산자는 문자열을 연결할 수도 있고, 숫자의 덧셈을 할 수도 있는 연산자입니다. 따라서 숫자 + 문자의 결과는 문자로 평가됩니다.
하지만 * 연산자는 숫자의 곱셉을 계산할 수 있는 연산자였죠? 따라서 문자 * 문자일지라도 평가결과는 숫자가 되는 것입니다.

문자열 타입 암묵적 변환

문자열 타입으로의 변환은 문자 그대로 출력되게끔 합니다.

0 + '' // '0' -0 + '' // '0' 10 + '' // '10' -10 + '' // '-10' NaN + '' // 'NaN' true + '' // 'true' false + '' // 'false' undefined + '' // 'undefined'

숫자 타입 암묵적 변환

숫자 타입으로 변환되는 경우는, 숫자 연산에 사용되는 연산자(산술 연산자)일 경우에 작동합니다.

산술 연산자는 숫자 타입으로 연산하는 것이 목적이기 때문에, 피연산자들을 숫자 타입으로 암묵적 형변환합니다.

단, 숫자로 변환할 수 없는 값(ex. String, {} 등)은 NaN으로 바뀌기 때문에 주의해야합니다.

1 - '1' // 0 10 * '10' // 100 +'' // 0 -'' // -0 +'any string' // NaN +true // 1 +false // 0 +null // 0 +undefined // NaN 10 > '1' // true +[] // 0 +[1, 2] // NaN +{} // NaN

불리언 타입 암묵적 변환

불리언 타입(true/false)로의 형변환은 주로 if, for 같은 제어문이나 삼항연산자 등에서 사용합니다.

논리적으로 참/거짓이 판별될 때 사용하는데요. 논리 결과가 필요한 곳에서 자바스크립트 엔진은 값을 불리언 타입으로 형변환 합니다.

if('') { console.log('실행 1') } if(0) { console.log('실행 2') } if('any string') { console.log('실행 3') } if(null) { console.log('실행 4') } if(undefined) { console.log('실행 5') } if(1) { console.log('실행 6') } if(10000) { console.log('실행 7') } // 실행 3 // 실행 6 // 실행 7

자바스크립트 엔진은 불리언 타입이 아닌 값을 Truthy 혹은 Falsy로 평가합니다. 이 말은 참(혹은 거짓)으로 평가되는 값을 의미합니다.

다시 말해 제어문 같이 불리언 값이 필요한 곳에서 형변환되는 것이죠.

명시적 타입 변환(Explicit Coercion)

다음은 명시적 타입 변환입니다. 개발자가 뚜렷한 의도를 가지고 타입을 변환하는 방법은 여러가지가 있습니다.
빌트인 함수를 사용하거나, 내장 메소드, 함수 등을 사용하는 방법이 있습니다.

문자열 타입 명시적 변환

// String 생성자 함수 사용 String(10) // '10' String(NaN) // 'NaN' String(Infinity) // 'Infinity' String(true) // 'true' // Object.prototype.toString 메소드 사용 (10).toString() // '10' (NaN).toString() // 'NaN'

숫자 타입 명시적 변환

// Number 생성자 함수 사용 Number('10') // 10 Number(true) // 1 Number(false) // 0 // parseInt, parseFloat 함수 사용 parseInt('10') // 10 parseInt('10.345') // 10 parseFloat('10.345') // 10.345

불리언 타입 명시적 변환

// Boolean 생성자 함수 사용 Boolean('abc') // true Boolean('') // false Boolean('false') // true --> 문자열이 있기 때문에 true Boolean(0) // false Boolean(1) // true Boolean(null) // false Boolean(undefined) // false Boolean(NaN) // false Boolean([]) // true Boolean({}) // true

다음 글에서는 객체 란 무엇인지 알아보도록 하겠습니다.

◾ 자바스크립트 제어문(2) - 반복문 👈 이전 글 보기