9장 : 타입 변환과 단축 평가

4. 단축 평가

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

 

논리합(||), 논리곱(&&) 연산자 표현식의 평가 결과는 불리언이 아닐 수 있다.

이는 언제나 2개의 피연산자 중 한 쪽으로 평가된다.

 

'Cat' && 'Dog' // -> "Dog"
'Cat' || 'Dog' // -> "Cat"

논리곱(&&)

cat이 truthy 함으로 Dog까지 봐야 표현식을 평가할 수 있다.

따라서 Dog가 이 표현식의 평가 결과를 결정한다.

따라서 두 번째 피연산자인 Dog를 반환한다.

 

논리합(||)

cat이 truthy 함으로 두 번째 피연산자를 보지 않아도

표현식을 평가할 수 있다.

따라서 첫 번째 피연산자인 Cat을 반환한다.

 

이처럼 논리합, 논리곱 연산자는 

논리 연산 결과를 결정하는 피연산자를 

타입 변환하지 않고, 그대로 반환한다.

이를 "단축평가"라고 한다.

 

단축 평가는 표현식을 평가하는 과정 중에 

평가 결과가 확정되는 경우 

나머지 평가 과정을 생략하는 것을 의미한다.

 

var done = true;
var message = '';

// 주어진 조건이 true일 때
if (done) message = '완료';

// if 문은 단축 평가로 대체 가능하다.
// done이 true라면 message에 '완료'를 할당
message = done && '완료';
console.log(message); // 완료

단축 평가를 사용하면 if문을 대체할 수 있다.

어떤 조건이 truthy한 값일 때 뭔가 해야한다면

논리곱 연산자 표현식으로 대체 가능하다.

var done = false;
var message = '';

// 주어진 조건이 false일 때
if (!done) message = '미완료';

// if 문은 단축 평가로 대체 가능하다.
// done이 false라면 message에 '미완료'를 할당
message = done || '미완료';
console.log(message); // 미완료

 

어떤 조건이 falsy한 값일 때 뭔가 해야한다면

논리합 연산자 표현식으로 대체 가능하다.

 

var done = true;
var message = '';

// if...else 문
if (done) message = '완료';
else      message = '미완료';
console.log(message); // 완료

// if...else 문은 삼항 조건 연산자로 대체 가능하다.
message = done ? '완료' : '미완료';
console.log(message); // 완료

삼항 조건 연산자는 if, else 대체 가능

 

객체가 null 또는 undefined가 아닌지 확인하고 프로퍼티를 참조할 때

 

var elem = null;
// elem이 null이나 undefined와 같은 Falsy 값이면 elem으로 평가되고
// elem이 Truthy 값이면 elem.value로 평가된다.
var value = elem && elem.value; // -> null

객체일 줄 알고 객체의 프로퍼티를 참조하려고 했는데, 

객체가 아니라 null, 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'); // -> 2

인수를 전달하지 않으면 매개변수에는 undefined가 할당된다.

단축 평가 사용시 , 이로 인한 에러가 발생할 가능성을 방지한다.

 

 

2) 옵셔널 체이닝

var elem = null;

// elem이 null 또는 undefined이면 undefined를 반환하고, 그렇지 않으면 우항의 프로퍼티 참조를 이어간다.
var value = elem?.value;
console.log(value); // undefined

좌항의 피연산자가

null 또는 undefined인 경우에는 undefined를 반환하고, 

그렇지 않으면 우항의 프로퍼티 참조를 이어간다.

 

이게 나오기 전에는 &&를 이용해서

객체가 null인지, undefined인지 확인하고 참조했지만

다른 점이 존재하며 

옵셔널 체이닝 연산자를 사용하는 게 좋다.

 

왜냐하면 0이나 ''은 객체로 평가될 때도 있기 때문이다.

 

&&는 좌항 피연산자가 falsy값이면 좌항의 피연산자를 그대로 반환하지만, 

옵셔널 체이닝 연산자는 falsy 값이더라도, null이나 undefined가 아니면

우항의 프로퍼티 참조를 이어간다.

 

3) null 병합 연산자

좌항의 피연산자가 null 또는 undefined인 경우

우항의 피연산자를 반환하고,

그렇지 않으면 좌항의 피연산자를 반환한다.

 

// Falsy 값인 0이나 ''도 기본값으로서 유효하다면 예기치 않은 동작이 발생할 수 있다.
var foo = '' || 'default string';
console.log(foo); // "default string"

// 좌항의 피연산자가 Falsy 값이라도 null 또는 undefined가 아니면 좌항의 피연산자를 반환한다.
var foo = '' ?? 'default string';
console.log(foo); // ""

이는 변수에 기본값을 설정할 때 유용하다.

 

이게 나오기 전에는 ||를 이용해서

기본값을 설정했지만

null 병합 연산자를 사용하는 게 좋다.

그 이유는 falsy 값인 0이나 ''을 기본값으로 사용하고 싶을 수도 있기 때문이다.

 

||는 좌항 피연산자가 falsy값이면 우항의 피연산자를 그대로 반환하지만,

null 병합 연산자는 falsy 값이더라도, null이나 undefined가 아니면

좌항의 프로퍼티 참조를 이어간다.