[JS Deep Dive] 9장 정리 - 타입 변환과 단축 평가에 대하여

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

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

 

원시 값은 변경 불가능한 값이므로 변경할 수 없음

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

 

암묵적 타입 변환은 기존 변수 값을 재할당하여 변경하는 것이 아님

→ 피연산자의 값을 암묵적 타입 변환해 새로운 타입의 값을 만들어 단 한 번 사용하고 버림

 

둘 중에 뭐를 더 많이 써야되는 것이 중요한 것이 아닌, 코드를 예측할 수 있어야 한다는 것이 중요

---

암묵적 타입 변환

 

문자열 타입으로 변환(+)

문자열 연결 연산자의 모든 피연산자는 코드의 문맥상 모두 문자열 타입이어야

 

자바스크립트 엔진은 문자열 연결 연산자의 피연산자 중에서 문자열 타입이 아닌 피연산자를 문자열 타입으로 암묵적 타입 변환

---

숫자 타입으로 변환( -, *, /)

산술 연산자의 모든 피연산자는 코드 문맥상 모두 숫자 타입이어야

 

산술 연산자의 피연산자 중에서 숫자 타입이 아닌 피연산자를 숫자 타입으로 암묵적 타입 변환

→ 피연산자를 숫자 타입으로 변환할 수 없는 경우는 산술 연산을 수행할 수 없으므로 표현식의 평가 결과는 NaN이 된다

 

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

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

+undefined → NaN

 

빈 문자열(’’), 빈 배열([]), null, false는 0으로, true는 1로 변환

 

객체와 빈 배열이 아닌 배열, undefined는 변환되지 않아 NaN이 됨

---

불리언 타입으로 변환

자바스크립트 엔진은 조건식의 평가 결과를 불리언 타입으로 암묵적 타입 변환

→ 불리언 타입이 아닌 값을 Truthy 값(참으로 평가되는 값) 또는 Falsy 값(거짓으로 평가되는 값)으로 구분

false, undefined, null, 0, -0, NaN , ‘’(빈 문자열) → Falsy 값

Falsy 값 외의 모든 값은 모두 true로 평가되는 Truthy 값

---

명시적 타입 변환

 

문자열 타입으로 변환

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

 

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

ex) String(1) → “1”

 

 

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

ex) (1).toString(); → “1”

 

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

1 + ‘’ → “1”

---

숫자 타입으로 변환

 

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

ex) Number(’0’) → 0

 

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

ex) parseInt(’0’) → 0

 

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

ex) +’0’ → 0

 

산술 연산자를 이용하는 방법

ex) ‘0’ * 1; → 0

---

불리언 타입으로 변환

 

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

ex) Boolean(’x’) → true

ex2) Boolean(’false’) → true

 

 

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

ex) !!’x’ → true

---

단축 평가

논리합(||) 또는 논리곱(&&) 연산자 표현식은 언제나 2개의 피연산자 중 어느 한쪽으로 평가된다

논리곱 연산자는 좌항에서 우항으로 평가가 진행된다.

→ 첫 번째 피연산자가 true일 때, 두 번째 피연산자가 위 논리곱 연산자 표현식의 평가 결과를 결정한다.

 

논리합 연산자를 쓸 때 첫 번째 연산자가 Truthy 값이므로 true로 평가되면, 그냥 그대로 첫 번째 피연산자를 반환한다.

 

단축 평가를 사용하면 if문을 대체할 수 있다.

1. 어떤 조건이 Truthy 값(참으로 평가되는 값)일 때 무언가를 해야한다면 논리곱(&&) 연산자 표현식으로 if 문을 대체할 수 있다
2. 조건이 Falsy 값(거짓으로 평가되는 값)일 때 무언가를 해야한다면 논리합(||) 연산자 표현식으로 if 문을 대체할 수 있다.

단축 평가가 유용하게 사용될 때

 

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

var elem = null;
// elem이 null이나 undefined와 같은 Falsy 값이면 elem으로 평가되고
// elem이 Truthy 값이면 elem.value로 평가

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

 

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

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

getStringLength(); // -> 0
getStringLength('hi'); // -> 2

// ES6의 매개변수의 기본값 설정
function getStringLength(str = '') {
	return str.length;
}
getStringLength(); // 0
getStringLength('hi'); // 2

 

---

옵셔널 체이닝 연산자

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

var elem = null;

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

옵셔널 체이닝 연산자 ?.는 객체를 가리키기를 기대하는 변수가 null 또는 undefined가 아닌지를 확인하고 프로퍼티를 참조할 때 유용하다.

 

옵셔널 체이닝 연산자 ?.는 좌항 피연산자가 false로 평가되는 Falsy 값(false, undefined, null, 0, -0, NaN, ‘’)이라도

null 또는 undefined가 아니면 우항의 프로퍼티 참조를 이어간다.

var str = '';

var length = str?.length;
console.log(length); // 0

---

null 병합 연산자(??)

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

→ 변수에 기본값을 설정할 때 유용

// Falsy 값인 0이나 ''도 기본값으로서 유효하다면 예기치 않은 동작이 발생할 수도
var foo = '' || 'default string';
console.log(foo); // "default string"

// 좌항의 피연산자가 Falsy 값이라도 null 또는 undefined가 아니면 좌항의 피연산자를 반환
var foo = '' ?? 'default string';
console.log(foo); // ""