타입 변환과 단축 평가

타입 변환

---

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

var x = 10;
var str = x.toString();

console.log(typeof x, typeof str); // number string

• 암묵적 타입 변환 (타입 강제 변환) : 자바스크립트 엔진에 의해 암묵적으로 타입 변환

var x = 10;
var str = x + '';

console.log(typeof x, typeof str); // number string

암묵적 타입 변환

---

문자열 타입으로 변환

• + 연산자 => 피연산자 중 하나 이상 문자열일 때 문자열 연결 연산자로 동작
• 문자열이 아닌 피연산자를 문자열로 변환

1 + '2' // "12"

• 템플릿 리터럴의 표현식 삽입 => 표현식의 평가 결과를 문자열로 변환

`1 + 1 = ${1 + 1}` // "1 + 1 = 2"

숫자 타입으로 변환

• 산술 연산자 => 숫자 타입이 아닌 피연산자를 숫자로 변환
• 비교 연산자 => 피연산자의 크기 비교를 위해 피연산자를 숫자 타입으로 변환
• 숫자로 변환할 수 없는 경우엔 표현식의 평가 결과는 NaN

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

• + 단항 연산자 => 피연산자가 숫자 타입의 값이 아니면 숫자로 변환

+'1' // 1
+true // 1
+null // 0

// 변환되지 않아 NaN이 되는 것들
+undefined // NaN
+{} // NaN
+[10, 20] // NaN
+(function(){}) // NaN

불리언 타입으로 변환

• 조건식의 평가 결과를 불리언 타입으로 변환
• Truthy 값 (참으로 평가되는 값) => Falsy 값 외의 모든 값
• Falsy 값 (거짓으로 평가되는 값) => false, undefined, null, 0, -0, NaN, ''

if ('') console.log('1');
if (true) console.log('2');
if (0) console.log('3');
if ('str') console.log('4');
if (null) console.log('5');
// 2 4

명시적 타입 변환

---

문자열 타입으로 변환

// String()
String(1); // "1"

// Object.prototype.toString 메소드 사용
(1).toString(); // "1"

// (+) 문자열 연결 연산자
1 + ''; // "1"

숫자 타입으로 변환

// Number()
Number('0'); // 0

// parseInt, parseFloat 함수 사용
parseInt('0'); // 0

// (+) 단항 산술 연산자
+'0'; // 0

// (*) 산술 연산자
'0' * 1; // 0

불리언 타입으로 변환

// Boolean()
Boolean(0); // false
Boolean(1); // true

// (!) 부정 논리 연산자 두 번 사용
!!0; // false
!!1; // true

단축 평가

---

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

논리 연산자 사용

연산 결과를 결정하는 피연산자의 값을 그대로 반환한다.

• && 연산자 => 첫 번째 Falsy 값 반환
• Falsy 값이 없으면 마지막 피연산자 반환

'cat' && 'dog' // 'dog'

• || 연산자 => 첫 번째 Truthy 값 반환
• Truthy 값이 없으면 마지막 피연산자 반환

'cat' || 'dog' // 'cat'

if 문 대체

• && 연산자

var done = true;
var message = '';

if (done) message = '완료';

// done이 true라면 '완료'가 반환되어 message에 할당
message = done && '완료';

• || 연산자

var done = false;
var message = '';

if (!done) message = '미완료';

// done이 false라면 '미완료'가 반환되어 message에 할당
message = done || '미완료';

객체가 null/undefined 인지 확인하고 참조

만약 객체가 null 또는 undefined일 경우 객체의 프로퍼티를 참조하면 타입 에러 발생 후 프로그램이 강제 종료된다.

var elem = null;
var value = elem.value; // TypeError: Cannot read property 'value' of null

이때 단축 평가를 사용하면 에러를 발생시키지 않고 객체가 null/undefined 인지 아닌지 확인할 수 있다.

var elem = null;
// elem 이 null/undefined 라면 null/undefined를 반환, 아니라면 elem.value를 반환
var value = elem && elem.value; // null

함수 매개변수에 기본값 설정

함수 호출 시 인수를 전달하지 않으면 매개변수에 undefined가 할당된다.

function getStringLength(str) {
  return str.length;
}

getStringLength(); // TypeError: Cannot read properties of undefined

이때 단축 평가를 사용해 매개변수의 기본값을 설정하면 undefined로 인해 발생하는 에러를 방지할 수 있다.

function getStringLength(str) {
  // str 가 undefined 라면 str 에 '' 할당
  str = str || '';
  return str.length;
}

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

ES6에서는 단축 평가를 사용하지 않고 매개변수의 기본값을 설정할 수가 있다.

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

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

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

• ES11에서 도입됨
• 좌항이 null/undefined 인 경우에만 undefined 반환
• && 연산자 단축 평가를 통한 null/undefined 확인법을 대체
• 좌항이 다른 Falsy 값이나 유효한 값이면 우항의 프로퍼티 참조를 이어감

var elem = null;

// elem 이 null/undefined 라면 undefined 반환, 아니라면 elem.value 반환
var value = elem?.value;

null 병합 연산자 ( ?? )

• ES11에서 도입됨
• 좌항이 null/undefined 인 경우에만 우항을 반환
• || 연산자 단축 평가를 통한 변수 기본값 설정을 대체
• 좌항이 다른 Falsy 값이나 유효한 값이면 좌항을 반환

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

만약 Falsy 값인 0 이나 '' 도 기본값으로 유효하게 설정하고 싶다면 ?? 를 사용하면 된다.