9장. 타입 변환과 단축 평가

9.1 타입 변환이란?

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

• 타입 변환이 기존 원시 값을 직접 변경하는 것은 아니다.
• 원시 값은 변경 불가능한 값(immutable value)이므로 변경할 수 없다.

📌 명시적 타입 변환(타입 캐스팅)

: 개발자가 의도적으로 값의 타입을 변환하는 것.
ex. x.toString()

📌 암묵적 타입 변환(타입 강제 변환)

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

명시적 타입 변환은 타입을 변경하겠다는 개발자의 의지가 코드에 명백히 드러나는 반면, 암묵적 타입 변환은 개발자의 의지가 코드에 명백히 나타나지 않는다. 개발자의 의지와 관계없이 암묵적 타입 변환이 일어나는 경우, 오류를 생산할 가능성이 높아질 수 있다.
그렇다고 암묵적 타입 변환이 발생하지 않도록 코드를 작성하는 것이 무조건 옳은 것은 아니다. 때로는 명시적 타입 변환보다 암묵적 타입 변환이 가독성 측면에서 더 좋을 수도 있기 때문이다.

⭐️ 중요한 것은 "코드를 예측할 수 있어야 한다." 는 것이므로, 타입 변환이 어떻게 동작하는지 정확히 이해하고 사용해야 한다.

9.2 암묵적 타입 변환

9.2.1 문자열 타입으로 변환

+ 연산자는 문자열 연결 연산자로 동작한다.

따라서 문자열 연결 연산자의 피연산자 중에서 문자열 타입이 아닌 피연산자를 문자열 타입으로 암묵적 타입 변환한다.

1 + '2' // '12'
0 + '' // '0'

9.2.2 숫자 타입으로 변환

1. 산술 연산자
   산술 연산자는 피연산자 중에서 숫자 타입이 아닌 피연산자를 숫자 타입으로 암묵적 타입 변환한다.
   이때, 피연산자를 숫자 타입으로 변환할 수 없는 경우는 NaN이 된다.
2. 비교 연산자
   비교 연산자의 역할은 불리언 값을 만드는 것이기 때문에 피연산자 중에서 숫자 타입이 아닌 피연산자를 숫자 타입으로 암묵적 타입 변환한다.
3. + 단항 연산자
   피연산자가 숫자 타입이 아니면 숫자 타입으로 암묵적 타입 변환한다.

// 산술 연산자
1 - '1' 	// 0
1 * '10' 	// 10

// 비교 연산자
'1' > 0 	// true

// + 단항 연산자
+'' 		// 0
+true 		// 1
+'abc'		// NaN 

9.2.3 불리언 타입으로 변환

제어문이나 삼항 조건 연산자의 조건식은 불리언 값으로 평가되어야 하는 표현식이다. 자바스크립트 엔진은 조건식의 평가 결과를 불리언 타입으로 암묵적 타입 변환한다.

if ('') 	console.log('1') // 실행x
if (0) 	    console.log('2') // 실행x
if ('str')  console.log('3') // 실행o

false, undefined, null, 0, -0, NaN, '' 은 false로 평가된다.

9.3 명시적 타입 변환

명시적 타입 변환을 수행하는 방법

1. 표준 빌트인 생성자 함수 이용
2. 빌트인 메서드 이용
3. 암묵적 타입 변환 이용
   
   

9.3.1 문자열 타입으로 변환

1. String()
2. Object.prototype.toString()
3. 문자 연결 연산자 +

// 1. String()
String(123) // "123"

// 2. Object.prototype.toString()
(123).toString() // "123"

// 3. 문자 연결 연산자
123 + '' // "123"

9.3.2 숫자 타입으로 변환

1. Number()
2. parseInt(), parseFloat()
3. + 단항 산술 연산자
4. * 산술 연산자

// 1. Number()
Number('123') // 123

// 2. `parseInt()`, `parseFloat()`	
parseInt('123') // 123

// 3. `+` 단항 산술 연산자
+'123' // 123

// 4. `*` 산술 연산자
'123' * 1 // 123

9.3.3 불리언 타입으로 변환

1. Boolean()
2. ! 부정 논리 연산자를 두 번 사용

// 1. Boolean()
Boolean('123') // true

// 2. `!` 부정 논리 연산자를 두 번 사용
!!'123' // true

9.4 단축 평가

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

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

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

• 논리곱 연산자
  : 두 개의 피연산자가 모두 true로 평가될 때 true를 반환한다. 따라서 논리 연산의 결과를 결정하는 두 번째 피연산자, 'Dog'를 그대로 반환한다.
• 논리합 연산자
  : 두 개의 피연산자 중 하나만 true로 평가되어도 true를 반환한다. 따라서 논리 연산의 결과를 결정한 첫 번째 피연산자, 'Cat'을 그대로 반환한다.

👉🏻 논리합(||) 연산자와 논리곱(&&) 연산자는 논리 연산의 결과를 결정하는 피연산자를 타입 변환하지 않고 그대로 반환한다.

단축 평가

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

단축 평가는 다음 규칙을 따른다.

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

단축 평가의 유용한 패턴

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

객체가 가리키기를 기대하는 변수의 값이 null 이나 undefined인 경우 객체의 프로퍼티를 참조하면 타입 에러가 발생한다. 이때 단축 평가를 사용하면 에러를 발생시키지 않는다.

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

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

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

function getStringLength(str){
	str = str || '';
    return str.length;
}

getStringLength(); // 0

9.4.2 옵셔널 체이닝 연산자

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

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

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

• 옵셔널 체이닝 연산자 ?. 가 도입되기 이전에는 논리 연산자 &&을 사용한 단축 평가를 통해 변수가 null 또는 undefined인지 확인했다.
• 하지만 0이나 ''이 객체로 평가될 때를 고려하지 못한다.

var str = '';
var length = str && str.length; 
console.log(length) // '' -> 문자열 길이를 참조하지 못한다.

• 옵셔널 체이닝 연산자 ?. 는 false로 평가되는 값이라도 null 또는 undefined가 아니면 우항의 프로퍼티 참조를 이어간다.

var str = '';
var length = str?.length; 
console.log(length) // 0 -> 문자열 길이를 참조한다.

9.4.3 null 병합 연산자

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

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

• null 병합 연산자 ?? 가 도입되기 이전에는 논리 연산자 ||을 사용한 단축 평가를 통해 변수에 기본값을 설정했다.
• 만약 Falsy 값인 0이나 ''도 기본값으로서 유효하다면 예기치 않은 동작이 발생할 수 있다.

var foo = '' || 'string';
console.log(foo) // 'string'

• null 병합 연산자 ?? 는 좌항의 피연산자가 false로 평가되는 값이라고 null 또는 undefined가 아니면 좌항의 피연산자를 그대로 반환한다.

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