1. 타입 변환의 개념
타입 변환이란 하나 이상의 값의 타입이 명시적, 혹은 암묵적으로 형 변환 되는 전체 개념을 아우르며, 방금 말씀드린대로 자바스크립트에서의 형변환은 명시적 타입 변환(explicit coercion)과 암묵적 타입 변환(implicit coercion)두 가지의 유형을 의 타입 변환 방법을 적재적소에 활용해 변수의 타입을 변환하는 작업을 수행합니다.
2. 명시적 타입 변환(explicit coercion)
타입 캐스팅(type casting) 이라고도 하며 사용자가 의도적으로 반환값 등의 타입을 명시적으로 선언하는 작업을 의미합니다. 주로 표준 빌트인 생성자 함수나 빌트인 메서드를 사용하는 방법 등이 존재합니다.
- 명시적 타입 변환 예시) 사용자가 특정 toString 메서드를 사용해 명시적으로 number 변수의 값 82를 문자 82로 변환하는 방법입니다.
이때 number 변수는 객체 타입이 아님에도 불구하고 객체 메서드 중 하나인 toString을 사용할 수 있는 이유는 값의 처리 과정에서 자바스크립트 엔진이 해당 number 변수의 값 타입을 확인한 후 그 타입에 맞는 래퍼 객체(Wrapper Object)를 생성하여 일시적으로 해당 타입(Number 빌트인 객체)의 메서드를 사용하도록 하고, 메서드가 종료되면 해당 래퍼 객체는 삭제처리 하는 일련의 과정을 수행하기 때문에
원시 타입 또한 값의 형태에 따라 각각 Number, String, Boolean 빌트인 객체의 메서드를 사용할 수 있게 됩니다.
let number = 82 // Number 타입의 값을 number 변수에 담은 후 let address = number.toString(); //number 변수에 toString 메서드를 사용하여 Number 타입의 값을 String 타입으로 명시적 변환 후 address 변수에 할당. console.log(address, typeof address) // address의 타입은 String으로 출력될 것입니다.
- 표준 빌트인 객체를 사용해 형변환하는 예시) 표준 빌트인 객체를 활용해 특정 값을 다른 값으로 변환하는 방법입니다.
console.log(String(1)) // 숫자 1을 String 함수로 문자열로 변환 후 출력 console.log(Number("0")) // 문자열 0을 Number 함수를 사용해 숫자 0으로 변환 후 출력 console.log(Boolean(NaN)) // NaN 타입을 Boolean 함수를 사용해 true 또는 false로 변환 (Falsy 값인 false로 변환됨)
3. 암묵적 타입 변환(implicit coercion)
타입 강제 변환(type coercion) 이라고도 하며, 사용자가 형 변환을 명시하지 않았더라도 연산 간 피연산자들 및 반환 값 간의 관계를 자바스크립트 엔진이 판별한 후 자동으로 형 변환 하는 작업을 의미합니다. 주로 사칙 연산을 활용한 연산 과정이나 특정 조건문 등의 상황에서 자바스크립트 엔진에 의해 자동으로 형변환 되는 작업입니다.
- 단항 연산을 이용한 암묵적 형변환
단항 연산자의 경우 값의 타입에 따라 수행 되는 과정이 다른데, 자바스크립트 엔진은 대상이 되는 피연산자의 값에 따라 Number 타입으로 타입 캐스팅이 가능한 경우에 해당 값에 대한 단항 연산을 처리하며, 그 반대의 경우는 NaN을 반환합니다.
그러나 이 방법을 이용한 암묵적 변환 방법 보다 parseInt나 Number를 이용한 묵시적 변환 방법이 훨씬 접근성 및 가독성에서도 유리하기 때문에 개념만 알아두시면 충분합니다.
+'' // 빈 문자열을 Falsy(false)로 취급하여 0으로 자동 변환 +'10' // 문자열 10을 숫자열 10으로 취급하여 number 타입으로 변환 후 반환. +'string' = NaN // 문자열 "String" 을 숫자로 형변환 할 수 없기 때문에 NaN(Not a Number) 로 취급 +true = 0 // true는 컴퓨터 입장에서 이진수 0을 의미하므로 0으로 취급 +false = 1 // true는 컴퓨터 입장에서 이진수 1을 의미하므로 0으로 취급 +null // null은 toNumber 메서드에 의해 추상 연산되어 0으로 처리됩니다. +undefined = NaN // undefined도 마찬가지로 추상 연산에 의해 NaN으로 처리됩니다. +Symbol() = TypeError : Cannot convert a Symbolvalue to a number // Symbol은 타입 캐스팅이 불가능한 타입입니다.
- 이항 연산자 간의 암묵적 변환
- 더하기 연산자(+)를 활용한 암묵적 변환) 사용자가 문자열과 숫자열 값을 더하기 연산자로 연산하는 경우 문자열이 숫자의 내포 여부를 무시하고 무조건 숫자열이 문자열에 결합되어 최종적으로 문자열 값이 반환되게 됩니다. 그래서 보통 이 방법은 숫자열을 빈 공백 문자열("") 과 결합하여 암묵적으로 String 타입으로 변환하는 방법에 주로 사용됩니다.
let countryNumber = 82; // Number 타입의 82를 let result = 82 + "0"; // String 타입인 "0" 과 더할 경우 console.log(address, typeof address); // 결과값은 "820", 타입은 String이 됩니다. > let countryNumber = 82; // Number 타입의 82를 let result = 82 + "code"; // String 타입인 "code" 과 더할 경우 console.log(address, typeof changing); // 결과값은 "82code", 타입은 String이 됩니다.
- 더하기 연산자 이외의 사칙연산을 활용한 암묵적 변환) 사용자가 문자열과 숫자열을 더하기 연산(+) 이외의 연산자로 연산을 수행할 경우 문자열이 온전한 숫자를 내포하고 있다면 자동적으로 Number 타입으로 간주되어 Number 타입간의 연산으로 처리되나, 문자가 하나라도 섞여 있거나 숫자를 포함하지 않는 순수한 문자열일 경우 연산 결과는 NaN(Not a Number)를 반환합니다.
그 이유는 자바스크립트 엔진에서 더하기 연산자로 문자열과 숫자열 간의 연산을 수행시 암묵적 문자열 변환으로 처리가 되지만, 나머지 연산자로 문자열과 숫자열에 대한 연산을 수행할 경우 자바스크립트 엔진은 문자열을 온전한 숫자로 변환할 수 있는지를 판별한 후, 가능하다면 숫자로 변환하여 연산을 수행하고 그렇지 않은 경우 연산 자체가 불가능하기 때문에 NaN을 반환하게 되는 것입니다.
let number = 82 // number 변수에 82를 할당 let address = 82 * "10" //숫자열과 문자열 간의 더하기 연산 외의 연산자로 연산시 문자열에 내포된 10은 온전히 10으로 타입 캐스팅이 가능하기 때문에 82 * 10으로 변환 후 연산을 진행 console.log(address, typeof address) //결과적으로 address는 820, 타입은 Number로 변환됩니다. let number = 82 // 마찬가지로 number 변수에 82를 할당하고 let address = 82 * "100e" //숫자열과 문자열 간의 더하기 연산 외의 연산자로 연산시 문자열에 내포된 100e는 Number로 온전히 타입캐스팅을 할 수 없기 때문에NaN을 반환합니다. console.log(address, typeof address) //결과적으로 address는 NaN, 타입은 Number로 표시됩니다.
- boolean 값을 포함한 사칙 연산 과정에서의 암묵적 변환) boolean값이 포함된 더하기 연산 수행의 경우, 동일하게 연결 연산 과정이 수행되며, 그 이외의 연산자로 연산을 수행할 경우 boolean의 값이 true이면 1을, false면 0으로 변환하여 연산 과정을 수행합니다.
let number = true // 마찬가지로 number 변수에 true 할당하고 let address = number + "100" // 문자열을 더할 경우 number(true)가 1로 타입 캐스팅 된 후 문자열과 결합되어 "1100" 을 반환하게 됩니다. let number = false // 다시 number 변수에 false 할당하고 let address = number * "100" // 더하기 연산 이외의 연산자로 연산을 수행시 Number 타입으로 타입캐스팅 된 후 상대 피연산자의 상태에 따른 연산 결과를 반환하게 됩니다.★ 간단히 정리하자면 더하기 연산자를 이용한 암묵적 변환시 문자열로 이어 붙이고 결과 타입을 String으로 반환하고, 그 이외의 연산자로 암묵적 변환시 Number 타입의 피연산자를 제외한 나머지 타입을 Number 타입으로 타입 캐스팅을 시도하여 연산이 가능한 경우에는 그 결과값을 , 불가능한 경우에는 NaN을 Number타입으로 반환합니다.
- Truthy와 Falsy를 이용한 암묵적 형 변환) 자바스크립트에서는 직접적인 Boolean 타입의 값이 아님에도 특정 조건문이나 논리 연산자가 수행될 때 true와 false로 암묵적 형변환 되어 취급되는 상황이 있으며, 이에 대한 내용은 링크의 3번 항목을 참조 바랍니다.
