자바스크립트에서의 Nullish Coalescing을 활용한 비동기 콜백 처리 방법

29 Sep 2023

javascript

자바스크립트에서 Nullish Coalescing 연산자 (??) 은 변수가 null 또는 undefined 인 경우, 다른 기본값을 할당하는 데 사용됩니다. 이 기능을 활용하여 비동기 콜백 처리 방법을 개선할 수 있습니다.

Nullish Coalescing 연산자 소개

Nullish Coalescing 연산자 (??) 는 왼쪽 피연산자가 null 또는 undefined 일 때 오른쪽 피연산자를 반환합니다. 기본값 할당 연산자인

와는 다르게, Nullish Coalescing 연산자는 falsy한 값 (예: false, 0, 빈 문자열 등) 을 기본값으로 간주하지 않습니다. 이는 변수가 null 또는 undefined 인 경우에만 기본값을 할당하는 데 유용합니다.

const example1 = null ?? "기본값";
console.log(example1); // "기본값"

const example2 = undefined ?? "기본값";
console.log(example2); // "기본값"

const example3 = 0 ?? "기본값";
console.log(example3); // 0

비동기 콜백 처리 방법 개선

Nullish Coalescing 연산자를 활용하여 비동기 콜백 처리 방법을 개선할 수 있습니다. 일반적으로는 콜백 함수의 인자로 전달된 값이 null 또는 undefined 인 경우에만 기본값을 사용하고 그렇지 않은 경우에는 기존 값을 유지합니다.

예를 들어, 다음과 같은 비동기 함수가 있다고 가정해봅시다:

function fetchData(callback) {
  // 비동기 작업 수행
  // ...

  // 콜백 함수 호출
  callback(data);
}

기존의 콜백 처리 방식은 다음과 같습니다:

fetchData(function(response) {
  const result = response || "기본값";
  // 작업 수행
});

위의 코드에서는 response 값이 falsy한 경우에만 “기본값” 을 사용합니다. 하지만 이는 response 값이 0 또는 빈 문자열 같은 falsy한 값일 때도 기본값이 사용된다는 문제가 있습니다.

Nullish Coalescing 연산자를 사용하여 개선된 처리 방식은 다음과 같습니다:

fetchData(function(response) {
  const result = response ?? "기본값";
  // 작업 수행
});

위의 코드에서는 response 값이 null 또는 undefined 인 경우에만 “기본값” 을 사용합니다. 따라서 0 또는 빈 문자열 같은 falsy한 값이 response 로 전달되는 경우에는 해당 값을 그대로 사용할 수 있습니다.

요약

Nullish Coalescing 연산자를 활용하여 자바스크립트 비동기 콜백 처리 방법을 개선할 수 있습니다. 이 연산자를 사용하면 null 또는 undefined 인 경우에만 기본값을 할당하고, falsy한 값인 경우에는 기존 값을 유지할 수 있습니다. 이를 통해 코드의 가독성을 높이고 예기치 않은 동작을 방지할 수 있습니다.

#JavaScript #비동기 #널리코얼레싱