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

1. 타입 변환

명시적 타입 변환 or 타입 캐스팅: 개발자가 의도적으로 값의 타입을 변환하는 것
암묵적 타입 변환 or 타입 강제 변환 : JS 엔진에 의해 암묵적으로 타입이 변환

2. 암묵적 타입 변환

1. 문자열 타입으로 변환

• + 연산의 경우 피연산자 중 하나 이상이 문자열이라면 문자열 연결 연산자로 동작

1 + '2' // "12"

2. 숫자 타입으로 변환

• 산술 연산자, 또는 비교 연산자의 경우 피연산자를 숫자로 변환
• 피연산자를 숫자로 변환할 수 없는 경우 NaN 출력

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

3. 불리언 타입으로 변환

• true or false로 판단되어야 하는 조건식의 경우

if (``) console.log(x);

false로 평가되는 Falsy 값

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

3. 명시적 타입 변환

1. 문자열 변환

• String 연산자
• toString()
• + 문자열 연결 연산자

2. 숫자 변환

• Number
• parseInt, parseFloat
• + 단항 산술 연산자, *산술 연산자

3. 불리언 변환

• Boolean
• !!

4. 단축평가

논리곱(&&) 연산자

• 2개의 피연산자가 모두 true일 때 true 반환
• 논리 연산의 결과를 결정하는 두 번째 피연산자 "Dog" 반환

'Cat' && 'Dog' // "Dog"

논리합(||) 연산자

• 두 개의 피연산자 중 하나만 true여도 true 반환
• 논리 연산의 결과를 결정한 첫 번째 피연산자 "Cat" 반환

'Cat' || 'Dog' // "Cat"

단축 평가

• 표현식을 평가하는 도중 결과가 확정된 경우 나머지 평과 과정 생략하는 것
• 논리곱(&&) 연산자와 논리합(||) 연산자처럼 논리 연산의 결과에서 피연산자의 타입을 변환하지 않고 그대로 반환하는 것

단축 평가를 통해 if 문 대체 가능

// 직업이 존재하는 경우 직업을 출력, 
// 직업이 없는 경우(person.job == null) unemployed
var person = {
  name: 'Jack',
  age: 34,
  job: 'teacher'
}
console.log(person.job || 'unemployed');
// teacher

// done이 true인 경우 message에 값 할당
message = done && '완료';

// done이 false인 경우 message에 값 할당
message = done || '미완료';

// 에러를 방지하기 위해 객체의 값이 존재하는지를 미리 확인할 때도 사용
var elem = null;

// 논리합 단축평가로 인해 elem 값 그대로 출력
var value = elem && elem.value // null;

옵셔널 체이닝 연산자 (?.)

• 객체를 가리키기를 기대하는 변수의 값이 null 또는 undefined 일 때 단축 평가를 사용하면 에러 발생 ❌
• 논리합(&&) 연산자의 단축평가와 같은 역할

var elem = null;

// elem이 null이거나 undefined라면 undefined반환
// 그렇지 않다면 elem.value 반환
var value = elem && elem.value;

단, 옵셔널 체이닝의 경우 논리합(&&) 연산자와 달리 좌항 피연산자의 값이 null과 undefined인 경우에만 undefined 출력

var str = '';


// 논리합(&&) 연산자
// &&연산자는 str의 값을 Falsy값으로 인식하기 때문에 
// 길이를 출력하지 못함
var length = str && str.length; // ''


// 옵셔널 체이닝
// str이 Falsy값이라도 null또는 undefined가 아니므로 값 참조 가능
var length = str?.length; // 0

null 병합 연산자(??)

• ?? 좌항의 피연산자가 null이나 undefined라면 우항의 피연산자 반환
• 그렇지 않다면 좌항의 피연산자를 그대로 출력
• 논리곱(||) 연산자와 비슷한 역할

// 변수에 기본값 설정할 때 유용
var foo = null ?? 'default string';

단, null 병합 연산자의 경우 논리곱(||) 연산자와 달리 좌항 피연산자의 값이 null과 undefined인 경우에만 undefined 출력

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