728x90
1. 타입 변환?
- 명시적 타입 변환 : 개발자가 의도적으로 타입 변환하는 것 => 타입 캐스팅
- 암묵적 타입 변환 : 개발자의 의도와 상관없이 표현식 평가 도중 자바스크립트 엔진에 의해 타입이 변환되는 것 => 타입 강제 변환
var x = 10;
// 암묵적 타입 변환
var str = x + '';
console.log(typeof str, str); // string 10
// x 변수의 값이 변경된 것은 아님
console.log(typeof x, x); // number 10
- 기존 변수 값을 재할당하여 변경하는 것이 아니라 표현식을 에러없이 평가하기 위해 새로운 타입의 값 만드는 것
- 타입 변환을 예측하지 못하면 오류 생산 가능성이 높아짐
2. 암묵적 타입 변환
- 자바스크립트 엔진은 코드의 문맥을 고려해 암묵적으로 데이터 타입을 변환
// 피연산자가 모두 문자열 타입이어야 하는 문맥
'10' + 2 // -> '102'
// 피연산자가 모두 숫자 타입이어야 하는 문맥
5 * '10' // -> 50
// 피연산자 또는 표현식이 불리언 타입이어야 하는 문맥
!0 // -> true
if (1){ }
- 템플릿 리터럴 표현식 삽입
// 표현식의 평가 결과를 문자열 타입으로 암묵적 타입 변환
`1 + 1 = ${1 + 1}` // "1 + 1 = 2"
- 빈 문자열 (''), 빈 배열([]), null, false는 0으로 true는 1로 변환
- 객체와 빈 배열이 아닌 배열, undefined는 변환되지 않아 NaN
- false로 평가되는 Falsy 값
- false
- undefined
- null
- 0, -0
- NaN
- ''(빈 문자열)
3. 명시적 타입 변환
- 숫자 타입으로 변환
// 1. Number 생성자 함수를 new 연산자 없이 호출
Number('0'); // -> 0
Number(true); // -> 1
// 2. parseInt, parseFloat 함수 사용 (문자열만 변환 가능)
parseInt('0') // -> 0
// 3. + 단항 산술 연산자 이용
+'0'; // -> 0
+true; // -> -1
// 4. * 산술 연산자 이용
'0' * 1 // -> 0
true * 1; // -> 1
4. 단축 평가
- 표현식을 평가하는 도중에 평가 결과가 확정되었을 때 나머지 평가 과정을 생략하는 것
- 논리 연산자 사용한 단축 평가
- 논리 연산의 결과를 결정하는 피연산자를 타입 변환하지 않고 그대로 반환
'Cat' && 'Dog' // -> 'Dog'
'Cat' || 'Dog' // -> 'Cat'
// 1. && 표현식으로 if 문과 if else 문 대체 가능
var done = true;
var message = '';
// 주어진 조건이 true일 때
if(done) message = '완료';
// done이 true라면 message에 '완료' 할당
message = done && '완료';
console.log(message); // 완료
// 2. || 표현식으로도 대체 가능
// 첫번째 피연산자가 false라면 message에 '미완료' 할당
message = done || '미완료';
console.log(message); // 미완료
단축평가 활용법
1. 객체를 가리키기를 기대하는 변수가 null 또는 undefined가 아닌지 확인하고 프로퍼티를 참조할 때
var elem = null;
var value = elem.value; // TypeError: Cannot read property 'value' of null
// 단축 평가 활용 시 에러 발생 X
var elem = null;
// elem이 null이나 undefined와 같은 Falsy 값이면 elem으로 평가 됨
// elem이 Truthy 값이면 elem.value로 평가 됨
var value = elem && elem.value; // -> null
2. 함수 매개변수에 기본값 설정할 때
// 단축 평가를 사용한 매개변수 기본값 설정
function getStringLength(str) {
str = str || '';
return str.length;
}
getStringLength(); // -> 0
// 매개변수 없어 undefined가 할당 되고 falsy 값이기 때문에 '' 할당 됨.
// ''의 배열 길이는 0
getStringLength('hi'); // -> 2
// ES6의 매개변수 기본값 설정
function getStringLength(str = '') {
return str.length;
}
getStringLength(); // -> 0
getStringLength('hi'); // -> 2
- 옵셔널 체이닝 연산자(?.)
- ES11에서 도입
- 좌항의 피연산자가 null 또는 undefined인 경우 undefined를 반환
- 그렇지 않으면 우항의 프로퍼티 참조
- 좌항 피연산자가 false로 평가되는 Falsy 값(false, undefined, null, 0, -0, NaN, '')이라도 null, undefined가 아니면 우항 프로퍼티 참조
// 1. 단축 평가 사용 시
var str = ''; // Falsy 값이어서 False
// 문자열의 길이(length)를 참조
var length = str && str.length;
// 문자열의 길이(length) 참조 불가
console.log(length); // -> ''
// 좌항이 False이기 때문에 str을 그대로 반환
// 2. 옵셔널 체이닝 연산자(?.) 사용 시
var str = '';
var length = str?.length;
console.log(length);
- null 병합 연산자(??)
- ES11에서 도입
- 좌항의 피연산자가 null 또는 undefined인 경우 우항의 피연산자를 반환
- 그렇지 않으면 좌항의 피연산자 반환
- 변수의 기본값 설정 시 유용
- 좌항 피연산자가 false로 평가되는 Falsy 값(false, undefined, null, 0, -0, NaN, '')이라도 null, undefined가 아니면 좌항 피연산자 그대로 반환
var foo = '' ?? 'default string';
console.log(foo); // ""
참고 : 모던 자바스크립트 Deep Dive
728x90
'TIL > JavaScript' 카테고리의 다른 글
[Vanilla JS 활용] DOM 제어 및 사용자 정보 획득 (0) | 2022.04.26 |
---|---|
[딥다이브] 10장 객체 리터럴 (0) | 2022.04.26 |
[딥다이브] 8장 제어문 (0) | 2022.04.24 |
[딥다이브] 7장 연산자 (0) | 2022.04.21 |
프론트엔드 웹개발 환경 셋팅 (0) | 2022.04.21 |