단축평가란

표현식 평가 도중 평가 결과가 확정된 경우 나머지 평가 과정을 생략한다는 뜻이다. Javascript말고 다른 언어에서도 대부분 적용된다.

대부분의 코드가 좌항->우항 순서로 평가된다는 것을 전제로 한다.

논리곱에서 단축 평가

a and b
a && b

둘 다 true면 참을, 둘 중 하나라도 false면 false가 반환될 것이다.

그렇다면 a가 false면 b가 무엇이든 무조건 false일 것이다. 그러니까 &&의 앞부분, 우항, a가 true면 바로 a를 반환한다.

그렇다면 a가 true면 결과는 b가 true인지 false인지에 따라 결정이 된다. 그러니까 &&의 앞부분, 우항, a가 false면 바로 b를 반환한다.

Javascript에서

String에 뭐가 들어있기만 하다면, Javascript는 truthy로 평가할 것이다. 그러면 아래 코드는 무슨 값을 반환할까?

'Cat'&&'Dog'

'Cat'이다. 앞 부분의 'Cat'이 truthy로 평가되어 'Dog'는 값에 영향을 끼치지 못한다고 생각하고 단축해 무조건 앞부분을 반환하기 때문이다.

논리합에서 단축 평가

윗부분을 이해했다면, 여기도 비슷하다.

a or b
a || b

둘 중 하나라도 true면 참을 반환하고 둘 다 false일 때만 둘 다 반환한다.

그렇다면 a가 true면 b가 무엇이든 무조건 true일 것이다. 그러니까 &&의 앞부분, 우항, a가 true면 바로 a를 반환한다.

그렇다면 a가 false면 결과는 b가 true인지 false인지에 따라 결정이 된다. 그러니까 &&의 앞부분, 우항, a가 false면 바로 b를 반환한다.

Javascript에서

아까 말했듯이, 'Cat'은 truthy로 평가된다. 그러면 아래 코드는 무슨 값을 반환할까?

'Cat'||'Dog'

'Dog'이다. 앞 부분의 'Cat'이 true로 평가되어 뒷부분의 'Dog'의 값이 전체를 결정할거라고 생각하고 단축해 무조건 뒷부분을 반환하기 때문이다.

활용 방법

&&:값이 있으면 뒤의 값을 반환(연산을 이어가기)

if문 대체

done이 true면 '완료'가 message값에 들어간다.

let done=true;
const message = ''; 

if (done) message='완료';//if문
message=done&&'완료';//논리연산자 단축평가 활용

이렇게 단축 평가를 활용하여 if문을 대체할 수 있다.

null이나 undefined 프로퍼티 참조 막기

원래는 null이나 undefined의 프로퍼티 참조하면 에러가 발생한다. 논리연산자를 활용하여 에러 대신에 null과 undefined를 반환하도록 코드를 쓸 수가 있다.

var elem=null;
var value=elem.value;//에러가 남
var value=elem&&elem.value;//있으면 값 반환, 없으면 null 반환

옵셔널 체이닝 연산자

여러 값을 알아서 truthy로 평가하는 js 특성과 논리 연산자를 활용하여 논리 연산자를 이렇게 사용하는 사람들이 많아지자, ECMAScript2020부터 아예 그런 식으로 쓰라고 구문을 제공했다.
'?' 연산자이다.

var value=null;

var valueAnd=elem&&elem.value;

var valueOption=elem?.value;//optional chaining 

&&과 조금 다른 점은, &&는 '', 0이나 ''를 falsy로 평가하지 않고 객체가 존재한다고 평가하기도 한다. ?는 0이나 ''까지 무조건 false로 치고 뒷부분을 리턴한다.

var str='';

var lengtHand=str&&str.length;//''

var lengthOption=str?.length;//0

||:값이 없으면 뒤의 값을 반환(연산을 이어가기)

if문 대체

done이 false면 '미완료'가 error에 들어가는 코드이다.

let done=true;
const error = ''; 

if (!done) error='미완료';//if문
error=done||'미완료';//논리연산자 단축평가 활용

이렇게 단축 평가를 활용하여 if문을 대체할 수 있다.

default 설정

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

매개 변수에 값이 들어오지 않았다면, 뒤의 값으로 설정한다.

null 병합 연산자

옵셔널 체이닝 연산자와 마찬가지로, 여러 값을 알아서 truthy로 평가하는 js 특성과 논리 연산자를 활용하여 논리 연산자를 이렇게 사용하는 사람들이 많아지자, ECMAScript2020부터 아예 그런 식으로 쓰라고 구문을 제공했다.

'??' 연산자이다.

var foo = null || 'default string';//"default string"
var foo = null ?? 'default string';//"default string"

둘이 다른 점은, 아까 ? 반대로, ''나 0을 기본값으로 칠 수 있으므로 ''나 0을 truthy로 평가한다.

var fooOr= ''||'default string';//"default string"
var fooNull= ''??'default string';//""

참고자료

모던 자바스크립트 Deep Dive-이웅모 저
9장 타입 변환과 단축 평가