[ 자바스크립트 ] 단축 평가

논리합 ( || ) 또는 논리곱 ( && ) 의 연산자 표현식은 언제나 2개의 피연산자 중 어느 한쪽으로 평가된다.

단축 평가란 표현식을 표현하는 도중에 평가 결과가 확정된 경우 나머지 평가 과정을 생략하는 것을 말한다.

 

1.  논리곱 ( && ) 을 이용한 단축 평가

논리곱 ( && ) 연산자는 피연산자들 모두 true 일때 true 를 반환한다. 

'foo' && 'bar' // 'bar'

논리곱 연산자는 좌항에서 우항으로 평가가 진행된다. 'foo' 는 Truthy 값으로 true 로 평가된다. 그래서 다음항인 'bar' 를 평가를 해보아야 위 표현식을 평가할수 있다. 따라서 위의 예시에서는 'bar' (두번째 연산자) 가 논리곱 연산자 표현식의 평가 결과를 진행한다. 

 

다른 예시를 알아보자

'foo' && null && 'bar' // null

첫번째 항 'foo' 는 Truthy 값이므로 true 로 평가된다. 다음 항인 null 은 Falsy 값이므로 false 로 평가된다. 따라서 위 표현식은 null 이 논리곱 연산자의 평가 결과를 진행하여서 null 이 반환한다.

논리곱 연산자의 활용

- if 문으로 대체 가능

const done = true;
let message = '';

// 1. if 문을 쓸때
if (done) message = '완료';

// 2. 단축평가를 이용할때
message = done && '완료'; // done 이 true 이면 '완료'를 반환
console.log(message); // '완료'

- 객체가 아니라  null 이나 undefined 인 경우 프로퍼티 참조시 에러가 발생하는데 이러한 경우 단축평가로 핸들링 처리 가능

var elem = null;

// 단축평가를 쓰지 않으면 에러 발생
var value = elem.value; // TypeError: Cannot read property 'value' of null

// 단축평가를 써서 해결가능
var value = elem && elem.value // null

옵셔널 체이닝 (?.) 연산자

옵셔넝 체니인 연산자는 ES11(ECMAScript2020) 에서 도입되었다. 옵셔널 체이닝은 좌항의 피연산자가 undefined 또는 null 인 경우에 undefined 를 반환한다. 좌항의 피연산자가 null, undefined 가 아닌 경우에는 우항의 프로퍼티 참조를 어이간다.

var elem = null;

// 단축 평가를 이용할때
var value = elem && elem.value; // null

// 옵셔널 체이닝을 이용할때
var value = elem?.value; // undefined

옵셔널 체이닝은 좌항 피연산자가 null 또는 undefined 가 아닌 Falsy값 (false, 0, -0, NaN, '') 이면 우항의 프로퍼티 참조를 이어간다.

var string = '';

var length = str?.length;
console.log(length); // 0

string 은 Falsy값 이지만 unll, undefined 가 아니기 때문에 우항의 프로퍼티 참조를 이어가서 길이가 0 이 되었다.

2. 논리합 ( || ) 을 이용한 단축 평가

논리합 ( || ) 연산자는 피연산자들중 하나만 true로 평가되어도 true 를 반환한다. 

'foo' || 'bar'; // 'foo'

논리합 연산자는 좌항에서 우항으로 평가가 진행된다. 위의 예시를 살펴보면 'foo' 는 Truthy 값이므로 true 로 평가된다. 따라서 두번째 피연산자인 'bar' 를 평가해 보지 않아도 위 표현식을 평가할수 있다. 위 표현식은 'foo' 를 반환한다.

논리합 연산자의 활용

- if 문으로 대체 가능

const done = false;
let message = '';

// 1. if 문을 쓸때
if (!done) message = '미완료';

// 2. 단축평가를 이용할때
message = done || '미완료'; // done 이 false 여서 '미완료'를 반환
console.log(message); // '미완료'

- 함수 매개변수에 기본값을 설정할때

함수를 호출할때 인수를 전달하지 않으면 매개변수에 undefined 가 할당되는데 이때 발생할수 있는 에러를 단축평가를 사용해 방지 가능

function getStringLength(str) {
	str = str || ''; // str 이 Falsy 값이면 '' 반환
    return str.length
}

getStringLength('hello'); // 5
getStringLength(); // 0 ('' 의 length)

null 병합 연산자 (??)

좌항의 피연산자가 null 또는 undefined 인 경우에 우항의 피연산자를 반환한다. 만약에 좌항의 피연산자가 null, undefined 가 아니라면 null, undefined 를 반환한다. null 병합 연산자를 예시를 통해 알아보자.

var str = null ?? 'default string'; 
console.log(str); // 'default string'

null 병합 연산자(??) 가 나오기 전에는 논리합(||) 연산자를 이용하였는데 논리합 연산자는 좌항의 피연산자가 Falsy 값인 경우에는 모두 우항의 피연산자를 반환하기 때문에 숫자 0 이나 빈 문자열 "" 을 값으로 적용하고 싶어도 못하게 된다. 예시를 통해 알아보자.

var str = '' || 'default';
console.log(str); // 'default'

프로그래밍을 하는데 빈 문자열('') 을 기본값으로 쓰고 싶어도 Falsy 값이므로 default 가 반환된다. 이런 경우 의도치 않은 동작이 될수있다. 

 

Reference

모던 자바스크립트 Deep Dive 책을 공부하며 정리하였습니다