JavaScript 단축 평가

---

단축 평가

단축평가란, 평가 결과가 확정된 경우 나머지 평가 과정을 생략하는 것이다.

let a = 4;
let b = 2;
if( a > 3 || b > 5 || c > 5 || d > 2 || ...) {
    console.log('hi');
}

다음과 같은 조건식이 있다고 해보자. 논리합(||)은 둘 중 하나만 맞으면 true를 반환한다. 자바스크립트 엔진은 조건을 먼저 본다. 먼저 (a > 3) 봤더니 true를 반환하고 조건이 성립된다. 그러면 뒤에 나오는 (b > 5)가 true이든 false이든 log를 찍는다. 그렇기에 자바스크립트 엔진은 뒤의 조건을 true인지 false인지 아예 검증해보지도 않는다. 검증 과정이 단축되었다.

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

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

'Cat' || 'Dog' // 'Cat'
false || 'Dog' // 'Dog' 
'Cat' || false // 'Cat'

'Cat' && 'Dog' // 'Dog'
false && 'Dog' // false
'Cat' && false // false

Truthy 값일 때 논리곱을 사용하여 if문을 대체할 수 있다.

let done = true;
let message = '';
if(done) message = '완료';

// if문 대신 단축평가로 사용할 경우
message = done && '완료'
consolo.log(message); //완료

message = done && '완료'를 살펴보자. done은 '완료'와 논리곱(&&, and)로 이어져있다. 즉, 두 가지 조건 다 true일 때만 실행된다. 자바스크립트 엔진은 done을 true로 인지했으니 다음 '완료'로 넘어간다. 당연히 true다. 앞서 봤던대로 논리곱 연산자는 논리 연산의 결과를 결정하는 피연산자를 타입 반환하지 않고 그대로 반환한다. 즉 message = '완료'가 된다.

Falsy 값일 때 논리합을 사용하여 if문을 대체할 수 있다

let done = false;
let message = '';

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

// if문 대신 단축평가로 사용할 경우
message = done || '미완료'
consooe.log(message); // 미완료

단축평가가 유용한 상황

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

let elem = null;
let value = elem.value // TypeError

// 단축평가 사용
let elem = null;
let value = elem && elem.value; // -> null

객체가 아닌 null 또는 undefined인 경우, 프로퍼티를 참조하려고 하면 타입에러가 발생된다. 아무것도 없는 것에서 값을 꺼내려고 하니 에러가 발생할 수 밖에; 까딱 잘못하면 잘 돌아가는 프로그램 멈추는 불상사가 발생할 수 있다.
단축평가를 사용하면? elem이 null이나 undefined와 같은 Falsy 값이면 elem으로 평가되고 elem이 Truthy값이면 elem.value로 평가된다.

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

function getString(str){
    str = str || ''; // 매개변수 기본값 설정 
      return str.length;
}
getString() // 0 -> 매개변수에 빈문자열이 할당되어 length는 0
getString('test') // 4 -> 매개변수에 test가 할당되어 length는 4


// es6의 매개변수 기본값 설정
function getString(str = ''){
    return str.length;
}
getString(); // 0
getString('test'); // 4

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

---