[JS] 모던 자바스크립트 Deep Dive - 09. 타입 변환과 단축 평가

타입 변환이란?

기존 원시 값을 사용하여 다른 타입의 새로운 원시값을 생성하는 것

• 원시 값은 변경 불가능한 값이므로 기존의 원시값을 직접 변경하는 것은 아니다.

✅ 명시적 타입 변환 (Explicit Coercion)

개발자가 의도적으로 값의 타입을 변환하는 것

• 타입 캐스팅 (Type Casting)이라고도 한다.
• 타입을 변경하겠다는 개발자의 의지가 코드에 명백히 드러난다.
• 명시적으로 타입을 변환하는 방법은 다양하다.
  • 표준 빌트인 생성자 함수 (String, Number, Boolean)를 new 연산자 없이 호출
  • 빌트인 메서드 사용
  • 암묵적 타입 변환 사용

문자열 타입으로 변환

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

// 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"

숫자 타입으로 변환

• Number 생성자 함수를 new 연산자 없이 호출하는 방법
• parseInt, parseFloat 함수를 사용하는 방법 (문자열만 숫자 타입으로 변환 가능)
• + 단항 산술 연산자를 이용하는 방법
• * 산술 연산자를 이용하는 방법

// 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

불리언 타입으로 변환

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

// 1. Boolean 생성자 함수를 new 키워드 없이 호출하는 방법
// 문자열 -> 불리언
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

// nulll -> 불리언
!!null;             // false

// 객체 -> 불리언
!!{};               // true
!![];               // true

✅ 암묵적 타입 변환 (Implicit Coercion)

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

• 타입 강제 변환 (Type Coercion)이라고도 한다.
• 기존 변수 값을 재할당하여 변경하는 것이 아니다.
  • 자바스크립트 엔진은 표현식을 에러 없이 평가하기 위해 피연산자의 값을 암묵적 타입 변환해 새로운 타입의 값을 만들어 단 한 번 사용하고 버린다. 
• 코드 상에서 개발자의 타입 변경 의지가 드러나지 않으므로 암묵적 타입 변환이 발생하는지 예측 가능해야한다.
• 암묵적 타입 변환이 발생하면 문자열, 숫자, 불리언과 같은 원시 타입 중 하나로 타입을 자동 변환한다. 

문자열 타입으로 변환

피연산자 중 문자열 타입이 아닌 값을 문자열 타입으로 변환

 

1 + '2' // -> "12" 1을 문자열로 타입변환

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

// 불리언 타입
true + ''             // "true"
false + ''            // "false" 

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

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

// 심벌 타입
(Symbol()) + ''       // TypeError: Cannot convert a Symbol value to a string

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

 

숫자 타입으로 변환

피연산자 중 숫자 타입이 아닌 값을 숫자 타입으로 변환

• 피연산자를 숫자 타입으로 변환할 수 없는 경우, 산술 연산을 수행할 수 없으므로 표현식의 결과는 NaN이 된다. 
  • 객체, 빈 배열이 아닌 배열, undefined가 이 경우에 속한다. 
• 빈 문자열(' '), 빈 배열([ ]), null, false는 0으로 변환된다.
• true는 1로 변환된다.

// 문자열 타입
+''               // 0
+'0'              // 0
+'1'              // 1
+'string'         // NaN

// 불리언 타입
+true;            // 1
+false;           // 0

// null 타입
+null             // 0

// undefined 타입
+undefined        // NaN

// 심벌 타입
+Symbol()         // TypeError: Cannot convert a Symbol value to a number

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

 

불리언 타입으로 변환

피연산자 중 불리언 타입이 아닌 값을 불리언 타입으로 변환

• 자바스크립트 엔진은 불리언 타입이 아닌 값을 Truthy 값(참으로 평가되는 값) 또는 Falsy 값 (거짓으로 평가되는 값)으로 구분한다. 
• 아래는 false로 평가되는 Falsy한 값이며 이외의 모든 값들은 true로 평가되는 Truthy한 값이다.
  • false
  • undefined
  • null
  • 0, -0
  • NaN
  • ' ' (빈 문자열)

단축 평가

표현식을 평가하는 도중에 평가 결과가 확정된 경우 나머지 평가 과정을 생략하는 것

 

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

논리 연산의 결과를 결정하는 피연산자를 타입 변환하지 않고 그대로 반환

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

 

'Cat' || 'Dog' // "Cat"

• 논리합 연산자 (||)의 경우 첫 번째 피연산자가 true이면 다음 피연산자는 평가하지 않고 결과값이 무조건 true이기 때문에 논리 연산의 결과를 결정한 첫 번째 피연산자를 그대로 반환한다.

'Cat' && 'Dog' // "Dog"

• 논리곱 연산자 (&&)는 두 번째 피연산자까지 평가해야 표현식을 평가할 수 있기 때문에 논리 연산의 결과를 결정하는 두 번째 피연산자를 그대로 반환한다. 

• 단축 평가를 사용하면 if문을 대체할 수 있다. 
  • 어떤 조건이 Truthy 값일 때 무언가를 해야한다면 논리곱(&&) 연산자 표현식으로 if문 대체 가능
  • 어떤 조건이 Falsy 값일 때 무언가를 해야한다면 논리합(||) 연산자 표현식으로 if문 대체 가능
  • 삼항 조건 연산자의 경우 if ... else 문 대체 가능
• 단축 평가는 다음과 같은 상황에서 유용하게 사용된다.
  • 객체를 가리키기를 기대하는 변수가 null 또는 undefined가 아닌지 확인하고 프로퍼티를 참조할 때
  • 함수 매개변수에 기본값을 설정할 때

옵셔널 체이닝 연산자 (Optional Chaining)

옵셔널 체이닝 연산자 ?.는 좌항의 피연산자가 null 또는 undefined인 경우 undefined를 반환하고, 그렇지 않으면 우항의 프로퍼티 참조를 이어간다

var elem = null;

var value = elem?.value; 
console.log(value); // undefined

• 옵셔널 체이닝 연산자 ?.는 좌항 피연산자가 false로 평가되는 Falsy 값 (false, undefined, null, 0, -0, NaN, ' ')이라도 null 또는 undefined가 아니면 우항의 프로퍼티 참조를 이어간다.
  • 논리 연산자 &&의 경우 좌항 피연산자가 Falsy 값이면 좌항 피연산자를 그대로 반환한다. 
  • 0이나 ' '은 객체로 평가될 때도 있다.

var str = '';
// 문자열의 길이 참조
var length = str?.length;
console.log(length); // 0

null 병합 연산자 (Nullish Coalescing)

null 병합 연산자 ??는 좌항의 피연산자가 null 또는 undefined인 경우 우항의 피연산자를 반환하고, 그렇지 않으면 좌항의 피연산자를 반환한다. 

• 변수에 기본값을 설정할 때 유용하다. 

var foo = null ?? 'default string'; 
console.log(foo); // "default string"

• null 병합 연산자 ??는 좌항 피연산자가 false로 평가되는 Falsy 값 (false, undefined, null, 0, -0, NaN, ' ')이라도 null 또는 undefined가 아니면 좌항의 피연산자를 그대로 반환한다.
  • 논리 연산자 || 의 경우 좌항 피연산자가 Falsy 값이면 우항 피연산자를 반환한다. 
  • Falsy 값인 0이나 ' '도 기본값으로서 유효하다면 예기치 않은 동작이 발생할 수 있다.