논리 연산자 ( Logical Operator ) 와 null 병합 연산자 ( null Coalescing Opertator )

논리 연산자

논리 연산자에는 세가지가 있다.
&&(AND연산자), ||(OR연산자), !(NOT연산자) 가 바로 그것이다.
이 세 연산자의 연산 순서는 ! -> && -> || 으로,
사칙연산의 덧셈 뺄셈과 곱셈 나눗셈의 관계 같이 적용한다.

result = value1 && value2 || !value3 && value4
result = (value1 && value2) || (!value3 && value4)
// 괄호가 없더라도 두 코드의 연산자들은 같은 순서로 평가한다.

자세히 알지는 못하고 if문 사용하면서 대충 사용하던 때에는
조건부에서 &&는 두 값이 모두 참이어야 하고, ||는 두 값중 한 값만 참이면 각각 참을 값으로 가진다 라고 생각하고 사용했다.
그냥 그런갑다 하고 사용만 했지 왜 그렇게 되는지는 모른체 사용했다는거다.

&& (AND 연산자)

우선 &&는 && 왼쪽부터 값을 평가하기 시작해서 falsy로 평가되는 값이 있으면 평가를 멈추고 거기서 falsy라고 평가한 값을 반환한다.
만약 falsy 라고 평가되는 값이 없으면 마지막 값을 반환한다.

result = value1 && value2 && value3
// 제일 왼쪽부터 평가시작
// 만약 value1, value3가 truthy이고 value2가 falsy라면 
// value2를 평가하면서 falsy를 결과 값으로 반환하고 평가를 멈춘다.
// value3은 평가도 되지 않는 것이다.

여기서 한번 더 짚고가자면 falsy 값으론 false, 0, null, undefined, NaN, ''(빈 문자열)이 있다.

|| (OR 연산자)

||도 역시 왼쪽부터 값을 평가하기 시작해서 truthy로 평가되는 값이 있으면 거기서 평가를 멈추고 truthy 값이라고 평가한 값을 반환한다.
역시 truthy 값이 없으면 마지막 값을 반환한다.

result = value1 && value2 && value3
// 제일 왼쪽부터 평가시작
// 만약 value1가 truthy이고 value2, value3가 falsy라면 
// value1를 평가하면서 true를 결과 값으로 반환하고 평가를 멈춘다.
// value2,3는 평가도 되지 않는 체로 result의 값이 true가 되는 것 이다.

! (NOT 연산자)

!는 간단하다.
!가 붙은 값을 불리언 값으로 평가하고 그 값을 역으로 적용하는 것.

result = true;
console.log(!result) // false 

// 1. 해당 값을 불리언 타입으로 평가.
// 2. 그 값을 역으로 적용.

불리언 값으로 평가하는 것을 이용해서 두번 이용하면(!!) 불리언 타입이 아닌 값을 불리언 타입으로 변환할 수 있고, 이는 boolean()와 같다.

?? ( null 병합 연산자 )

?? 는 최신의 연산자로, 빈 값(null)이 아닌 변수를 찾을 때 유용하다.
x = a ?? b 의 평가 결과는
1. a가 null도 아니고 undefined도 아니면 a,
2. 그 이외는 b
이것과 동일한 코드를 풀어내면

if(a !== null && a !== undefined){
  x = a
} else {
  x = b
}
 // 또는
x = (a !== null && a !== undefined) ? a : b

라고 할 수 있다.

보다보면 OR 연산자, ||와 굉장히 유사하다는걸 알 수 있다.
다만 매우 중요한 차이점이 있는데,

??는 처음 만나는 정의된 값을 반환하고,
||는 처음 만나는 truthy 값을 반환한다는 것이다.

예로 숫자 0 또는 ''(빈 문자열)이 포함된 값을 평가할 때 차이가 나게 되는데

result = 0 || 3 || 1 // result = 3
result = 0 ?? 3 ?? 1 // result = 0

왜냐하면 0은 정의되었지만 falsy값 이기 때문이다.
(6가지 falsy 값은 여기서 확인 할 수 있다.)

그렇기에 값으로 0 또는 빈문자열이 될 수 있는 것에 ||를 사용하면 잘못된 평가가 진행될 수 있고,
이런 이유로 되도록이면 ??를 사용하는 것이 좋다.

다만 ??를 사용할 때 주의할 점이 몇가지 있다.
1. && 연산자와 || 연산자와 함께 사용 할 수 없다.

x = 1 && 2 ?? 3 // SyntaxError: Unexpected token '??'
x = 1 && ( 2 ?? 3 ) // 2 ; 이렇게 ??에 괄호를 씌우면 정상적으로 평가한다.
x = ( 1 && 2 ) ?? 3 // 2 ; 괄호로 분리만 해주면 어디에 씌우던 정상적으로 평가한다.

2. ??의 연산자 우선순위는 대부분의 연산자 보다 낮고, 삼항 연산자 ? 와 할당 연산자 = 보다 높다.

Reference

모던 자바스크립트 - https://ko.javascript.info/
MDN - https://developer.mozilla.org/