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

타입 변환과 단축 평가

타입 변환이란?

• 명시적 타입 변환(타입 캐스팅) : 개발자가 의도적으로 값의 타입을 변환하는 것
• 암묵적 타입 변환(타입 강제 변환) : 개발자의 의도와 상관없이 표현식을 평가하는 도중에 자바스트립트 엔진에 의해 암묵적으로 타입이 변환되는 것
• 타입 변환이란 기존 원시 값을 사용해 다른 타입의 새로운 원시 값을 생성하는 것이다. 즉, 원시 값은 변경 불가능한 값이다.
• 즉, 암묵적 타입 변환은 기존 변수 값을 재할당하여 변경하는 것이 아니다. 자바스크립트 엔진은 표현식을 에러 없이 평가하기 위해 피연산자의 값을 암묵적 타입 변환해 새로운 타입의 값을 만들어 단 한 번 사용하고 버린다.

10.toString() <<<<<< 10 + ''

// 가독성 측면에서 때로는 암묵적 타입변환이 더 좋기 때문에 사용한다. 
// 중요한 것은 코드를 예측할 수 있어야 한다는 것

문자열 타입으로 변환

• 아래 예제의 + 연산자는 피연산자 중 하나 이상이 문자열이므로 문자열 연결 연산자로 동작한다. 문자열 연결 연산자의 역할은 문자열 값을 만드는 것이다.
• 따라서 문자열 연결 연산자의 모든 피연산자는 코드의 문맥상! 모두 문자열 타입이어야 한다.
• 문자열 타입으로 변환하기 위해서는 toString() 대신 +''을 사용하자!

1 + '2' // '12'

// 숫자 타입
0 + '' // '0'
NaN + '' // 'NaN'

// 불리언 타입
true + '' // 'true' 

숫자 타입으로 변환

• 산술 연산자의 역할은 숫자 값을 만드는 것이다. 따라서 모든 피연산자는 문맥상 모두 숫자 타입이어야 한다.
• 숫자 타입으로 변환할 수 없는 경우는 표현식의 평가 결과는 NaN이 된다.

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

문자열을 숫자로 만드는 법

+'' // 0
+'0' // 0
+'1' // 1
+ 'string' // NaN

+true // 1
+false // 0

Falsy 값

false
undefined
null
0, -0
NaN
""(빈 문자열)

명시적 타입 변환

문자열 타입으로 변환

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

String(1) // "1"
String(NaN)  // "NaN"

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

(1).toString(); // "1"
(NaN).toString(); // "NaN

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

   1 + ''; // "1"
   NaN + ''; // "NaN"

#### 숫자 타입으로 변환
1. Number 생성자 함수를 new 연산자 없이 호출하는 방법
```js
Number('0') // 0
Number('-1') // -1

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

parseInt('0') // 0
parseInt('-1') // -1

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

+'0' // 0
+'-1' // -1

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

'0' * 1 // 0
'-1' * 1 // -1

불리언 타입으로 변환

Boolean('x'); // true
!!'x'; // true
!! 'false' // true

단축 평가

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

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

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

let done = true;
let message = '';

if (done) messgae = '완료';

message = done && '완료';
console.log(message); // 완료;

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

let elem = null;
let value = elem.value; // Type Error;

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

옵셔널 체이닝 연산자

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

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

null 병합 연산자

null 병합 연산자 ??는 좌항의 피연산자가 null 또는 undeifned인 경우 우항의 피연산자를 반환하고, 그렇지 않으면 좌항의 피연산자를 반환한다. null 병합 연산자 ??는 변수에 기본값을 설정할 때 유용하다.

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