[JavaScript] 단축 평가 (논리 연산자 ||, && / null 병합 연산자 ?? /옵셔널 체이닝 ?)

이 글은 '모던 자바스크립트 Deep Dive' 내용을 발췌한 글입니다.

 

논리 연산자를 사용한 단축 평가

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

 

논리곱 (&&) 연산자

> 논리곱 연산자는 두 개의 피연산자가 모두 true로 평가될 때 true를 반환

> 논리곱 연산자는 좌항에서 우항으로 평가가 진행

'One' && 'Two'

첫 번째 피연산자 'One'은 Truthy 값이므로 true로 평가된다. 하지만 이 시점까지는 위 표현식을 평가할 수 없다. 두 번째 피연산자까지 평가해야 위 표현식을 평가할 수 있다. 즉, 두 번째 피연산자가 위 논리곱 연산자 표현식의 평가 결과를 결정한다. 이때 논리곱 연산자는 논리 연산의 결과를 결정하는 두 번째 피연산자, 즉 문자열 'Two'를 그대로 반환한다.

 

논리합 (||) 연산자

> 논리합 연산자는 두 개의 피연산자 중 하나만 true로 평가되어도 true를 반환

> 논리합 연산자도 좌항에서 우항으로 평가가 진행된다.

'One' || 'Two'

첫 번째 피연산자 'One'은 Truthy 값이므로 true로 평가된다. 이 시점에 두 번째 피연산자까지 평가해보지 않아도 위 표현식을 평가할 수 있다. 이때 논리합 연산자는 논리 연산의 결과를 결정한 첫 번째 피연산자, 즉 문자열 'One'를 그대로 반환한다.

 

이처럼 논리곱(&&)또는 논리합(||) 연산자는 논리 연산의 결과를 결정하는 피연산자를 타입 변환하지 않고 그대로 반환한다.

이를 단축 평가(short-circuit evaluation)라 한다.

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

 

단축 평가 규칙

단축 평가 표현식	평가 결과
true || anything	true
false || anything	anything
true && anything	anything
false && anything	false

 

if문 대체

어떤 조건이 Truthy값 일 때 무언가를 해야 한다면 논리곱(&&) 연산자 표현식으로 if문 대체 가능

const print = true;
let animal = '';

if (print) {
  animal = '🐶';
}

// 위의 if 문은 단축 평가로 대체해서 작성할 수 있다.
// print가 ture이면 animal에 '🐶' 할당
animal = print && '🐶';
console.log(animal); // 🐶

 

어떤 조건이 Falsy값 일 때 무엇을 해야 한다면 논리합(||) 연산자 표현식으로 if문 대체 가능

const print = false;
let animal = '';

if (!print) {
  animal = '🐱';
}

// 위의 if 문은 단축 평가로 대체해서 작성할 수 있다.
// print가 false이면 animal에 '🐱' 할당
animal = print || '🐱';
console.log(animal); // 🐱

 

삼항 조건 연산자 (Ternary Operator)

// if ... else 삼항 조건 연산자로 대체하기
const print = true;
let animal = '';

if (print) {
  animal = '🐶';
} else {
  animal = '🐱';
}
console.log(animal); // 🐱

// 삼항 조건 연산자로 대체
animal = print ? '🐶' : '🐱';
console.log(animal); // 🐶

 

객체를 가리키기를 기대하는 변수가 null 또는 undefined가 아닌지 확인하고 프로퍼티를 참조할 때

객체는 key와 value로 구성된 property의 집합. 만약 객체를 가리키기를 기대하는 변수의 값이 객체가 아니라 null 또는 undefined인 경우 객체의 property를 참조하면 type error가 발생한다. (에러 발생 시 프로그램 강제 종료)

const $div = null;
const value = $div.value; // TypeError: Cannot read property 'value' of null;

이때 단축 평가를 사용할 수 있다.

const $div = null;
// $div가 Falsy 값이면 $div로 평가되고,
// $div가 Truthy 값이면 $div.value로 평가
const value = $div && $div.value; // null

 

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

함수를 호출할 때 인수를 전달하지 않으면 매개변수에는 undefined가 할당. 단축 평가를 사용하여 매개변수의 기본값을 설정하면 undefined로 인해 발생할 수 있는 에러를 방지할 수 있다.

function getString(arr) {
	arr = arr || [];
    return arr.join('');
}

getString(); // ''
getString([1, 2, 3]); // 123

// ES6에 추가된 defult parameter
function getString(arr = []) {
    return arr.join('');
}

getString(); // ''
getString([1, 2, 3]); // 123

---

null 병합 연산자 (Nullish coalescing operator)

ES11(ECMAScript2020)에 도입된 Nullish coalescing operator ??는 좌항의 피연산자가 null 또는 undefined인 경우 우항의 피연산자를 반환하고, 그렇지 않으면 좌항의 피연산자를 반환한다.

> null 병합 연산자는 변수에 기본값을 설정할 때 유리

// 좌항의 피연산자가 null or undefined이면
// 우항의 피연산자 반환.
// 그렇지 않으면 좌항의 피연산자 반환.
const str = null ?? 'default';
console.log(str); // "default"

null 병합 연산자가 도입되기 이전에는 논리 연산자 ||를 사용한 단축 평가를 통해 변수에 기본값을 설정했다. 논리 연산자 ||를 사용한 단축 평가의 경우 좌항이 false로 평가되는 Falsy값이면 우항의 피연산자를 반환한다. 0이나 ''도 기본값으로 유효하다면 예기치 않은 동작이 발생할 수 있다.

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

 

---

옵셔널 체이닝 연산자

(해당 글에서 optional chaining 파트)

https://developerntraveler.tistory.com/116

[JavaScript] Method Chaining (메서드 체이닝)