타입 변환

개발자가 의도적으로 값의 타입을 변환 하는것을 명시적 타입 변환 또는 타입 캐스팅 이라 한다.

let x = 10;

// 명시적 타입변환
// 숫자를 문자열로 타입 캐스팅 한다.
let str = x.toString();
console.log(typeof x,x) // number 10

개발자의 의도와는 상관없이 표현식을 평가하는 도중에 자바스크립트 엔진에 의해 암묵적으로 타입이 자동변환 되는것을 
암묵적 타입변환 또는 타입 강제 변환 이라 한다.

let x = 10;

// 암묵적 타입변환
// 문자열 연결 연산자는 숫자 타입 x의 값을 바탕으로 새로운 문자열을 생성한다.
let str = x + '';
console.log(typeof str,str); // string 10

//x 변수의 값이 변경된 것은 아니다.
console.log(typeof x,x); // number 10

📍 명시적 타입 변환이나 암묵적 타입 변환이 기존 원시값을 직접 변경하는 것은 아니다. 
원시값은 변경 불가능한 값이므로 변경할수 없다. 
타입 변환이란 기존 원시값을 사용해 다른 타입의 새로운 원시 값을 생성하는 것이다.

📍 암묵적 타입 변환은 기존 변수 값을 재할당하여 변경하는것이 아니다. 
자바스크립트 엔진은 표현식을 에러 없이 평가하기 위해 피연산자의 값을 암묵적 타입 변환해 새로운 타입의 값을 만들어 단 한 번 사용하고 버린다.

📍 자신이 작성한 코드에서 암묵적 타입변환이 발생하는지, 발생한다면 어떤 타입의 어떤값으로 변환 되는지, 
그리고 타입 변환된 값으로 표현식이 어떻게 평가 될것인지 예측 가능해야 한다.

만약 타입 변환 결과를 예측하지 못하거나 예측이 결과와 일치하지 않는다면 오류를 생산할 가능성이 높아진다.

 

명시적 타입 변환

개발자의 의도에 따라 명시적으로 타입을 변경하는 방법은 다양하다.

문자열 타입 변환

문자열 타입이 아닌 값을 문자열 타입으로 변환하는 방법

1. String 생성자 함수를 new 연산자 없이 호출하는 방법
2. Object.prototype.toString 메서드를 사용하는 방법
3. 문자열 연결 연산자를 이용하는 방법

// 1. String 생성자 함수를 new 연산자 없이 호출하는 방법
// 숫자 타입 -> 문자열 타입
String(1); // "1"
String(NaN); // "NaN"
String(Infinity) // "Infinity"
// 불리언 타입 -> 문자열 타입
String(true); // "true"
String(false); // "false"

// 2. Object.prototype.toString 메서드를 사용하는 방법
// 숫자 타입 -> 문자열 타입
(1).toString(); // "1"
(NaN).toString(); // "NaN"
(Infinity).toString(); // "infinity"
// 불리언 타입 -> 문자열 타입
(true).toString(); // "true"
(false).toString(); // "false"

// 3. 문자열 연결 연산자를 이용하는 방법
// 숫자 타입 -> 문자열 타입
1 + ''; // "1"
NaN + ''; // "NaN"
Infinity + ''; // "infinity"
// 불리언 타입 -> 문자열 타입
true + ''; // "true"
false + ''; // "false"

 

숫자 타입으로 변환

숫자 타입이 아닌 값을 숫자 타입으로 변환하는 방법

1. Number 생성자 함수를 new 연산자 없이 호출하는 방법
2. parseInt, parseFloat 함수를 사용하는 방법(문자열만 숫자 타입으로 가능)
3. ➕ 단항 산술 연산자를 이용하는 방법
4. ✖️ 산술 연산자를 이용하는 방법

// 1. Number 생성자 함수를 new 연산자 없이 호출하는 방법
// 문자열 타입 -> 숫자 타입
Number('0'); // 0
Number('-1'); // -1
Number('10.53'); // 10.53
// 불리언 타입 -> 숫자 타입
Number(true); // 1
Number(false); // 0

// 2. parseInt, parseFloat 함수를 사용하는 방법(문자열만 숫자 타입으로 가능)
// 문자열 타입 -> 숫자 타입
parseInt('0'); // 0
parseInt('-1'); // -1
parseFloat('10.53'); // 10.53

// 3. + 단항 산술 연산자를 이용하는 방법
// 문자열 타입 -> 숫자 타입
+'0'; //0
+'-1'; // -1
+'10.53'; // 10.53
// 불리언 타입 -> 숫자 타입
+true; // 1
+false; // 0

// 4. * 산술 연산자를 이용하는 방법
// 문자열 타입 -> 숫자 타입
'0' * 1; // 0
'-1' * 1; // -1
'10.53' * 1; // 10.53
// 불리언 타입 -> 숫자 타입
true * 1; // 1
false * 1; // 0

 

불리언 타입으로 변환

불리언 타입이 아닌 값을 불리언 타입으로 변환하는 방법

1. Boolean 생성자 함수를 new 연산자 없이 호출하는 방법
2. ! 부정 논리 연산자를 두 번 사용하는 방법

// 1. Boolean 생성자 함수를 new 연산자 없이 호출하는 방법
// 문자열 타입 -> 불리언 타입
Boolean('x'); // true
Boolean(''); // false
Boolean('false') // true
// 숫자 타입 -> 불리언 타입
Boolean(0); // false
Boolean(1); // true
Boolean(NaN); // false
Boolean(Infinity); // true
// null, undefined, 객체 타입 -> 불리언 타입
Boolean(null); // false
Boolean(undefined); // false
Boolean({}); // true
Boolean([]); // true

// 2. ! 부정 논리 연산자를 두 번 사용하는 방법
// 문자열 타입 -> 불리언 타입
!! 'x'; // true
!!''; // false
!!'false'; // true
// 숫자타입 -> 불리언 타입
!!0; // false
!!1; // true
!!NaN; // false
!!Infinity; // true
// null, undefined, 객체 타입 -> 불리언 타입
!!null; // false
!!undefined; // false
!!{}; // true
!![]; // true

 

암묵적 타입변환

암묵적 타입 변환이 발생하면 문자열, 숫자, 불리언과 같은 원시 타입 중 하나로 타입을 자동 변환한다.

 

문자열 타입으로 변환

1 + '2' = "12"
// 	템플릿 리터럴 표현식
`1 + 1 = ${1 + 1}` // "1 + 1 = 2"

 

숫자열 타입으로 변환

1 - '1' // 0
1 * '10' // 10
1 / 'one' // NaN

'1' > 0 // true

 

불리언 타입으로 변환
자바스크립트 엔진은 불리언 타입이 아닌 값을 Truthy(참으로 평가 되는 값) 또는 Falsy(거짓으로 평가되는 값)으로 구분한다.
즉 제어문의 조건식과 같이 불리언 값으로 평가되어야 할 문맥에서 Truthy값은 true로, Falsy값은 false로 암묵적 타입 변환된다.

 

false로 평가되는 Falsy값
=     false
=     undefined
=     null
=     0. -0
=     NaN
=     ''(빈 문자열)