[JS] 모던 자바스크립트 - 05. 타입 변환과 단축 평가
타입 변환
- 기존 원시 값을 사용해 다른 타입의 새로운 원시 값을 생성. 기존 원시 값을 직접 변경 X
암묵적 타입 변환
- 개발자의 의도와는 상관 없이 자바스크립트 엔진에 의해 타입이 변환되는 것, 타입 강제 변환(type coercion)이라고도 함
- 자바스크립트 엔진은 표현식을 에러 없이 평가하기 위해 암묵적 타입 변환으로 새로운 타입의 값을 만들어 단 한 번만 사용 후 버림
1. 문자열 타입 변환
- 문자열 연결 연산자 사용 시 피연산자 중 문자열이 아닌 타입이 있을 경우, 문자열 타입으로 암묵적 타입 변한
- ES6에 도입된 템플릿 리터럴의 표현식 삽입은 표현식의 평가 결과를 문자열 타입으로 암묵적 타입 변환
2. 숫자 타입 변환
- 산술 연산자 사용 시 피연산자 중 숫자 타입이 아닌 경우, 숫자 타입으로 암묵적 타입 변환
- 비교 연산자 사용 시, + 단항 연산자 사용 시에도 마찬가지
ex) 빈 문자열(' '), 빈 배열([ ]), null, false는 0으로, true는 1로 변환
3. 불리언 타입 변환
- 조건식의 평가 결과를 불리언 타입으로 암묵적 타입 변환
- 자바스크립트 엔진은 불리언 타입이 아닌 값을 Truthy 값(참으로 평가되는 값) 또는 Falsy 값(거짓으로 평가되는 값)으로 구분
- Falsy 값 : false, undefined, null, 0, -0, NaN, ' '(빈 문자열)
- Truthy 값 : Falsy 값이 아닌 모든 값
명시적 타입 변환
- 개발자가 의도적으로 값의 타입을 변환하는 것, 타입 캐스팅(type casting)이라고도 함
1. 문자열 타입 변환
- String(변환할 값) - new 연산자 없이 호출하는 String 생성자 함수
- (변환할 값).toString - Object.prototype.toString 메서드
- 변환할 값 + ' ' - 문자열 연결 연산자
2. 숫자 타입 변환
- Number(변환할 값) - new 연산자 없이 호출하는 Number 생성자 함수
- parseInt(변환할 값), parseFloat(변환할 값) 함수 (문자열만 숫자타입으로 변환 가능)
- + (변환할 값) - +단항 산술 연산자
- (변환할 값)*1 - * 산술 연산자
3. 불리언 타입 변환1. 문자열 타입 변환
- Boolean(변환할 값) - new 연산자 없이 호출하는 Boolean 생성자 함수
- !!(변환할 값) - ! 부정 논리 연산자를 두번 사용
단축 평가
- 표현식을 평가하는 도중에 평가 결과가 확정된 경우 나머지 평가 과정을 생략
1. 논리 연산자
- 논리합(||) 또는 논리곱(&&) 연산자 표현식은 언제나 2개의 피연산자 중 한쪽으로 평가
&&(논리곱) 연산자
- 좌항에서 우항으로 평가가 진행
- 전부 true인 경우 제일 우항의 값을 반환
'CAT'&&'DOG' // 'DOG'- 첫번째 false가 되는 값 반환
'CAT'&&''&&'DOG' // ''
'CAT'&&false&&'' // false- 조건이 Truthy값일 때 로직을 실행한다면 if문을 대체 가능
var done = true;
var message = '';
// 조건이 true 일 때
if (done) message = '완료';
// 논리곱으로 if문 대체
message = done&&'완료';
||(논리합) 연산자
- 좌항에서 우항으로 평가가 진행
- 첫번째로 true가 되는 값을 반환
'CAT'||'DOG' // 'CAT'
''||'CAT'||''||'DOG' // 'CAT'- 전부 false일 경우에는 제일 우항의 값 반환
''||''||false||undefined // undefined- 조건이 Falsy값일 때 로직을 실행한다면, if문을 대체 가능
var done = false;
var message = '';
// 조건이 false 일 때
if (!done) message = '미완료';
// 논리합으로 if문 대체
message = done||'미완료';
활용방안
- 객체를 가리키는 변수가 null 또는 undefined인지 확인하고 프로퍼티를 참조할 때
var elem = null;
var value = elem.value; // TypeError...
// 단축 평가 적용
var elem = null;
var value = elem && elem.value; // null, TypeError 발생하지 않음.- 함수 매개변수에 기본값 설정할 때
// 단축 평가로 매개변수의 기본값 설정
function getStringLength(str) {
str = str || '';
return str.length;
}
getStringLength(); // 0
getStringLength('hi'); //2
// ES6의 매개변수의 기본값 설정
function getStringLength(str='') {
return str.length;
}
getStringLength(); // 0
getStringLength('hi'); //2
2. 옵셔널 체이닝 연산자 (?.)
- ES11에서 도입
- 좌항의 피연산자가 null 또는 undefined인 경우 undefined 반환, 그렇지 않으면 우항의 프로퍼티 참조를 이어감
- 객체를 가리키는 변수가 null 또는 undefined인지 확인하고 프로퍼티를 참조할 때 유용
var elem = null;
var value = elem?.value; // undefiend- 논리연산자보다 유용한 경우 (' '(빈문자열)이 객체로 평가될 때)
var str = '';
var length = str&&str.length;
console.log(length); // '', 문자열의 길이를 참조하지 못함
var length = str?.length;
console.log(length); // 0
3. null 병합 연산자(??)
- ES11에서 도입
- 좌항의 피연산자가 null 또는 undefined인 경우 우항의 피연산자 반환, 그렇지 않으면 좌항의 피연산자 반환
- 변수의 기본값을 설정할 때 유용
var foo = null ?? 'default string';
console.log(foo); // 'default string'
출처
- 모던 자바스크립트 Deep Dive - 자바스크립트의 기본 개념과 동작 원리