[Javascript/Typescript] 논리 연산자 (‘&&’, ‘||’), nullish 병합 연산자 (‘??’)

⚡ 논리 연산자 ‘&&’, ‘||’

---

📌 단축평가

console.log("aaa" || "bbb") // "aaa" 
console.log("aaa" && "bbb") // "bbb"

논리 연산자는 왼쪽부터 오른쪽으로 평가가 이루어지는데, 중간에 평가 결과가 나오면 형 변환 없이 피연산자를 그대로 반환합니다.

즉, 논리적으로 값이 참인지 거짓인지 판단만 하고, 연산자에 따라 값을 타입 그대로 반환합니다.

 

console.log(true && "aaa") // "aaa" 
console.log(false && "aaa") // false

&&(AND) 연산자의 경우 앞선 값이 거짓이면 바로 반환, 참이면 뒤따른 값을 반환합니다.

 

console.log(true || "aaa") // true 
console.log(false || "aaa") // "aaa"

||(OR) 연산자는 앞선 값이 참이면 바로 반환, 거짓이면 뒤따른 값을 반환합니다.

 

그런데 여기서 boolean type 뿐만 아니라 특정 값들은 연산 과정의 추론 중 boolean 처럼 판단되어집니다.

 

📌 거짓 같은 값, Falsy

자바스크립트는 특정 상황에서 형 변환을 이용해 특정 값을 boolean 처럼 판단합니다.

falsy는 이러한 상황에서 false로 평가되는 값입니다.

다음 코드의 falsy값들은 조건문 안에서 false로 판단되어 실행되지 않고, 위에서 살펴본 논리 연산자에서 또한 false 처럼 평가됩니다.

if (false) 
if (null) 
if (undefined) 
if (0) 
if (NaN) 
if ("")

Falsy로 정의된 값이 아니면 모두 참 같은 값(Truthy)으로 평가됩니다.

 

 

⚡ nullish 병합 연산자 ‘??’

---

nullish 병합 연산자는 여러 피연산자 중 값이 확정되어 있는 변수를 찾습니다.

??는 ||과 사용 목적이 비슷하지만 평가 방법에서 차이가 있습니다.

||는 falsy 값을 만나면 다음 평가를 진행하지만, ??는 null, undefined 값에만 다음 평가를 진행합니다.

console.log(0 || "aaa") // "aaa" 
console.log(0 ?? "aaa") // 0  
console.log("" || "aaa") // "aaa" 
console.log("" ?? "aaa") // ""  
console.log(null || undefined || "aaa") // "aaa" 
console.log(null ?? undefined ?? "aaa") // "aaa"

위 코드와 같이 ?? 는 0과 빈 문자열등 falsy에 대해서는 ||와 다른 결과를 보여주기 때문에 무분별하게 사용한다면 예상치 못한 결과가 나올 수 있습니다.

 

 

⚡ 주로 사용하는 방법

---

비동기적으로 데이터를 초기화해줄 때 적절한 조치를 취하지 못하면 다음과 같은 에러가 발생합니다.

Uncaught TypeError: Cannot read property 'xxx' of undefined

이는 초기화되지 않은 객체의 프로퍼티를 참조했기 때문입니다.

const a = undefined; const b = a ?? 'newValue' const c = a || 'newValue'

자바스크립트에서 초기화 되지 않아 값이 할당되지 않으면 undefined 상태이기 때문에 위에서 살펴본 연산자들로 적절하게 초기 값을 설정해주던가, 리액트의 경우 조건부 렌더링을 통해 UI를 안전하게 업데이트 할 수 있습니다.