[JavaScript] 5. 단축 평가

단축 평가

단축 평가란 논리 연산자 &&와 ||를 통해 표현식을 평가하는 방법입니다.

위 두 연산자는 좌항에서 우항으로 평가가 진행되는 연산자입니다.

평가가 진행되며 결과를 도출하는 시점에 평가된 피연산자를 타입 변환없이 반환하게 됩니다.

이를 이용하여 결과가 도출되었을 때, 나머지 평가를 생략하는 것이 단축 평가입니다.

단축 평가는 아래와 같은 규칙을 따릅니다.

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

아래 if 문을 단축 평가로 대체하는 예제입니다.

var isTrue = true;
var trueResult = '';

// if (isTrue) trueResult = "if문";
trueResult = isTrue && '단축 평가';


var isFalse = false;
var falseResult = '';

// if (!isFalse) falseResult = "if문";
falseResult = isFalse || '단축 평가';

단축 평가는 다음과 같은 상황에서 유용합니다.

1. 객체의 프로퍼티를 참조하는 경우
2. 함수의 파라미터에 기본값을 설정하는 경우

1. 객체의 프로퍼티 참조

객체가 null 또는 undefined 값을 가질 때, 객체의 프로퍼티를 참조하면 타입 에러가 발생합니다.

이 경우, 객체의 타입을 검사하여 Falsy값인 경우 프로퍼티에 접근하면 타입 에러가 아닌 null 값을 가지도록 할 수 있습니다.

code>

// Error Case

var obj = null;
var value = obj.value;

// 단축 평가

var obj = null;
var value = obj && obj.value;

2. 함수의 파라미터에 기본값 설정

함수 호출 시, 파라미터를 전달하지 않으면 해당 파라미터는 undefined가 할당됩니다.

이 경우, 해당 파라미터가 전달되지 않으면 임의의 값을 할당해 undefined로 인한 에러를 방지할 수 있습니다.

code>

// Error Case

function testFunction(str) {
  return str;
}

// 단축 평가

function testFunction(str) {
  str = str || '';
  return str;
}

옵셔널 체이닝

옵셔널 체이닝 연산자 ?.는 ES11에서 추가된 연산자입니다.

좌항이 null, undefined인 경우 undefined를 반환하고 그렇지 않으면 우항의 프로퍼티를 참조합니다.

위에서 설명했던 객체의 프로퍼티 참조에 사용했던 논리 연산자는 좌항이 false, 0, '', NaN 등의 경우에도 Falsy로 인지합니다.

하지만 0, '' 등은 객체로 평가되는 경우도 있기 때문에 옵셔널 체이닝을 사용하면 해당 경우에 대한 처리가 가능합니다.

code>

var str = '';

//단축 평가
console.log(str && str.length);

//optional chaining
console.log(str?.length);

result>

''
0

null 병합 연산자

null 병합 연산자 ??도 ES11에서 추가된 연산자입니다.

좌항이 null, undefined인 경우 우항을 반환하고, 그렇지 않으면 좌항의 피연산자를 반환합니다.

옵셔널 체이닝과 마찬가지로 0, '' 등에 대한 처리에 가능합니다.

위에서 설명했던 함수의 파라미터에 기본 값을 할당할 때 유용합니다.

code>

function testFunction(str) {
  str = str ?? '';
  return str;
}