[자바스크립트 Deep Dive] 9. 타입 변환과 단축 평가

9.1 타입 변환이란?

• 명시적 타입 변환(explicit coercion): 개발자가 의도적으로 값의 타입을 변환하는 것

const num = 10;
const str = (10).toString();
console.log(typeof num, typeof str); // number string

• 암묵적 타입 변환(implicit coercion/type coercion): 코드 문맥에 부합하도록 JS 엔진이 값의 타입을 자동 변환하는 것

const num = 10;
const str = 10 + "";
console.log(typeof num, typeof str); // number string

9.2 암묵적 타입 변환

9.2.1 문자열 타입으로 변환

• 문자열 연결 연산자(+)의 문자열 타입이 아닌 피연산자를 문자열 타입으로 변환함

• 템플릿 리터럴 내의 표현식을 문자열 타입으로 변환함

9.2.2 숫자 타입으로 변환

• 산술/비교 연산자의 숫자 타입이 아닌 피연산자를 숫자 타입으로 변환함
  • 산술 연산자의 피연산자를 숫자 타입으로 변환할 수 없는 경우라면 결과값은 NaN
    • undefined는 숫자 타입으로 변환되지 않음
  • 비교 연산자의 경우는 결과값이 false

console.log(1 - "1"); // 0
console.log("10" * 1); // 10
console.log(1 / "one"); // NaN
console.log(1 < "2"); // true
console.log(1 < "two"); // false

9.2.3 불리언 타입으로 변환

• 조건식의 평가 결과를 불리언 타입으로 변환함
• JS 엔진은 불리언 타입이 아닌 값을 Truthy 값/Falsy 값으로 구분하고, 암묵적 타입 변환 시 Truthy 값은 True로, Falsy 값은 false로 변환됨

Falsy 값

false, undefined, null, 0, NaN, ''

if ("") console.log(1); // 실행 X
if ("str") console.log(2); // 2
if (!NaN) console.log(3); // 3

9.3 명시적 타입 변환

9.3.1 문자열 타입으로 변환

1. new 연산자 없이 String 생성자 함수 사용
2. Object.prototype.toString 메소드 사용
3. 암묵적 타입 변환 방법 사용

console.log(String(Infinity)); // 'Infinity'
console.log(NaN.toString()); // 'NaN'

9.3.2 숫자 타입으로 변환

1. new 연산자 없이 Number 생성자 함수 사용
2. 문자열에 대해 parseInt, parseFloat 함수 사용
3. 암묵적 타입 변환 방법 사용

console.log(Number(true)); // 1
console.log(parseFloat("1.2")); // 1.2

9.3.3 불리언 타입으로 변환

1. new 연산자 없이 Boolean 생성자 함수 사용
2. 부정 논리 연산자 ! 두 번 사용

console.log(Boolean([])); // true
console.log(!!Infinity); // true

9.4 단축 평가

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

단축 평가: 표현식을 평가하는 도중에 평가 결과가 확정되면 나머지 평가 과정을 생략하는 것

• 논리합(||)/논리곱(&&) 연산자는 논리 연산의 결과를 결정한 피연산자를 타입 변환하지 않고 반환함

console.log(false || "Dog"); // 'Dog'
console.log("Cat" && false); // false

활용

• 어떤 조건이 Truthy할 때 무언가를 해야 한다면 &&로 if문을 대체할 수 있음

const done = true;
let message;

if (done) message = "완료";
console.log(message); // 완료

message = done && "done";
console.log(message); // done

• 어떤 조건이 Falsy할 때 무언가를 해야 한다면 ||로 if문을 대체할 수 있음

const done = false;
let message;

if (!done) message = "미완료";
console.log(message); // 미완료

message = done || "not done";
console.log(message); // not done

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

const obj = null;
const obj2 = { value: 1 };

console.log(obj && obj.value); // null
console.log(obj2 && obj2.value); // 1

9.4.2 옵셔널 체이닝 연산자

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

const obj = null;
const obj2 = { value: 1 };
const str = "";

console.log(obj?.value); // null
console.log(obj2?.value); // 1
console.log(str?.length); // 0

9.4.3 null 병합 연산자

• ??: 좌항의 피연산자가 null 또는 undefined면 우항의 피연산자를 반환하고, 그렇지 않으면 좌항의 피연산자를 반환함
  • 변수에 기본값을 설정할 때 유용함

let value = null ?? "default";
console.log(value); // 'default'

value = "value" ?? "default";
console.log(value); // 'value'

value = 0 ?? "default";
console.log(value); // 0