모던 자바스크립트 Deep Dive 정리
템플릿 리터럴의 암묵적 타입 변환
▶ ${1 + 1} 이 '2'로 타입 변환된다
▷ 예시
`1 + 1 = ${1 + 1}` // -> "1 + 1 = 2"
숫자 타입으로 변환
▶ + 연산자는 문자열 타입으로 변환하는데에도 쓰이고 (양의 + 성격으로 쓰이면 숫자로도 변경 가능)
▶ -, *, / 연산자는 숫자 타입으로 변환하는데만 쓰인다
▷ 예시
1 - '1' // -> 0
1 * '10' // -> 10
1 / 'one' // -> NaN // 문자열로 나눌 수 없다
+ 단항 산술 연산자를 이용하는 방법
// 문자열 타입 => 숫자 타입
+'0'; // -> 0
+'-1'; // -> -1
+'10.53'; // -> 10.53
// 불리언 타입 => 숫자 타입
+true; // -> 1
+false; // -> 0
▶ parseInt, parseFloat 함수는 `문자열만` 숫자로 바꿔준다
▷ 예시
parseInt, parseFloat 함수를 사용하는 방법(문자열만 변환 가능)
// 문자열 타입 => 숫자 타입
parseInt('0'); // -> 0
parseInt('-1'); // -> -1
parseFloat('10.53'); // -> 10.53
함수 매개변수에 기본값 설정
▶ 함수를 호출할 때 인수를 전달하지 않으면 매개변수에 undefined가 할당된다
▶ 이로 인한 예기치 못한 에러를 방지하는 2가지 방법이 있다
1. 단축 평가
2. ES6의 매개변수 기본값 설정 기능
// 단축 평가를 사용한 매개변수의 기본값 설정
function getStringLength(str) {
str = str || ''; // str이 falsy하면 (비었으면) '' 할당
return str.length;
}
getStringLength(); // -> 0
getStringLength('hi'); // -> 2
// ES6의 매개변수의 기본값 설정
function getStringLength(str = '') {
return str.length;
}
getStringLength(); // -> 0
getStringLength('hi'); // -> 2
옵셔널 체이닝(optional chaining) 연산자
▶ ?.
▶ 객체?.프로퍼티 형태로 자주 씀
▶ 좌항의 피연산자가 null 또는 undefined인 경우 undefined를 반환하고,
그렇지 않으면 우항의 프로퍼티 참조를 이어감
▷ 없을 수도 있는 객체의 프로퍼티를 참조할 수 있음
▷ 예시
const elem = null;
const value = elem?.value;
console.log(value); // undefined
// 좌항 피연산자가 falsy 값이라도 null 이나 undefined가 아니면 우항의 프로퍼티를 참조
const str = '';
const length = str?.length;
console.log(length); // 0
null 병합(nullish coalescing) 연산자
▶ ??
▶ 좌항의 피연산자가 null 또는 undefined인 경우 우항의 피연산자를 반환
▷ 변수에 기본값을 설정할 때 유용하다
▷ 예시
const foo = null ?? 'default string';
console.log(foo); // "default string"
// 좌항의 피연산자가 Falsy 값이라도 null 또는 undefined이 아니면 좌항의 피연산자를 반환한다.
const foo = '' ?? 'default string';
console.log(foo); // ""