nullish coalescing 연산자로 널 참조 방지하기

널 병합 연산자(nullish coalescing operator)는 null 또는 undefined 값을 처리하기 위해 ES6에서 새롭게 등장한 문법입니다.

사용 방법

// ??을 기준으로 왼쪽 값이 null 또는 undefined라면 오른쪽 값이 대신 할당됩니다. 
const value = null ?? "Default value";

널 병합 연산자를 사용하면 변수에 대입되는 값이 null 또는 undefined일 경우에 대신 대입할 값을 지정할 수 있습니다.

(※ 리액트를 경험해보신 분들이라면, 리액트의 defaultProps 와 동일한 역할을 한다고 생각하시면 편합니다!)

 

널 병합 연산자를 사용하지 않을 때를 예로 들어 보겠습니다.

let student = null;

setTimeout(() => {
  student = { name: "찬민" };
  console.log(student.name);
}, 10000);

console.log(student.name); // Error!!

student 변수는 null로 초기화되어 있고, 10초가 지나야만 {name: "찬민"} 형태의 객체가 할당됩니다.

따라서 10초 전에 student의 프로퍼티에 접근하려 하면 오류를 출력할 수밖에 없습니다.

 

실제 프론트엔드 개발을 하다 보면 비동기적으로 데이터를 불러오는 경우가 대다수인데, 이때 가장 저지르기 쉬운 실수 중 하나가 바로 데이터를 불러오기 전에 접근해 null 값을 참조하게 되는 것입니다. 

 

위의 코드를 널 병합 연산자를 활용해 고쳐보겠습니다.

// 널 병합 연산자 사용
let student = null ?? { name: "" };

setTimeout(() => {
  student = { name: "찬민" };
  console.log(student.name); // 10초 후에 "찬민" 출력
}, 10000);

console.log(student.name); // ""

첫 번째 줄에서 널 병합 연산자를 사용했는데요, 따라서 student 변수는 null 대신 {name:  ""} 객체로 초기화됩니다.

따라서 가장 아랫줄의 출력에서도 오류가 발생하지 않고 코드가 잘 동작하는 것을 확인할 수 있습니다.

📝 정리

널 병합 연산자는 일종의 "안전장치" 라고 생각하시면 편합니다.

null 또는 undefined 값이 들어갈 수 있는 여지가 있는 변수라면 ?? 뒤에 대신 대입할 값을 적어줌으로써 변수에 null 또는 undefined가 할당되지 않도록 보장할 수 있습니다.

let student = null ?? { name: "" };

널 병합 연산자는 주로 비동기로 데이터를 불러올 때 초기화되지 않은 변수를 참조하는 문제를 해결하는데 유용한데요, 이밖에도 한 가지 도구가 더 있습니다. 바로 옵셔널 체이닝 연산자로, 이는 다음 시간에 소개하도록 하겠습니다. 😁