✅ 논리연산자

일단 논리연산자에 대해 기본적으로 알아야 단축평가가 무엇인지 배울 수 있기 때문에 각 논리연산자의 특징들에 대해 간략하게 알고 넘어가야한다.
자바스크립트 논리연산자는 ||(논리합, OR), &&(논리곱, AND), !(부정, NOT)이 있다. 논리 부정 연산자 (!)는 하나의 피연산자를 불리언 값으로 반환한다. 그러나 피연산자가 꼭 불리언 값일 필요는 없는데 불리언 값이 아닐 경우 불리언타입으로 암묵적 타입 변환이 되어 논리 연산이 되기 때문이다.

!1 // false

논리합 (||) 또는 논리곱 (&&) 연산자도 논리부정(!)과 마찬가지로 불리언 값들을 논리 연산하여 값을 반환한다. 그러나 이들은 불리언 값이 아닌 값들을 평가할 수도 있고, 불리언 값이 아닌 값을 반환할 수도 있다. 일단 논리합과 논리곱은 무조건 피연산자 중 어느 한쪽으로 평가된다는 사실만 기억하고 넘어가보자.

✅ Truthy와 Falsy

자바스크립트에서는 불리언 값으로 평가해야 하는 상황에서 불리언 값이 아닌 NaN, Null, 3, ‘0’ 등도 불리언으로 암묵적으로 타입 변환해 평가한다. 조건문의 조건식, 논리 연산 시의 피연산자 등과 같은 상황에서 불리언이 아닌 값들도 불리언으로 평가된다.

true로 변환되냐 false로 변환되냐에 따라서 Truthy 값, Falsy 값으로 구분한다. 아래는 false로 평가되는 Falsy 값이다. 아래에 포함되지 않으면 모두 true로 평가되는 Truthy 값이다.

• false
• undefined
• null
• 0, -0
• NaN
• ‘’(빈문자열)

논리 연산자의 피연산자가 불리언 값이 아닌 Truthy값이나 Falsy값일 때 그 값이 실제로 true나 false로 변환되는 것이 아니라 값을 평가할 때만 변환하고 실제적으로 반환하는 값은 원래의 값을 반환한다.

true && 'Cat' // 'Cat'

Cat이 Truthy값이기 때문에 true로 변환되고, true들의 논리곱연산 결과인 true를 반환하는 것이 아니라 평가를 true로 진행하고 평가 결과는 'Cat'을 반환한다. 어떤 기준에 따라 피연산자 두개 중 하나를 반환하는 지는 바로 아래에서 알아보자.

✅ 단축평가

이제 드디어 큰 주제인 단축평가이다.
논리연산자 논리합 (||), 논리곱(&&)은 불리언이 아닌 값을 반환할 수 있고, 피연산자 중 한쪽으로 평가된다고 했던것을 상기시키며 살펴보자.

논리합(||)은 두 피연산자 중 하나만 true로 평가가 되어도 true를 반환한다. 불리언 값이 아닌 피연산자가 있는 논리합 연산에서 첫번째 피연산자가 Truthy 값이면 두번째 피연산자를 판단하지 않아도 되기 때문에 그냥 첫번째 피연산자 값이 반환된다. 만약 첫번째 피연산자가 false이면 무조건 두번째 피연산자가 반환된다.

논리곱(&&)은 두 피연산자 모두 true로 평가되어야 true를 반환한다. 따라서 첫번째 피연산자가 Truthy값이여도 두번째 피연산자를 평가해야 한다. 이때 첫번째 피연산자에 이어 두번째 피연산자도 Truthy 값이면 두번째 피연산자를 반환한다. 두 개의 피연산자 중 하나라도 Falsy 값이면 그 값을 반환한다.

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

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

단축평가의 활용

단축평가를 활용할 수 있는 곳은 다양하겠지만 이 글에서는 null이나 undefined를 다룰 수 있는 방법을 중심으로 단축평가를 활용하는 방법을 알아보도록 하겠다.

1. 객체인지 null인지 판단

객체가 나오기를 기대하는 변수가 null이나 undefined가 될 수도 있다. 이때 사용할 수 있는 방법이 단축평가이다. 아래와 같이 말이다.

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

elem이 null이나 undefined와 같은 Falsy값이면 논리곱 연산자에서는 그 값을 반환한다. 반면 객체라면 Truthy값이기 때문에 elem.value를 반환하게 될 것이다. 즉 null일 경우에는 null을 그대로 반환하고 객체일 경우에는 정상적으로 접근하게 한다.

2. 함수 매개변수의 기본값 설정

사실 ES6의 매개변수 기본값 설정 기능이 개발되면서 현재 많이 사용되는 활용은 아니지만 이런 방법이 있었음을 알기 위해서 적어본다.

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

위와 같이 함수를 선언하고 함수를 호출할 때 인수를 전달하지 않는다면 undefined 값이 할당되어 전달 될 것이다. 이 때 undefined는 Falsy 값이기 때문에 논리합 연산자에서는 두번째 피연산자 값을 반환한다. 즉 빈 문자열이 str로 반환되는 것이다. 함수 사용자가 인수를 전달하지 않는 경우 까지도 커버할 수 있는 방법이다.

✅ 옵셔널 체이닝 연산자와 null병합 연산자

사실 단축평가의 활용에서 봤던 예시 두가지는 옵셔널 체이닝 연산자, null 병합 연산자와 관련이 있다.

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

옵셔널 체이닝 연산자는 위에서 봤던 논리곱 연산자의 단축평가 활용을 대체할 가능성이 있는 연산자이다. 단축평가의 활용에서의 객체인지 null인지 판단하는 예제 코드는 아래와 같이 바꿀 수 있을 지도 모른다.

//before
var elem;
var value=elem&&elem.value(); 

//after
var elem;
var value=elem?.value();

바꿀 수 있을 지도 모른다라고 한 이유는 옵셔널 체이닝 연산자 (?.) 가 모든 Falsy값에 대해 적용되는 것이 아니라 null과 undefined에 한해서만 기능을 하기 때문이다. 옵셔널 체이닝 연산자는 좌항의 피연산자가 null이면 null을, undefined이면 undefined를 반환하고 그렇지 않으면 참조를 이어나가는 연산자이다. 객체를 가리키기 기대하는 변수의 null과 undefined 여부를 판단하기에 좋은 기능이다.

null병합 연산자(??)

null병합 연산(??)는 좌항의 피연산자가 null 이나 undefined면 우항을 반환하고 그렇지 않다면 좌항을 반환한다. 다음처럼 말이다.

var value1=null;
var str1= value1 ?? 'default string'; 
console.log(str1); // default string

var value2='this is string';
var str2=value2 ?? 'default string';
console.log(str2); // this is string

위의 value1이 null이니까 null병합 연산자에 따라 우항인 ‘default string’이 반환된다. 반면 그 아래의 예시에서는 value2가 null이나 undefined가 아니다. 따라서 value2의 값이 그대로 str2로 넘겨진다.

null병합 연산자도 옵셔널 체이닝 연산자와 비슷하게 모든 Falsy값이 아니라 null과 undefined에 한해서 기준을 마련했다는 것이 특징이다.

---

출처

모던 자바스크립트 Deep Dive