[JavaScript] ??와 || 의 차이

JavaScript로 개발하다보면 값의 결정을 내려야 하는 경우가 있다. 

const getValue = () => {
  return value ? value : ""
}

다음과 같이 value의 값이 있을 때 value 없을 때 다른 값을 넘기는 경우이다. 

 

이때 예시와 같이 삼항 연산자를 사용할 수 있다. 

하지만 다른 방법으로는 제목처럼 || 또는 ?? 를 사용할 수 있다. 

 

지금까지는 그냥 손이 가는데로 사용했지만 이 둘의 차이가 뭘까? 

 

|| 연산자 

먼저 || 연산자는 논리 OR 연산자이다. 

왼쪽의 피연산자가 truthy인 경우 왼쪽 피연산자를 반환하고 아니라면 오른쪽 피연산자를 반환한다. 

 

truthy라는 것은 뭘까? 

이것은 조건식에서 true로 간주되는 모든 값을 의미한다. 

 

대표적인 truthy 값으론 다음과 같이 있다. 

▶ true 

▶ 숫자형 값 중 0을 제외한 모든 값

▶ 문자형 값 중에서 ""(빈 문자열) 를 제외한 모든 값

▶ 객체 타입의 값

▶ 배열 타입의 값 ( 빈 배열도 truthy 값이다 )

▶ 함수 타입의 값

 

반대로 falsy 값으론 false, null, undefined, 0, NaN, "" ( 빈 문자열 ) 이 있다. 

 

?? 연산자 

?? 연산자는 nullish coalescing 연산자라고 한다. 

왼쪽 피연산자가 null 또는 undefined 인 경우에만 오른쪽 피연산자의 값을 반환하고, 그렇지 않다면 왼쪽 피연산자의 

값을 반환한다. 

 

정리 

결국 그래서 어떤 경우에 뭘 사용하는 게 좋을까? 

nullish 한 값이나 undefined를 허용하지 않는 경우에는 ?? 를 사용하는 것이 좋다. 

const obj = {
  name: 'John',
  age: null,
  address: undefined
};

const name = obj.name ?? 'Unknown';
const age = obj.age ?? 18;
const address = obj.address ?? 'Unknown';

console.log(name);     // "John"
console.log(age);      // 18
console.log(address);  // "Unknown"

 

반면에 truthy 값을 검사하고 기본값을 설정할 때는 || 연산자를 사용하는 것이 좋다. 

예를 들어, 변수가 비어있을 때 기본값을 설정할 때는 || 연산자를 사용하는 것이좋다. 

let username = '';
let displayName = username || 'Guest';

console.log(displayName); // "Guest"

 

물론 그렇다고 반드시 이것을 지키면서 해야할 필요는 없다고 생각한다. 

단지, 용도가 무엇인지 알고 사용하면 좋은 것이 아닐까?