[모던 자바스크립트 Deep Dive] 9장. 타입 변환과 단축 평가2 (단축 평가)

9.4. 단축 평가

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

논리합(||) 또는 논리곱(&&) 연산자 표현식의 평가 결과는 불리언 값이 아닐 수도 있다.
논리합(||) 또는 논리곱(&&) 연산자 표현식은 언제나 2개의 피연산자 중 어느 한쪽으로 평가된다.
-7.5. 논리연산자 파트-

논리곱 연산자

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

논리곱 연산자는 두 개의 피연산자가 모두 true로 평가될 때 true를 반환한다. 또한 논리곱 연산자의 평가 진행 방향은 왼쪽에서 오른쪽이다.

위 예제의 경우 첫번재 피연산자 'Cat'은 Truthy 값이므로 true로 평가된다. 따라서 최종 평가 결과를 내리기 위해서는 두 번째 피연산자까지 평가해 보아야 한다. (=두 번째 피연산자가 위 예제의 평가 결과를 결정한다.) 이때 논리곱 연산자는 논리 연산의 결과를 결정하는 두 번째 피연산자('Dog')를 그대로 반환한다.

 

논리합 연산자

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

논리합 연산자는 두 피연산자 중 하나만 true로 평가되어도 true를 반환한다. 논리합 연산자 역시 평가 진행 방향이 왼쪽에서 오른쪽이다.

위 예제의 경우 첫번재 피연산자 'Cat'은 Truthy 값이므로 true로 평가되며, 이 시점에 두 번째 피연산자까지 평가해 보지 않아도 위 표현식을 평가할 수 있다. 이때 논리합 연산자는 논리 연산의 결과를 결정한 첫 번째 피연산자('Cat')를 반환한다.

 

✅ 단축평가

• 표현식을 평가하는 도중에 평가 결과가 확정된 경우 나머지 평가 과정을 생략하는 것
• 위의 예처럼 논리곱 연산자와 논리합 연산자가 논리 연산의 결과를 결정하는 피연산자를 타입 변환하지 않고 그대로 반환하는 일

❗❗ 단축 평가가 유용하게 사용되는 상황

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

var elem = null;
var value = elem.value; //타입에러 발생

객체를 가리키기를 기대하는 변수 값이 null 또는 undefined라면 객체의 프로퍼티를 참조할 때 타입에러가 발생한다.

이때 단축평가를 사용하면 에러가 발생하지 않는다.

var elem = null;
var value = elem && elem.value; 
value;  //null

 

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

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

//단축 평가를 사용한 매개변수의 기본값 설정
function getStringLength(str) {
  str = str || "";
  return str.length;
}

getStringLength(); //0
getStringLength('hi'); //2

//ES6의 매개변수 기본값 설정
function getStringLength(str = "") {
  return str.length;
}

getStringLength(); //0
getStringLength('hi'); //2

 

 

9.4.2. 옵셔널 체이닝 연산자 (?.)

• ES11에서 도입
• 좌항의 피연산자가 null 또는 undefined인 경우 undefined를 반환
• 그렇지 않으면 우항의 프로퍼티 참조를 이어간다.

var elem = null;
var value = elem?.value;
console.log(value); //undefined

옵셔널 체이닝 연산자 ?.는 객체를 가리키기를 기대하는 변수가 null 또는 undefined가 아닌지 확인하고 프로퍼티를 참조할 때 유용하다.

 

옵셔널 체이닝 연산자가 도입되기 이전에는 아래 코드처럼 논리 연산자 &&를 사용한 단축 평가를 통해 변수가 null 또는 undefined인지 확인했다.

var elem = null;

//elem가 Falsy값이면 elem으로 평가되고, elem이 Truthy 값이면 elem.value로 평가된다.
var value = elem && elem.value; 
console.log(value);  //null

논리 연산자 &&는 좌항 피연산자가 false로 평가되는 Falsy값이면 좌항 피연산자를 그대로 반환한다.

좌항 피연산자가 Falsy 값인 0이나 ''인 경우도 마찬가지다. (0이나 ''은 객체로 평가될 때도 있다.)

var str = "";

//문자열의 길이를 참조한다.
var value = str && str.length;

//문자열의 길이를 참조하지 못한다.
console.log(value); //''

 

하지만 옵셔널 체이닝 연산자는 좌항 피연산자가 Falsy값이라도 nll 또는 undefined가 아니면 우항의 프로퍼티 참조를 이어간다.

var str = "";
var value = str?.length;
console.log(value); //0

 

 

9.4.3. null 병합 연산자 (??)

• ES11에서 도입
• 좌항의 피연산자가 null 또는 undefined인 경우 우항의 피연산자를 반환
• 그렇지 않으면 좌항의 피연산자를 반환
• 변수에 기본값을 설정할 때 유용

var foo = null ?? "string";
console.log(foo); //string

 

null병합 연산자가 도입되기 이전에는 논리 연산자(||)를 사용한 단축 평가를 통해 변수에 기본값을 설정했다.

논리 연산자를 사용한 단축 평가의 경우 좌항의 피연산자가 Falsy값이면 우항의 피연산자를 반환한다. 

만약 Falsy 값인 0이나 ''도 기본값으로서 유효하다면 예기치 않은 동작이 발생할 수 있다.

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

 

하지만 null 병합 연산자는 좌항의 피연산자가 Falsy값이라도 null 또는 undefined가 아니면 좌항의 피연산자를 그대로 반환한다.

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

 

---

출처: 모던 자바스크립트 Deep Dive (이웅모 저, 위키북스)