논리연산자, null 병합 연산자 ??

1. 첫 번째 truthy 를 찾는 OR 연산자 (||)

result = value1 || value2 || value3;

OR ||연산자는 다음 순서에 따라 연산을 수행합니다.

• 가장 왼쪽 피연산자부터 시작해 오른쪽으로 나아가며 피연산자를 평가합니다.
• 각 피연산자를 불린형으로 변환합니다. 변환 후 그 값이 true이면 연산을 멈추고 해당 피연산자의 변환 전 원래 값을 반환합니다.
• 피연산자 모두를 평가한 경우(모든 피연산자가 false로 평가되는 경우)엔 마지막 피연산자를 반환합니다.

여기서 핵심은 반환 값이 형 변환을 하지 않은 원래 값이라는 것입니다.

정리해 보자면 이렇습니다. OR "||" 연산자를 여러 개 체이닝(chaining) 하면 첫 번째 truthy를 반환합니다. 피연산자에 truthy가 하나도 없다면 마지막 피연산자를 반환합니다.

 

2. 첫 번째 falsy 를 찾는 OR 연산자 (&&)

result = value1 && value2 && value3;

AND 연산자 &&는 아래와 같은 순서로 동작합니다.

• 가장 왼쪽 피연산자부터 시작해 오른쪽으로 나아가며 피연산자를 평가합니다.
• 각 피연산자는 불린형으로 변환됩니다. 변환 후 값이 false이면 평가를 멈추고 해당 피연산자의 변환 전 원래 값을 반환합니다.
• 피연산자 모두가 평가되는 경우(모든 피연산자가 true로 평가되는 경우)엔 마지막 피연산자가 반환됩니다.

정리해 보자면 이렇습니다. AND 연산자는 첫 번째 falsy를 반환합니다. 피연산자에 falsy가 없다면 마지막 값을 반환합니다.

위 알고리즘은 OR 연산자의 알고리즘과 유사합니다. 차이점은 AND 연산자가 첫 번째 falsy를 반환하는 반면, OR은 첫 번째 truthy를 반환한다는 것입니다.

 

3. null 병합 연산자(nullish coalescing operator) ??

 

• a가 null도 아니고 undefined도 아니면 a
• 그 외의 경우는 b

let firstName = null;
let lastName = null;
let nickName = "Supercoder";

// null이나 undefined가 아닌 첫 번째 피연산자
alert(firstName ?? lastName ?? nickName ?? "Anonymous"); // Supercoder

null 병합 연산자 ??를 사용하면 피연산자 중 ‘값이 할당된’ 변수를 빠르게 찾을 수 있습니다.

??는 변수에 기본값을 할당하는 용도로 사용할 수 있습니다.

??의 연산자 우선순위는 대다수의 연산자보다 낮고 ?와 = 보다는 높습니다.

괄호 없이 ??를 ||나 &&와 함께 사용하는 것은 금지되어있습니다.

// height가 null이나 undefined인 경우, 100을 할당
height = height ?? 100;

 

4. ??와 || 의 차이

null 병합 연산자는 OR 연산자 ||와 상당히 유사해 보입니다.

실제로 위 예시에서 ??를 ||로 바꿔도 그 결과는 동일하기까지 하죠. 

 

그런데 두 연산자 사이에는 중요한 차이점이 있습니다.

• ||는 첫 번째 truthy 값을 반환합니다.
• ??는 첫 번째 정의된(defined) 값을 반환합니다.

let height = 0;

alert(height || 100); // 100
alert(height ?? 100); // 0

 

ko.javascript.info/nullish-coalescing-operator