[JavaScript] 단축 평가와 옵셔널 체이닝 연산자, 그리고 null 병합 연산자

단축 평가

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

논리합( || )과 논리곱( && ) 연산자 표현식은 언제나 2개의 피연산자 중 어느 한쪽으로 평가된다. 아래 예시를 통해 확인해보자.

'Apple' && 'Banana' // Banana 출력
'Apple' || 'Banana' // Apple 출력

이처럼 두 결과가 다른 것을 알 수 있는데 이유는 간단하다. 논리곱 연산자는 2개의 피연산자 모두 true여야 true를 반환하므로 2개의 피연산자를 모두 확인하여 마지막으로 확인한 피연산자의 값을 반환하는 것이고, 논리합 연산자는 2개의 피연산자 중 하나만 true이면 true를 반환하므로 이미 'Apple'이 true이므로 뒤는 평가하지 않고 바로 첫번째 값을 반환하는 것이다. 이를 일반화하면 아래와 같다.

true || anything // true
false || anything // anything
true && anything // anything
false && anything // false

이러한 단축 평가의 특징을 이용하여 객체이기를 기대하는 변수의 값이 null이나 undefined가 아닐 때 프로퍼티를 참조하도록 할 수 있다. 객체이기를 기대하는 변수의 값이 객체가 아니라 null이나 undefined일 때, 해당 객체의 프로퍼티를 참조하게 되면 타입 에러가 발생하기 때문에 이는 중요하다.

var elem = null;
var value = elem.value; // TypeError 발생

------------------------------------------------

var elem = null;
var value = elem && elem.value; // null

위의 코드와 같이 첫번째 경우에는 elem이 객체이기를 기대하면서 elem.value라는 프로퍼티를 참조하려 했지만, elem의 값이 null이기 때문에 타입 에러가 발생한다. 그러나 두번째 경우에는 단축 평가를 사용했다. 논리곱 연산자( && )는 앞의 값이 true이면 뒤의 값을, false이면 앞의 값을 반환한다. 위의 경우에는 앞의 값인 elem이 null, 즉 falsy한 값이므로 바로 elem의 값이 출력된다. 따라서 null이 정상적으로 출력된다.

---

옵셔널 체이닝 연산자

옵셔널 체이닝 연산자는 아래와 같이 ?.의 형태로 사용한다.

var elem = null;
var value = elem?.value;

이때 ?.의 좌항의 피연산자가 null이거나 undefined이면 undefined를 반환하고, 그렇지 않으면 우항의 프로퍼티를 참조한다. 위의 코드에서 좌항의 피연산자인 elem의 값이 null이므로 value는 undefined를 반환한다.

 

또 다른 경우를 보자.

var str = '';
var length = str && str.length;

console.log(length); // ''

-----------------------------------

var str = '';
var length = str?.length;

console.log(length); // 0

첫번째 경우는 단축 평가, 두번째 경우는 옵셔널 체이닝 연산자를 사용했다. 단축 평가에서 논리곱 연산자( && )는 앞의 값이 true이면 뒤의 값을, false이면 앞의 값을 반환한다. 위의 경우에서 앞의 값인 str은 ''이고, 이는 falsy한 값이므로 앞의 값을 반환한다. 따라서 ''가 출력되는 것이다. 옵셔널 체이닝 연산자는 좌항의 피연산자가 null이거나 undefined이면 undefined를 반환하는데, ''는 그렇지 않으므로 우항의 프로퍼티를 참조하게 된다. 따라서 비어있는 문자열의 length를 출력하게 되므로 0이 출력된다.

---

null 병합 연산자

null 병합 연산자는 ??로 표시한다. 좌항의 피연산자가 null 또는 undefined인 경우 우항의 피연산자를 반환하고, 그렇지 않다면 좌항의 피연산자를 반환한다. 아래의 예시를 통해 확인 가능하다.

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

var fruit = 'apple' ?? 'default';
console.log(fruit); // apple

null 병합 연산자 ??는 변수에 기본값을 설정할 때 유용하다. ??가 없을 때에는 논리 연산자 ||를 사용한 단축 평가를 통해서 기본값을 설정했다. 좌항에 false로 평가되는 falsy한 값을 넣고, 우항에 기본값을 설정한다. 아래와 같이 말이다.

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

그러나 경우에 따라서 기본값을 0으로 설정해야 할 수도 있다. 이때는 위처럼 동작하면 안 된다. ||를 사용한 단축 평가는 이런 경우에 부적합하다. 그러나 null 병합 연산자 ??는 좌항의 피연산자가 null 또는 undefined만 아니라면 좌항의 피연산자를 반환하기 때문에 위의 경우에도 원하는 결과를 얻을 수 있다.\

var test = 0 ?? 'default';
console.log(test); // 0