9장 타입 변환과 단축 평가

9.1 타입 변환이란?

• 자바스크립트의 모든 값은 타입이 있다.

명시적 타입 변환(explicit coercion) 또는 타입 캐스팅(type casting)
: 개발자가 의도적으로 값의 타입을 변환하는 것

var x = 10;
// toString() 메서드
var str = x.toString();
console.log(typeof str, str); // string "10"

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

var x = 10;
// 문자열 연결 연산자
var str = x + '';
console.log(typeof str, str); // string "10"

• 기존 원시 값(x 변수)은 변경 불가능한 값(immutable value)이므로 변경할 수 없다.
• 타입 변환이란 기존 원시 값을 사용해 다른 타입의 원시 값을 생성하는 것이다.
• 암묵적 타입 변환은 기존 변수 값을 재할당하여 변경하는 것이 아니라 자바스크립트 엔진이 표현식을 에러 없이 평가하기 위해 피연산자의 값(10)을 암묵적 타입 변환해 새로운 타입의 값('10')을 만들어 단 한 번 사용('10' + '')하고 버린다.

---

9.2 암묵적 타입 변환

• 표현식을 평가할 때 타입이 코드의 문맥에 부합하지 않는 경우, 자바스크립트는 가급적 에러를 발생시키지 않기 위해 암묵적 타입 변환을 통해 표현식을 평가한다.

1. 문자열 타입으로 변환

예시1) 1 + '2' // "12"

• +연산자는 피연산자 중 하나 이상이 문자열이므로 문자열 연결 연산자로 동작한다.
• 문자열 값을 만들기 위해 모든 피연산자는 문맥상 문자열이여야 한다. => 1을 '1' 로 암묵적 타입 변환

예시2) `1 + 1 = ${1 + 1}` // "1 + 1 = 2"

• 템플릿 리터럴의 표현식 삽입은 표현식의 평가 결과를 문자열 타입으로 암묵적 타입 변환한다.

그 외 예시)
0 + '' // "0"
NaN + '' // "NaN"
true + '' // "true"
undefined + '' // "undefined"
[10,20] + '' // "10,20"
(function(){}) + '' // "function(){}"

2. 숫자 타입으로 변환

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

• 산술 연산자의 역할은 숫자 값을 만드는 것이므로 모든 피연산자는 코드 문맥상 모두 숫자 타입이여야 한다.
• 숫자 타입이 아닌 피연산자는 숫자 타입으로 암묵적 타입 변환하고, 변환할 수 없는 경우는 산술 연산을 수행할 수 없으므로 표현식의 평가 결과는 NaN이 된다.

'1' > 0 // true

• 비교 연산자의 역할은 불리언 값을 만드는 것이고, 피연산자의 크기를 비교하기 위해 모두 숫자 타입이여야 한다.

+'' // 0
+'1' // 1
+'string' // NaN
+true // 1
+null // 0
+undefined // NaN
+{} // NaN
+[] // 0
+[10, 20] // NaN
+(function(){}) // NaN

• +단항연산자는 피연산자가 숫자 타입의 값이 아니면 숫자 타입의 값으로 암묵적 타입 변환을 수행한다.

3. 불리언 타입으로 변환

if ('') console.log(x);

• 제어문(if문, for문) 또는 삼항 조건 연산자의 조건식은 불리언 값, 즉 논리적 참/거짓으로 평가되어야하는 표현식이므로 조건식의 평가 결과는 불리언 타입으로 암묵적 타입 변환된다.
• 자바스크립트 엔진은 불리언 타입이 아닌 값을 Truthy 값(참으로 평가되는 값) 또는 Falsy 값(거짓으로 평가되는 값)으로 구분한다.

Falsy 값: false, undefined, null, 0, -0, NaN, ''(빈 문자열)
Truthy 값: true, '0'(빈 문자열이 아닌 문자열), [ ], { } 등등

• Falsy 값 외의 모든 값은 모두 true로 평가되는 Truthy 값이다.
  !(Falsy 값) = Truthy 값

---

9.3 명시적 타입 변환

1. 문자열 타입으로 변환

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

1. String 생성자 함수를 new 연산자 없이 호출하는 방법

String(1); // "1"
String(NaN); // "NaN"
String(true); // "true"

2. Object.prototype.toString 메서드를 사용하는 방법

(1).toString(); // "1"
(Infinity).toString(); // "Infinity"
(false).toString(); // "false"

3. 문자열 연결 연산자를 이용하는 방법

1 + '' // "1"
true + '' // "true"

2. 숫자 타입으로 변환

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

1. Number 생성자 함수를 new 연산자 없이 호출하는 방법

Number('0'); // 0
Number('-1.1'); // -1.1
Number(false); // 0

2. parseInt, parseFloat 함수를 사용하는 방법(문자열만 숫자타입으로 변환 가능)

paseInt('-1'); // -1
parseFloat('10.53'); // 10.53

3. + 단항 산술 연산자를 이용하는 방법

+'-1' // -1
+true; // 1

4. * 산술 연산자를 이용하는 방법

'0' * 1; // 0
'10.53' * 1 // 10.53
false * 1; // 0

3. 불리언 타입으로 변환

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

1. Boolean 생성자 함수를 new 연산자 없이 호출하는 방법

Boolean('false'); // true
Boolean(''); // false
Boolean(0); // false
Boolean(Infinity); // true
Boolean({}); // true

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

!!'x'; // true
!!1; // true
!!NaN; // false
!!undefined; // false
!![]; // true

표준 빌트인(built-in) 생성자 함수: 객체를 생성하기 위한 함수이며 new 연산자와 함께 호출한다.
표준 빌트인 메서드 : 자바스크립트에서 기본 제공하는 빌트인 객체의 메서드

---

9.4 단축 평가

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

논리합(||) 또는 논리곱(&&) 연산자 표현식의 평가 결과는 불리언 값이 아닐 수도 있다. 언제나 2개의 피연산자 중 어느 한쪽으로 평가된다.

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

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

• 논리곱 연산자는 두 개의 피연산자가 모두 true로 평가될 때 true를 반환한다.
• 논리곱 연산자는 좌항에서 우항으로 평가가 진행된다.
• 'Cat'은 Truthy한 값이지만 두 번째 피연산자까지 평가해 보아야 위 표현식을 평가할 수 있다.
  => 논리 연산의 결과를 결정하는 두 번째 피연산자를 그대로 반환한다.

• 논리합 연산자는 두 개의 피연산자 중 하나만 true로 평가되어도 true를 반환한다.
• 첫번째 피연산자 'Cat'은 Truthy한 값이므로 true로 평가된다. 두 번째 피연산자까지 평가해 보지 않아도 위 표현식을 평가할 수 있다.
  => 논리 연산의 결과를 결정한 첫 번째 피연산자를 그대로 반환한다.

단축평가 (short-circuit evaluation) :
표현식을 평가하는 도중에 평가 결과가 확정된 경우 나머지 평가 과정을 생략하는 것

단축 평가 규칙
true || anything // true
false || anything // anything
true && anything // anything
false && anything // false

단축 평가를 사용하여 if 문 대체하기

• 어떤 조건이 Truthy 값일 때 무언가를 해야 한다면 논리곱(&&) 연산자 표현식으로 if 문을 대체할 수 있다.

var done = true;
var message = '';

if (done) message = '완료';
===
message = done && '완료'; 
// done 이 true면 message에 '완료'를 할당

• 어떤 조건이 Falsy 값일 때 무언가를 해야 한다면 논리합(||) 연산자 표현식으로 if 문을 대체할 수 있다.

var done = false;
var message = '';

if (!done) message = '미완료';
===
message = done || '미완료'; 
// done 이 false라면 message에 '미완료'를 할당

• 삼항 조건 연산자는 if ... else 문을 대체할 수 있다.

var done = true;
var message = '';

if (done) message = '완료';
else	  message = '미완료';
==
message = done ? '완료' : '미완료';

객체를 가리키기를 기대하는 변수가 null 또는 undefined가 아닌지 확인하고 프로퍼티를 참조할 때

객체: 키(key)와 값(value)로 구성된 프로퍼티(property)의 집합

var elem = null; // 객체를 가리키기를 기대하는 변수
var value = elem.value; // TypeError 발생

// 단축 평가 사용
var value = elem && elem.value; // null

• 논리 연산자 &&는 좌항 피연산자가 Falsy 값(false, undefined, null, 0 , '', NaN) 이면 좌항 피연산자를 그대로 반환한다.

함수 매개변수에 기본값을 설정할 때

• 함수를 호출할 때 인수를 전달하지 않으면 매개변수에는 undefined가 할당된다.
• 단축평가를 사용해 매개변수의 기본값을 설정하면 undefined 로 인해 발생할 수 있는 에러를 방지할 수 있다.

// 단축평가 사용
function getStringLength(str) {
	str = str || '',
    return str.length;
}
getStringLength(); // 0

// ES6 기존 방식
function getStringLength(str = '') {
    return str.length;
}
getStringLength(); // 0

• 좌항의 피연산자가 Falsy 값이면 우항의 피연산자를 반환한다.

2. 옵셔널 체이닝 (optional chaining) 연산자

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

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

• 논리 연산자 &&를 사용한 단축 평가를 대체할 수 있다.
  • 차이점: 옵셔널 체이닝 연산자(?.) 는 좌항 피연산자가 Falsy 값이라도 null 또는 undefined가 아니면 우항의 프로퍼티 참조를 이어간다.

var string = '';
var length = str && str.length; // ''
var length2 = str?.length; // 0

3. null 병합 (nullish coalescing) 연산자

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

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

• 변수에 기본값을 설정할 때 유용하다.
• 논리 연산자 ||를 사용한 단축 평가를 대체할 수 있다.
  • 차이점: null 병합 연산자(??) 는 좌항 피연산자가 Falsy 값이라도 null 또는 undefined가 아니면 좌항의 피연산자를 그대로 반환한다.
  • Falsy 값인 0 이나 '' 도 기본값으로서 유효한 경우에 유용하다.

var foo = '' || 'default string';  // "default string"
var foo2 = '' ?? 'default string'; // ""