딥다이브 09, 타입 변환과 단축 변화(+ 옵셔널체이닝, null 병합 연산자)

타입 변환?

암묵적 타입 변환

• 표현식을 평가하면서 엔진에 의해 일어나는 변환
• 타입 강제 변환이라고도 한다

명시적 타입 변환

• 개발자의 의도에 의해 일어나는 변환
• 타입 캐스팅이라고도 한다

1. 암묵적 타입 변환이 일어날 때 표현식이 어떻게 평가될 것인지 예측하지 못한다면 오류가 발생할 가능성이 높아진다. 2. 암묵적 타입 변환을 잘 이용하면 가독성을 높일 수도 있다

암묵적 타입 변환 예시

1. string

 1 + '2' // "12"
`i'm ${20+1}` // "i'm 21"

2. number

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

'1' > 0 // true

// 문자열
+'' // 0
+'0' // 0
+'1' // 1
+'string' // NaN

// 불리언
+true // 1
+false // 0

+null // 0
+undefined // NaN
+Symbol() // TypeError

// 객체 타입
+{} // NaN
+[] // 0
+[10, 20] // NaN
+(function(){}) +{} // NaN

• '', [], null, false 는 0으로
• undefined, 요소가 있는 배열, 객체는 NaN
• 숫자이외의 값이 있는 문자열도!

3.boolean

false로 평가되는 값

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

명시적 타입 변환

1. string

문자열로 변환하는 방법

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

2. number

숫자형으로 변환하는 방법

1) Number 생성자 함수를 new 연산자 없이 호출
2) parseInt, parseFloat 함수를 사용하는 방법(string -> number만)
3) 산술 연산자

3. boolean

불리언 타입으로 변환하는 방법

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

---

단축 평가

'논리 연산자 표현식의 평가 결과는 피자 중 어느 한쪽으로 평가된다.'

console.log('cat' && 'dog'); // 'dog'
console.log('cat' || 'dog'); // 'cat'

둘 다 true 인 경우

1. 논리곱 연산자는 결과를 결정하는 두 번째 피연산자를 반환
2. 논리합 연산자는 결과를 결정한 첫 번째 피연산자를 반환

if문 대체하기

// true일 때 if문
if (조건) message = 'complete';
message = 조건 && 'complete';

// false일 때 if문
// 조건이 false라면 message에 'incomplete'
if (조건) message = 'incomplete'
message = 조건 || 'imcomplete'

---

옵셔널 체이닝 연산자, nll 병합 연산자

ECMAScript2020의 문법,
1. 옵셔널 체이닝 연산자
?. 는 좌항의 피연산자가 null 또는 undefined인 경우 undefined 반환, 그렇지 않으면 우항의 프로퍼티 참조

• 객체가 있나 없나
• 이 문법이 없을 땐 &&로 확인했음
• 빈 객체도 객체로 평가될 때가 있다

  let str = '';
  console.log(str && str.length); // ''
  

// null 또는 undefined만 아니면 됨
console.log(str?.length); // 0

__2. null 병합 연산자__
`??` 는 좌항의 피연산자가 null 또는 undefined인 경우 우항의 피연산자 반환, 그렇지 않으면 좌항의 피연산자 반환
- 이 문법이 없을 땐 ||로 확인
- 변수 기본값 설정에 유용
- 0이나 ''등 falsy값을 변수에 할당하고 싶을 경우 실패함
```js
let foo = 0 ?? 'default' // 0
let foo = 0 || 'default' // "default"