Short-circuit evaluation 2022.03.01

단축평가

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

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

논리곱 논리합 연산자는 논리 연산의 결과를 결정하는 피연산자를 타입 변환하지 않고 그대로 반환하는데, 이를 단축 평가라 한다.
논리 연산자의 논리합과 논리곱 연산자 표현식의 평가 결과는 불리언 값이 아닐 수도 있다. 논리합 또는 논리곱 연산자 표현식은 언제나 2개의 피연산자 중 어느 한쪽으로 평가된다.

논리곱 연산자

논리곱 연산자는 두 개의 피연산자가 모두 true로 평가될 때 true를 반환한다. 고로 첫번째 피연산자가 트루로 평가될 때, 두번째 피연산자의 평가 결과가 논리곱 연산자 표현식의 평가 결과를 결정. 논리 연산의 결과를 결정하는 두 번째 피연산자를 그대로 반환한다.

'Hi' && 'Hello'
'Hello'

논리합 연산자

마찬가지의 논리로 작동한다.

0 || 'Cat'
'Cat'

if문 대체

어떤 조건이 Truthy 값일 때 무엇인가 해야한다면 논리곱 연산자로 대체 가능.

var isFinish = true;
var show;
var doneMessage = '완료';
var incompleteMessage = '미완료';

show = isFinish && doneMessage;
console.log(show);
//완료

반대로 어떤 조건이 Falsy 값일 때 무엇인가 해야한다면 논리합 연산자로 대체 가능.

show = isFinish || incompleteMessage;
console.log(show);
//미완료

사실 우 두 문은 삼항 조건 연산자로 대체 가능하다.

show = isFinish ? doneMessage : incompleteMessage;

단축 평가가 유용하게 쓰일때?

• 객체를 가르키기를 기대하는 변수가 null 또는 undefined가 아닌지 확인하고 프로퍼티를 참조할 때.
  EX)
  눌이나 언디파인의 변수값의 프로퍼티를 '참조' 하면 타입에러가 발생하고 즉 에러 발생으로 프로그램 강제 종료 된다.

var x = null;
console.log(x.value);
//Uncaught TypeError: Cannot read properties of null (reading 'value')

여기서 단축 평가를 사용하여 에러를 발생시키지 않을 수 있다.

console.log(x && x.value);
// null

x = {a:0}
console.log(x && x.a)
// 0

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

//에러 발생
function getStringLength(str) 
    {
        return str.length;
    }
console.log(getStringLength());
// Uncaught TypeError: Cannot read properties of undefined (reading 'length')

매개변수에 ''을 기본값으로 설정

function getStringLength02(str) 
    {
        str = str || '';
        return str.length;
    }
console.log(getStringLength02());
// 0

ES6의 매개변수 기본값 설정 방법

function getStringLength03(str = '') 
    {
        return str.length;
    }
console.log(getStringLength03());
// 0

Falsy 값인 0과 ''

논리 && 연산자는 좌항 피연산자가 falsy로 평가되면 좌항을 고대로 반환.

옵셔널 체이닝 연산자

ES11에 도입된 연산자 .?은 null 또는 undefined값인지 아닌지 추려내기 용이하다. 논리 && 연산자는 좌항 피연산자가 falsy로 평가되면 좌항을 고대로 반환.
그러나 옵셔널 체이닝 영산자는 좌항이 falsy 값이여도 null 또는 undefined 값이 아니라면 우항의 프로퍼티 참조를 이어간다.

null 병합 연산자

ES11에 도입된 null 병합 연산자 ??는 좌항의 피연산자가 null 또는 undefined인 경우 우항의 피연산자를 반환, 그렇지 않으면 좌항의 피연산자를 반환한다. 변수에 기본값을 설정할 때 유용하다.

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

!하지만 만일 0이나 ' '도 기본값으로서 유효하다면??

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

?? 연산자는 좌항이 null 또는 undefined이 아니라면 좌항 그대로 반환했다.