09장 단축 평가

단축 평가

단축 평가란 표현식을 평가하는 도중에 평가 결과가 확정된 경우 나머지 평가 과정을 생략하는 것을 말한다. 즉, 논리 연산의 결과를 결정하는 피연산자를 타입 변환하지 않고 그대로 반환하는 것이다.

단축 평가는 다음과 같은 규칙이 있다.

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

또한 단축 평가를 사용하면 if문을 대체할 수 있다. if-else문을 단축 평가 할때는 삼항 조건 연산자를 사용하면 된다.

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

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

논리곱 연산자

논리곱(&&) 연산자는 두개의 피연산자가 모두 true일 때 true값을 반환하며 좌항에서 우항으로 평가를 진행한다. 따라서 첫번째 피연산자 값이 true 일지라도 두번째 피연산자까지 평가를 해야 표현식을 평가할 수 있다.

즉 논리곱 연산자는 논리연산의 결과를 두번째 피연산자가 결정한다.

'kim' && 'park'  //"park"
false && 'park'  //false
'kim' && false  //false

단축 평가를 사용하면 if문을 대체할 수 있다. 어떤 조건이 Truthy값 일때 코드 블럭을 수행해야 한다면 논리곱 연산자 표현식으로 if문을 대체 가능하다.

var flag = 'true';
var message = '';

//if문 사용 했을 때
if(flag) message = '완료';
//if문 단축평가 했을 때
message = flag && '완료';
console.log(message);  //"완료"

논리합 연산자

논리합(||) 연산자는 두개의 피연산자 중 하나만 true여도 true값을 반환하며 좌항에서 우항으로 평가를 진행한다. 따라서 첫번째 피연산자 값이 true이면 두번째 피연산자까지 평가해보지 않아도 표현식을 평가할 수 있다.

즉 논리합 연산자는 논리연산의 결과를 첫번째 피연산자가 결정한다.

'kim' || 'park'  //"kim"
false || 'park'  //"park"
'kim' || false  //"kim"

단축 평가를 사용하면 if문을 대체할 수 있다. 어떤 조건이 Falsy값 일때 코드 블럭을 수행해야 한다면 논리합 연산자 표현식으로 if문을 대체 가능하다.

var flag = 'false';
var message = '';

//if문 사용 했을 때
if(!flag) message = '미완료';
//if문 단축평가 했을 때
message = flag || '미완료';
console.log(message);  //"미완료"

삼항 조건 연산자를 사용햐여 if-else문을 단축평가 하면 다음과 같다.

var flag = 'true';
var message = '';

//if-else문 사용 했을 때
if(flag) message = '완료';
else message = '미완료';
console.log(message);  //"완료"

//if-else문 단축평가 했을 때
message = flag ? '완료' : '미완료';
console.log(message);  //"완료"

논리 연산자 단축평가가 유용할 때

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

객체는 기와 값으로 구성된 프로퍼티의 집합을 말한다. 객체를 가리키기를 기대하는 변수 값이 객체가 아닌 null 혹은 undefined인 경우 객체의 프로퍼티를 참조하면 타입 에러가 발생한다. 이때 단축평가를 사용하면 에러를 발생시키지 않는다.

var temp = null;
var value = temp.value;  //TypeError: Cannot read property 'value' of null
var value2 = temp && temp.value;  //null

객체를 가리키기를 기대하는 변수가 null 혹은 undefined와 같이 Falsy 값이면 변수값 대로 평가되고, Truthy 값이면 객체의 프로퍼티 값으로 평가된다.

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

함수를 호출할 때 인수를 전달하지 않으면 매개변수에 undefined가 할당된다. 이때 단축평가를 사용하면 undefined로 인해 발생하는 에러를 발생시키지 않는다.

function get_StringLength(str){
  str = str || '';
  return str.length;
}

get_StringLength();  //0
get_StringLength('kim');  //3

함수의 매개변수에 기본값을 설정하는 방법은 ES6의 기본값 설정하는 방식을 통해서 설정할 수도 있다.

function get_StringLength(str = ''){
  return str.length;
}

get_StringLength();  //0
get_StringLength('kim');  //3

옵셔널 체이닝 연산자

옵셔널 체이닝 연산자(?.)는 좌항의 피연산자가 null 혹은 undefined인 경우 undefined를 반환하고, 그렇지 않으면 우항의 프로퍼티 참조를 이어간다.

옵셔널 체이닝 연산자는 객체를 가리키기를 기대하는 변수가 null 혹은 undefined인지 확인하고 프로퍼티를 참조할 때 유용하다. 옵셔널 체이닝 연산자 도입 이전에는 논리곱 연산자를 이용한 단축평가를 사용하였다.

var temp = null;
var value = temp && temp.value;  //null
var value2 = temp?.value;  //undefined

논리곱 연산자를 사용하여 단축 평가를 수행하면 좌항 연산자가 Falsy값일때 좌항 피연산자를 그대로 반환한다. 하지만 Falsy값인 0이나 ''인 경우는 객체로 평가될 때가 있다.

var str = '';
var value = str && str.length;  //''
var value2 = str?.length;  //0

이때 옵셔널 체이닝 연산자를 사용하면 Falsy값이라도 null 혹은 undefined가 아니면 우항의 프로퍼티 참조를 이어가기 때문에 0이나 ''가 객체로 평가될 경우를 고려할 수 있다.

null 병합 연산자

null 병합 연산자(??)는 좌항의 피연산자가 null 또는 undefined인 경우 우항의 피연산자를 반환하고, 그렇지 않으면 좌항의 피연산자를 반환한다.

null 병합 연산자의 경우 변수에 기본값을 설정할 때 유용하다. null 병합 연산자 도입 이전에는 논리합 연산자를 이용한 단축평가를 사용하였다.

var str = null || 'kim';  
console.log(str);  //"kim"
var str2 = null ?? 'kim';
console.log(str2);  //"kim"
 

논리합 연산자를 사용하여 단축 평가를 수행하면 좌항 연산자가 Falsy값일때 우항 피연산자를 그대로 반환한다. 하지만 Falsy값인 0이나 ''인 경우는 기본값으로서 유효할 수 있다.

var str = '' || 'kim';  
console.log(str);  //"kim"
var str2 = '' ?? 'kim';  
console.log(str2);  //""
 

이때 null 병합 연산자를 사용하면 Falsy값이라도 null 혹은 undefined가 아니면 좌항의 피연산자를 그대로 반환하기 때문에 0이나 ''가 기본값인 경우를 고려할 수 있다.

📔출처
위키북스 - 모던 자바스크립트 Deep Dive
https://wikibook.co.kr/mjs/