[JavaScript] 옵셔널 체이닝 / nullish연산자(??)

옵셔널 체이닝(optional chaining)은 자바스크립트에서 속성이나 메서드를 참조할 때

해당 속성이나 메서드가 존재하지 않으면 에러를 발생시키지 않고 그냥 undefined를 반환하도록 하는 연산자입니다.

 

기존에는 속성이나 메서드를 참조할 때 해당 객체가 null이나 undefined일 경우 에러가 발생했기 때문에

이를 위해 null 체크를 작성하거나, 조건문으로 처리했지만, 옵셔널 체이닝을 사용하면 간단하게 처리 가능.

 

옵셔널 체이닝은 "?"으로 표시하며 해당 속성이나 메서드가 존재하지 않으면 undefined를 반환.

const person = {
  name: 'John',
  address: {
    city: 'Seoul',
    street: '123 Main St'
  }
}

// person 객체의 address 속성 내 city를 참조
let city = person.address.city; // 'Seoul'

/*  만약 person 객체에 address가 없는 경우 위 코드는 에러가 발생하며
	그 경우를 대비해 옵셔널 체이닝으로 작성 가능하다. 
    아래 식은 person에 address가 있으면 Seoul이 되고 없으면 undefined가 된다.
*/
let city = person.address?.city; // 'Seoul'

// 옵셔널 체이닝으로 보험을 들었다면 조건식을 추가해 플랜B를 작성하면 된다.

if (!person.address?.city) { // 왼쪽의 조건은 !undefined로 true가 된다.
  city = 'Seoul';
}

 

nullish 연산자 (??)

 

옵셔널 체이닝 ?를 연속해서 붙이면 nullish 연산자로, 피연산자가 'null 혹은 undefined'일 경우 오른쪽 피연산자를 반환.

 

위 if문을 nullish 연산자로 줄일 수 있다.

const city = person.address.city ?? 'Seoul';
console.log(city); // 'Seoul'