[js 딥다이브] 09장 타입변환과 단축평가

9.1 타입 변환이란?

• 개발자가 의도적으로 값의 타입을 변환하는 것을 명시적 타입변환 또는 타입 캐스팅이라고 함.
• 개발자의 의도와 상관없이 표현식을 평가하는 도중에 JS 엔진에 의해 암묵적으로 타입이 자동으로 변환되는 경우를 암묵적 타입 변환 또는 타입 강제 변환이라고 함.

9.2 암묵적 타입 변환

• JS엔진은 가급적 에러를 발생시키지 않도록 암묵적 타입 변환을 통해 표현식을 평가함
• 암묵적 타입 변환이 발생하면 문자열, 숫자, 불리언과 같은 원시 타입 중 하나로 타입을 자동변환.

9.2.1 문자열 타입으로 변환

• + 연산자는 피연산자 중 하나 이상이 문자열일때 문자열 연결 연산자로 동작함. 문자열 연결 연산자는 문자열 값을 만드는 것이기 때문에 문자열이 아닌 것을 문자열로 암묵적 타입변환함.

'10' + 2 // '102'

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

`1 + 1 = ${ 1 + 1 }`; // 1 + 1 = 2

9.2.2 숫자 타입으로 변환

• JS엔진은 산술 연산자 표현식을 평가하기 위해 피연산자 중에서 숫자 타입이 아닌 피연산자를 숫자 타입으로 암묵적 타입 변환한다. 이때, 피연산자를 숫자 타입으로 변환할 수 없는 경우는 산술 연산이 불가능하므로 평가결과는 NaN이 된다.
• 비교 연산자의 역할은 불리언 값을 만드는 것. >나 <등의 비교 연산자는 피 연산자의 크기를 비교하므로 모든 피연산자는 모두 숫자 타입이여야한다. JS엔진은 비교 연산자 표현식을 평가하기 위해 피연산자 중 숫자 타입이 아닌 피연산자를 숫자타입으로 암묵적 타입 변환한다.

9.2.3 불리언 타입으로 변환

• if, for문 같은 제어문 또는 삼항 조건 연산자의 조건식은 불리언 값으로 평가되어야 하는 표현식임.
• JS엔진은 조건식의 평가 결과를 불리언 타입으로 암묵적 타입 변환함.

if ('') console.log('1');
if (true) console.log('2');
if (0) console.log('3');
if ('str') console.log('4');
if (null) console.log('5');
// 2 4

• 이때 JS 엔진은 불리언 타입이 아닌 값을 Truthy 값 또는 Falsy 값으로 구분함.
• 아래는 false로 평가되는 Falsy 값들임
  • false, undefined, null, 0, -0, NaN, ‘’(빈문자열)
  • 사실 Falsy값만 알면 이 장에서 알껀 다 안거 같음.

// 아래의 조건문은 모두 코드 블록을 실행한다.
if (!false) console.log(false + ' is falsy value');
if (!undefined) console.log(undefined + ' is falsy value');
if (!null) console.log(null + ' is falsy value');
if (!0) console.log(0 + ' is falsy value');
if (!NaN) console.log(NaN + ' is falsy value');
if (!'') console.log('' + ' is falsy value');

• Falsy 값 이외의 모든 값은 true로 평가되는 Truthy 값이다.

9.3 명시적 타입변환

• 표준 빌트인 생성자 함수(String, Number, Boolean)를 new 연산자 없이 호출하는 방법, 빌트인 메서드를 사용하는 방법과 암묵적 타입 변환을 이용하는 방법이 있음.

9.3.1 문자열 타입으로 변환

문자열 타입이 아닌 값을 문자열 타입으로 변환하는 방법은 다음과 같음

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

9.3.2 숫자타입으로 변환

숫자 타입이 아닌 값을 숫자 타입으로 변환하는 방법은 다음과 같음

1. Number 생성자 함수를 new 연산자 없이 호출하는 방법
2. parseInt, parseFloat 함수를 사용하는 방법(문자열만 가능)
3. + 단항 산술 연산자를 이용하는 방법
4. * 단항 산술 연산자를 이용하는 방법

9.3.3 불리언 타입으로 변환

불리언 타입이 아닌 값을 불리언 타입으로 변환하는 방법은 다음과 같음

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

9.4 단축평가

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

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

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

• 논리곱(&&) 연산자는 두 개의 피연산자가 모두 true로 평가될 때 true를 반환한다.

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

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

// 논리합(||) 연산자
'Cat' || 'Dog' // "Cat"
false || 'Dog' // "Dog"
'Cat' || false // "Cat"
// 논리곱(&&) 연산자
'Cat' && 'Dog' // "Dog"
false && 'Dog' // false
'Cat' && false // false

• if문 대체

var done = true;
var message = '';
// 주어진 조건이 true 일때
message = done && '완료';
console.log(message); // 완료

var done = false;
var message = '';
// 주어진 조건이 false일 때
message = done || '미완료';
console.log(message); // 미완료

• if … else 문 대체는 삼항연산자로

var done = true;
var message = '';
// if...else 문은 삼항 조건 연산자로 대체 가능하다.
message = done ? '완료' : '미완료';
console.log(message); // 완료

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

var elem = null;
var value = elem && elem.value; // null

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

// 단축 평가를 사용한 매개변수의 기본값 설정
function getStringLength(str) {
 str = str || '';
 return str.length;
}
getStringLength(); // 0
getStringLength('hi'); // 2

9.4.2 옵셔널 체이닝 연산자

• (ES11 / node v12 이상 -> SSR )
• 옵셔널 체이닝 연산자 ?.는 좌항의 피연산자가 null 또는 undefined인 경우 undefined를 반환하고, 그렇지 않으면 우항의 프로퍼티 참조를 이어감.

var elem = null;
var value = elem && elem.value; // null
value = elem?.value; // undefined

9.4.3 null 병합 연산자

• null 병합 연산자 ??는 좌항의 피연산자가 null 또는 undefined인 경우 우항의 피연산자, 아닌 경우 좌항의 피연산자를 반환함.
• 기본값 줄때 유용함.

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

소감

• Falsy 값을 잘 외워두자.
• 상황에 맞게 단축평가나 옵셔널 체이닝, null 병합 연산자를 적절하게 쓰자.