모던 자바스크립트 Deep Dive_타입변환

09_타입 변환과 단축 평가

9.1 타입 변환 ?

자바스크립트의 모든 값은 타입을 가지는데,

• 개발자의 의도에 따라 값의 타입을 변환하는 것을
  -> 명시적 타입 변환 또는 타입 캐스팅 이라고 한다.
• 개발자의 의도와는 상관없이 표현식을 평가하는 도중에 자바스크립트 엔진에 의해 암묵적으롤 타입이 자동 변환되는 것을
  -> 암묵적 타입 변환 또는 타입 강제 변환 이라고 한다.

자바스크립트는 가급적 에러를 발생시키지 않도록 암묵적으로 타입 변환을 통해 표현식을 평가

그렇다고 명시적 타입 변환이나 암묵적 타입 변환이나 기존 원시값을 직접 변경하는 것은 아니다.
-> 원시 값은 변경 불가능한 값 이다.

 

즉, 타입변환이란 기존 원시 값을 사용해 다른 타입의 새로운 값을 생성 하는 것

---

 

9.2 암묵적 타입 변환

자바스크립트 엔진이 표현식을 평가할 때, 개발자의 의도와 상관없이 코드의 문맥을 고려해 암묵적으로 데이터 타입을 강제 변환 하는 것

 

9.2.1 문자열 타입으로 변환

• + 또는 템플릿 리터럴
• 템플릿 리터럴은 표현식의 평가 결과를 문자열 타입으로 암묵적 변환
• 문자열 연결 연산자는 코드의 문맥상 모두 문자열 타입 이어야 한다.

자바스크립트 엔진은 문자열 연결 연산자를 만나면, 문자열 타입이 아닌 값을 문자열 타입으로 암묵적 타입 변환하여 수행

// 숫자 타입
0 + ''              // "0"
  -0 + ''             // "0"
1+ ''               // "1"
  -1 + ''             // "-1"
NaN + ''            // "NaN"
Infinity + ''       // "Infinity"
  -Infinity + ''      // "-Infinity"

// boolean 타입
true + ''           // "true"
false + ''          // "false"

// null 타입
null + ''           // "null"

// undefined 타입
undefined + ''      // "undefined"

// 심벌 타입
(Symbol()) + ''     // "TypeError"

// 객체 타입
({}) + ''           // "[object Object]"
Math + ''           // "[object Math]"
[] + ''             // ""
[10, 20] + ''       // "10, 20"
(function(){}) + '' // "function()"
Array + ''          // "function Array() {[native code]}"

 

9.2.2 숫자 타입으로 변환

• +, -, / 는 모두 산술 연산자
• 산술 연산자의 모든 피연산자는 코드 문맥상 모두 숫자 타입 이어야 한다.
• 자바스크립트 엔진은 + 단항 연산자를 만나면
  -> 피연산자가 숫자 타입의 값이 아니면 숫자 타입의 값으로 암묵적 타입 변환을 수행

자바스크립트 엔진은 산술 연산자를 만나면, 숫자 타입이 아닌 값을 숫자 타입으로 암묵적 타입 변환하여 동작
이 때, 숫자 타입으로 변환할 수 없는 경우는 산술 연산을 수행할 수 없으므로 표현식의 결과는 NaN이 된다.

// 숫자 타입
+''               // 0
+'0'              // 0
+'1'              // 1 
+'string'         //  NaN

// boolean 타입
+true             //  1
+false            //  0

// null 타입
+null             //  0

// undefined 타입
+undefined        //  NaN

// 심벌 타입
+Symbol()         //  TypeError

// 객체 타입
+{}               //  NaN
+[]               //  0
+[10, 20]         //  NaN
+(function(){})   //  NaN

 

비교 연산자

'1' > 0 // true

 

비교 연산자는 피연산자의 크기를 비교하므로, 코드의 문맥상 모두 숫자 타입 이어야 한다.

 

9.2.3 boolean 타입으로 변환

• if 문과 for 문과 같은 제어문 또는 삼항 조건 연산자의 조건식은
  -> 논리적 참 / 거짓 으로 평가되어야 하는 표현식 으로
  -> 조건식의 평과 결과를 불리언 타입으로 암묵적 타입 변환을 한다.
• 자바스크립트 엔진은 불리언 타입이 아닌 값을
  -> Truthy 값 또는 Falsy 값으로 구분해 각각 true와 false로 암묵적 타입 변환 한다.
  -> Truthy 값 또는 Falsy 값 앞에 느낌표(!)를 붙어주면 각각 true와 false로 전달된다.
• false로 평가되는 Falsy 값
  -> false
  -> undefined
  -> null
  -> 0, -0
  -> NaN
  -> ‘’(빈 문자열)

---

9.3 명시적 타입 변환

9.3.1 문자열 타입으로 변환

1. String() 생성자 함수 사용

// 숫자 타입 => 문자열 타입
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"

 

9.3.2 숫자 타입으로 변환

1. Number() 생성자 함수를 사용

// 문자열 타입 ➔ 숫자 타입
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

 

9.3.3 boolean 타입으로 변환

1. Boolean() 사용

// 문자열 타입 ➔ 불리언 타입
Boolean('x');       // true
Boolean('');        // false
Boolean('false');   // true

// 숫자 타입 ➔ 불리언 타입
Boolean(0);         // false
Boolean(1);         // true
Boolean(NaN);       // false
Boolean(Infinity);  // true

// null 타입 ➔ 불리언 타입
Boolean(null);      // false

// undefined 타입 ➔ 불리언 타입
Boolean(undefined); // false

// 객체 타입 ➔ 불리언 타입
Boolean({});        // true
Boolean([]);        // true

 

2. ! 부정 논리 연산자를 두 번 사용하는 방법

// 문자열 타입 ➔ 불리언 타입
!!'x';       // true
!!'';        // false
!!'false';   // true

// 숫자 타입 ➔ 불리언 타입
!!0;         // false
!!1;         // true
!!NaN;       // false
!!Infinity;  // true

// null 타입 ➔ 불리언 타입
!!null;      // false

// undefined 타입 ➔ 불리언 타입
!!undefined; // false

// 객체 타입 ➔ 불리언 타입
!!{};        // true
!![];        // true

---

 

9.4 단축 평가

타입 변환을 하지 않고 그대로 반환 하는데 이를 단축 평가 라고 한다.

• 단축 평가는 표현식을 평가하는 도중에 평가결과가 확정된 경우
  -> 나머지 결과를 생략
  -> 단축평가를 사용하면 if문 대체
  -> 삼항 조건 연산자는 if-else 문을 대체

단축 평가 표현식	평과 결과
true ¦¦ anything	true
false ¦¦ anything	anything
true && anything	true
false && anything	false

 

9.4.1 논리 연산자를 사용한 단축 평가

논리합|| 또는 논리곱&&

• 표현식의 평가 결과는 불리언 값이 아닐 수도 있다
• 논리합|| 또는 논리곱&&. 연산자 표현식은 언제나 2개의 피연산자 중 어느 한쪽으로 평가된다
• 논리곱&& 연산자 는 두 개의 피연산자가 모두 true로 평가될 때 true 를 반환.
  -> 좌항에서 우항으로 평가가 진행.
• 논리합|| 연산자는
  -> 두 개의 피연산자 중 하나만 true로 평가되어도 true 를 반환.

'cat' || 'dog'   // cat
false || 'dog'   // dog
'cat' || false   // cat

'cat' && 'dog'   // dog
false && 'dog'   // false
'cat' && false   // false