TIL(Today I Learned) 🧑🏻💻
9. 타입 변환과 단축 평가(2)
9.4 단축 평가
-
논리곱(&&) 연산자와 논리합(||) 연산자는 논리 연산의 결과를 결정하는 피연산자를 타입 변환하지 않고 그대로 반환한다. 이를 단축 평가(short-circuit evaluation)라 한다.
-
단축 평가는 표현식을 평가하는 도중에 평가 결과가 확정된 경우 나머지 평가 과정을 생략하는 것을 말한다.
9.4.1 논리 연산자를 사용한 단축 평가
-
논리합(||) 또는 논리곱(&&) 연산자 표현식은 언제나 2개의 피연산자 중 어느 한쪽으로 평가된다.
-
논리곱 연산자는 논리 연산의 결과를 결정하는 두 번째 피연산자를 그대로 반환한다.
-
논리합 연산자는 논리 연산의 결과를 결정하는 첫 번째 피연산자를 그대로 반환한다.
단축 평가 표현식 평가 결과 true || anything true false || anything anything true && anything anything false && anything false
// 논리합(||) 연산자
'Cat' || 'Dog' // 'Cat'
false || 'Dog' // 'Dog'
'Cat' || false // 'Cat'
// 논리곱(&&) 연산자
'Cat' && 'Dog' // 'Dog'
false && 'Dog' // false
'Cat' && false // false-
단축 평가를 사용하면
if문을 대체할 수 있다. -
조건이 Truthy 값(참으로 평가되는 값)일 때 논리곱(&&) 연산자 표현식으로
if문을 대체할 수 있다.
var done = true;
var message = '';
// 주어진 조건이 true일 때
if (done) message = '완료';
// if 문은 단축 평가로 대체 가능하다.
// done이 true라면 message에 '완료'를 할당
message = done && '완료';
console.log(message); // 완료- 조건이 Falsy 값(거짓으로 평가되는 값)일 때 논리합(||) 연산자 표현식으로
if문을 대체할 수 있다.
var done = false;
var message = '';
// 주어진 조건이 false일 때
if (!done) message = '미완료';
// if 문은 단축 평가로 대체 가능하다.
// done이 false라면 message에 '미완료'를 할당
message = done || '미완료';
console.log(message); // 미완료- 삼항 조건 연산자는
if ... else문을 대체할 수 있다.
var done = true;
var message = '';
// 주어진 조건이 false일 때
if (done) message = '완료';
else message = '미완료';
console.log(message); // 완료
// if ... else 문은 삼항 조건 연산자로 대체 가능하다.
message = done ? '완료' : '미완료';
console.log(message); // 완료- 단축 평가의 유용한 패턴
객체를 가리키기를 기대하는 변수가 null 또는 undefined가 아닌지 확인하고 프로퍼티를 참조할 때
-
객체는 키(key)와 값(value)로 구성된 프로퍼티(property)의 집합
-
객체를 가리키기를 기대하는 변수의 값이 객체가 아니라 null 또는 undefined인 경우 객체의 프로퍼티를 참조하면 타입 에러(TypeError)가 발생한다.
// 단축 평가를 사용하지 않을 때
var elem = null;
var value = elem.value; // TypeError: Cannot read property 'value' of null- 이때 단축 평가를 사용하면 에러를 발생시키지 않는다.
// 단축 평가를 사용할 때
var elem = null;
// elem이 null이나 undefined와 같은 Falsy 값이면 elem으로 평가되고
// elem이 Truthy 값이면 elem.value로 평가된다.
var value = elem && elem.value; // null함수 매개변수에 기본값을 설정할 때
-
함수를 호출할 때 인수를 전달하지 않으면 매개변수에는 undefined가 할당된다.
-
이때 단축 평가를 사용해 매개변수의 기본값을 설정하면 undefined로 인해 발생할 수 있는 에러를 방지할 수 있다.
// 단축 평가를 사용한 매개변수의 기본값 설정
function getStringLength(str) {
str = str || '';
return str.length;
}
getStringLength(); // 0
getStringLength('hi'); // 2
// ES6의 매개변수의 기본값 설정
function getStringLength(str = '') {
return str.length;
}
getStringLength(); // 0
getStringLength('hi'); // 29.4.2 옵셔널 체이닝 연산자
- ES11(ECMAScript2020)에서 도입된 옵셔널 체이닝(optional chaining) 연산자
?.는 좌항의 피연산자가 null 또는 undefined인 경우 undefined를 반환하고, 그렇지 않으면 우항의 프로퍼티 참조를 이어간다.
var elem = null;
// elem이 null 또는 undefined이면 undefined를 반환하고, 그렇지 않으면 우항의 프로퍼티 참조를 이어간다.
var value = elem?.value;
console.log(value); // undefined-
옵셔널 체이닝 연산자
?.는 객체를 가리키기를 기대하는 변수가 null 또는 undefined가 아닌지 확인하고 프로퍼티를 참조할 때 유용하다. -
옵셔날 체이닝 연산자가 도입되기 이전에는 논리 연산자 &&를 사용한 단축 평가를 통해 변수가 null 또는 undefined인지 확인했다.
-
논리 연산자 &&는 좌항 피연산자가 false로 평가되는 Falsy 값이면 좌항 피연산자를 그대로 반환한다.
-
하지만 ''은 객체로 평가될 때도 있다. (주의)
var str = '';
// 문자열의 길이(length)를 참조한다.
var length = str && str.length;
// 문자열의 길이(length)를 참조하지 못한다.
console.log(length); // ''- 반면 옵셔널 체이닝 연산자
?.는 좌항 피연산자가 false로 평가되는 Falsy 값이라도 null 또는 undefined가 아니면 우항의 프로퍼티 참조를 이어간다.
var str = '';
// 문자열의 길이(length)를 참조한다. 이때 좌항 피연산자가 false로 평가되는 Falsy 값이라도
// null 또는 undefined가 아니면 우항의 프로퍼티 참조를 이어간다.
var length = str?.length;
console.log(length); // 09.4.2 null 병합 연산자
-
ES11(ECMAScript2020)에서 도입된 null 병합(nullish coalescing) 연산자
??는 좌항의 피연산자가 null 또는 undefined 인 경우 우항의 피연산자를 반환하고, 그렇지 않으면 좌항의 피연산자를 반환한다. -
null 병합 연산자
??는 변수에 기본값을 설정할 때 유용하다.
// 좌항의 피연산자가 null 또는 undefined이면 우항의 피연산자를 반환하고,
// 그렇지 않으면 좌항의 피연산자를 반환한다.
var foo = null ?? 'default string';
console.log(foo); // 'default string'-
null 병합 연산자가 도입되기 이전에는 논리 연산자 ||를 사용한 단축 평가를 통해 변수에 기본값을 설정했다.
-
논리 연산자 ||를 사용한 단축 평가의 경우 좌항의 피연산자가 false로 평가되는 Falsy 값이면 우항의 피연산자를 반환한다.
-
만약 Falsy 값인 0이나 ''도 기본값으로 유효하다면 예기치 않은 동작이 발생할 수 있다. (주의)
// Falsy 값인 0이나 ''도 기본값으로서 유효하다면 예기치 않은 동작이 발생할 수 있다.
var foo = '' || 'default string';
console.log(foo); // 'default string'- null 병합 연산자
??는 좌항의 피연산자가 false로 평가되는 Falsy 값이라도 null 또는 undefined가 아니면 좌항의 피연산자를 그대로 반환한다.
// 좌항의 피연산자가 Falsy 값이라도 null 또는 undefined가 아니면 좌항의 피연산자를 반환한다.
var foo = '' ?? 'default string';
console.log(foo);새로운 용어 정리
참고 문헌
* 모던 자바스크립트 Deep Dive ( 자바스크립트의 기본 개념과 동작 원리 ) / 이웅모 지음
