타입변환의 종류

타입변환의 종류로는 2가지가 있다.
하나는 명시적 타입 변환(타입 캐스팅),
다른 하나는 암묵적 타입 변환(타입 강제 변환)이다.

암묵적 타입 변환

자바스크립트는 동적 타입언어로써 개발자의 의도와는 상관없이 자바스크립트 엔진에 의해 암묵적으로 타입이 자동 변환되기도 한다.

다시 말하면 예상치 못한 타입을 받았을 때 예상 가능한 타입으로 바꿔준다는 것이다.

이것은 자바스크립트의 가장 중요한 기능중 하나 이며 가장 피해야할 기능이기도 하다.

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

문자열 타입으로 변환

1 + '2'; => '12' string type

• 연산자는 다른 수학적 연산자들과는 다르게 2가지 기능을 가지고 있다.

1. 수학적인 덧셈
2. 문자열 합치기

두 연산자가 모두 숫자일 경우엥만 더하기 연산이 가능하고 나머지는 문자열 연결 연산이 이루어진다.

자바스크립트 엔진은 문자열 연결 연산자 표현식을 평가 하기 위해 문자열 연결 연산자의 피연산자 중에서 문자열 타입이 아닌 피연산자를 문자열 타입으로 암묵적 타입 변환한다.

NaN + '' => 'NaN'
123 + '' => '123'
false + '' => 'false'

즉 문자열이 아닌 타입과 문자열의 타입을 연산하면 결과로 문자열 타입이 나오게 된다.

숫자타입으로 변환

1 - "1" => 0
1 * '10' => 10
1 / 'one' => NaN
'1' > 0 => true

위의 예제는 모두 산술 연산자다. 산술연산자의 역할은 숫자값을 만드는 것이다.

자바스크립트는 피연산자 중에서 숫자타입이 아닌 값을 숫자타입으로 암묵적 타입변환 하여 산술 연산 한다. 하지만
숫자타입으로 변환을 하지 못하는 경우에는 NaN을 반환한다.

+ 연산자가 단항 연산자로 쓰일때

"+"연산자가 단항 연산자로 쓰일때 피연산자가 숫자타입이 아닌경우에는 숫자타입의 값으로 강제 타입변환 시킨다.

+'' => 0
+'0' => =
+'12' => 12
+'string' => NaN
+true => 1
+false => 0
+null => 0
+undefined => NaN

+{}    => NaN
+[]    => 0
+[10, 20]  => NaN
+(function(){}) => NaN

추가저긍로 빈 문자열과 빈 배열 , null, false는 0으로 true는 1로 변환된다. 객체와 빈 배열이 아닌 배열, undefined는 변환이 되지 않아 NaN이 된다는 것을 주의 하자

불리언 타입으로 변환

if 문이나 for 문 같은 제어문의 조건식은 불리언 값(true, false)으로 반환하는 표현식이다.
즉 조건식의 평가 결과를 참과 거짓으로 암묵적 타입변환 한다는 것이다.

자바스크립트 엔진은 불리언 타입이 아닌 값을 Truthy(참), 또는 Falsy(거짓)값으로 구분한다.

false로 평가되는 값들

• false
• undefined
• null
• 0, -0
• NaN
• "(빈문자열)

**Falsy 값을 제외한 값은 true로 평가되는 Truthy 값이다.**

명시적 타입 변환

문자열 타입으로 변환

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

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

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

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

숫자 타입으로 변환

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

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

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

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

불리언 타입으로 변환

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

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