널 병합 연산자 (??)

: 왼쪽 값이 null 또는 undefined일 때 오른쪽 값을 반환하고, 그렇지 않으면 왼쪽 값을 반환하는 논리 연산자

Nullish coalescing operator - MDN

const str = null ?? 'hello';
console.log(str); // 'hello'

const str = undefined ?? 'hello';
console.log(str); // 'hello'

OR 논리 연산자 (||)와 다른 점

OR 논리 연산자는 왼쪽 값이 falsy한 값일 경우 오른쪽 값을 반환한다.
falsy한 값에는 null, undefined, false, NaN, 0, '' 이 포함된다.

const score = 0 || 'no score'; // 좌항의 0이 falsy한 값이므로 우항 반환을 반환한다.
console.log(score); // 'no score'

const score = 0 ?? 'no score'; // 좌항이 null이나 undefined일 때만 우항 반환한다.
console.log(score); // 0

옵셔널 체이닝 (?.)

: . 체이닝 연산자와 유사하게 작동하지만, 만약 참조가 nullish하다면 (null이나 undefined라면) 에러가 발생하는 것 대신에 리턴값을 undefined로 읽어온다.

Optional chaining - MDN

const person = {
  name: 'Jieun',
  dog: {
    name: 'GG'
  }
}

const dogName = person.dog?.name;
console.log(dogName); // 'GG'

const catName = person.cat?.name;
console.log(catName); // undefined

// 옵셔널 체이닝을 사용하지 않았을 경우 에러가 발생한다.
console.log(person.cat.name); // ❗️Uncaught TypeError: Cannot read properties of undefined (reading 'name')

사용 예

기본값 할당

값이 undefined거나 null일 경우 기본값을 할당하도록 할 수 있다.

const value = getValueFromAPI();

const valueToBeDisplayed = value ?? "this value doesn't exist"

널 병합 연산자와 옵셔널 체이닝 함께 사용

const data = {
  text: 'Hello World',
  completed: false, 
  user: undefined
}

// Todo List에 위의 데이터를 표시하려고 한다.
// 이때, user 속성에 username이 있으면 username을 표시하고 없으면(undefined) 익명으로 표시하고 싶을 때 아래처럼 작성할 수 있다.
const userNameToDisplay = data.user?.username ?? 'anonymous user';

이때 옵셔널 체이닝을 사용하지 않았다면 아래와 같은 에러를 만났을 것이다.

Uncaught TypeError: Cannot read properties of undefined (reading 'userName')

널 할당 연산자 (??=)

널 할당 연산자는 값이 nullish한 경우 값을 할당한다.

const demoObject = {
  test1: 'Hello World 1'
}

demoObject.test2 ??= 'Hello World 2';

console.log(demoObject); // {test1: 'Hello World 1', test2: 'Hello World 2'}

사용 예

const data = {
  text: 'Hello World',
  userName: undefined
}

data.userName ??= 'anonymous user'; // userName이 undefined거나 null일 경우 'anonoymous user' 값을 할당한다.