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

HustleKang·2022년 3월 22일

타입 변환이란?

  • 명시적 타입 변환(타입 캐스팅)
  • 암묵적 타입 변환

JS엔진은 표현식을 에러없이 평가하기 위해 피연산자 값을 암묵적 타입 변환하여 새로운 값을 만들어 내고 한번 사용하고 버림

암묵적 타입 변환

코드의 문맥을 고려해 암묵적으로 데이터 타입을 강제 변환한다

문자열 타입으로 변환

+: 피연산자 중 한개라도 문자열이 있으면 문자열 연결 연산자임, 즉 모든 피연산자를 문자열로 암묵적 타입 변환

0 + ''            // '0'
null + ''         // 'null'
[1,2,3,4] + ''    // '1,2,3,4'

숫자 타입으로 변환

  • 산술 연산자 있을 시
  • 비교 연산자 값을 비교하기 위해
+''         // 0
+undefined  // NaN
+{}         // NaN
+[]         // 0
+[1,2,3]    // NaN

불리언 타입으로 변환

  • 조건식의 평가결과를 불리언으로
  • Falsy한 값 6개 : undefined, null, 0, '', false, NaN
  • Falsy한 값 6개 제외 모든 값은 불리언으로 변환 시 true

명시적 타입 변환

  • 표준 빌트인 생성자 함수 호출
  • 빌트인 메서드 사용

문자열 타입으로 변환

String(100);  
(100).toString(); 
100 + '';

숫자 타입으로 변환

Number('100');
parseInt('100');
parseFloat('3.14');
+'100';
'100' * 1;

불리언 타입으로 변환

!!값 
!!0              // false
Boolean({})      // true
Boolean([])      // true

단축 평가

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

  • 논리 연산의 결과를 결정하는 피연산자를 타입 변환없이 그대로 반환
  • 표현식을 평가하는 도중 평가 결과가 확정된 경우 나머지 평가 과정을 생략
true && anything    // anything
false && anything   // false

true || anything    // true
false || anything   // anything
  • 기본값을 줄 때 || 사용
const sayHi = (name) => {
	name = name || '사용자';
    console.log(`안녕하세요 ${name}님`);
}

// es6 기본값 설정
const sayHi2 = (name='사용자') => {
    console.log(`안녕하세요 ${name}님`);
}

sayHi();    // 안녕하세요 사용자님

함수 호출 시 인자 없으면 undefined 할당됨

  • 객체를 가르키는 변수가 null이나 undefined일 때 프로퍼티 참조하면 에러가 나는데 이를 방지하려고 할 때 &&사용
let elem = null;
let value = elem.value  // null인데 프로퍼티 참조하면 에러남
let value = elem && elem.value // value는 null 할당, 에러 안남

옵셔널 체이닝 연산자

?.
좌항의 피연산자가 undefined or null 이면 undefined 반환
아니면 우항 프로퍼티 반환

프로퍼티 참조 에러를 막기 위해 &&를 써도 되지만 만약 아래와 같은 경우 문제 발생

let name = '';
let length = name && name.length; // length는 ''가 됨, 문제발생
let length = name?.length // length 는 0 

null 병합 연산자

??
좌항의 피연산자가 undefined or null 이면 우항 반환
아니면 좌항 반환

변수의 기본값 설정에 사용 가능
||도 가능하지만 원하는 값이 0이면 falsy한 값이기 때문에 문제 발생

let age = 0 || 20 // 0살을 원했는데 0이 falsy한 값이니 age=20이 됨
let age = 0 ?? 20 // age=0

이웅모, 『모던 자바스크립트 Deep Dive』, 위키북스(2021)

profile
grindin'

0개의 댓글