자바스크립트 Nullish Coalescing의 장단점 및 적절한 사용 시나리오

29 Sep 2023

javascript

자바스크립트는 널(null) 또는 undefined인 경우에 대한 기본값을 설정하기 위해 Nullish Coalescing 연산자를 도입했습니다. 이 연산자는 두 개의 연산자를 사용하여 왼쪽 피연산자가 null 또는 undefined인 경우에만 오른쪽 피연산자를 반환합니다. 이번 블로그에서는 자바스크립트 Nullish Coalescing의 장단점과 적절한 사용 시나리오에 대해 알아보겠습니다.

장점

1. 기본값 설정에 용이함

Nullish Coalescing 연산자를 사용하면 변수가 null 또는 undefined인 경우에만 기본값을 설정할 수 있습니다. 예를 들어, 다음과 같은 경우를 생각해보세요.

const myVariable = userInput || 'default';

위 코드에서는 userInput 값이 falsy한 값(false, 0, “”, null, undefined, NaN)이라면 ‘default’ 값이 할당됩니다. 하지만, userInput 값이 0이나 빈 문자열(““)인 경우에도 ‘default’ 값이 할당되기 때문에 잘못된 결과를 얻을 수 있습니다. Nullish Coalescing을 사용하면 다음과 같이 기본값 설정을 정확히 할 수 있습니다.

const myVariable = userInput ?? 'default';

2. 간결하고 가독성이 좋은 코드 작성 가능

Nullish Coalescing 연산자를 사용하면 기본값 설정 로직을 더 간결하게 작성할 수 있습니다. 이는 코드의 가독성을 향상시키는 장점으로 작용합니다. 예를 들어, 다음과 같은 경우를 생각해보세요.

const price = product.price || 0;

위 코드에서는 product.price 값이 falsy한 값인 경우에만 0으로 설정되기 때문에 원하는 결과를 얻을 수 있습니다. 하지만 이 코드는 읽기 어려울 수 있고, 다른 개발자가 코드를 이해하기 어려울 수 있습니다. Nullish Coalescing을 사용하면 다음과 같이 간결하게 작성할 수 있습니다.

const price = product.price ?? 0;

단점

지원되지 않는 브라우저에서는 사용할 수 없음

Nullish Coalescing 연산자는 최신의 자바스크립트 스펙에 추가된 기능이므로, 오래된 브라우저에서는 지원되지 않을 수 있습니다. 만약 특정 브라우저 환경이나 버전에서 사용해야 한다면, Babel과 같은 도구를 사용하여 트랜스파일링 또는 폴리필링을 해야 할 수 있습니다.

기본값과 중복적인 평가 가능성

Nullish Coalescing 연산자를 사용할 때 주의해야 할 점은, 만약 오른쪽 피연산자에 함수 호출이나 변수 접근이 포함된다면, 기본값과 중복적으로 평가될 수 있다는 것입니다. 예를 들어, 다음과 같은 코드를 고려해보세요.

const myVariable = getDefaultValue() ?? 'default';

위 코드에서는 getDefaultValue() 함수가 호출될 때마다 기본값과 함께 실행되기 때문에 원하는 결과를 얻기 어려울 수 있습니다.

적절한 사용 시나리오

1. 널 또는 정의되지 않은 값에 대한 기본값 설정

Nullish Coalescing 연산자는 널 또는 정의되지 않은 값에 대한 기본값을 설정하기 위해 사용될 수 있습니다. 변수가 널 또는 undefined인 경우에만 기본값을 사용하고 나머지 경우에는 변수의 값을 유지하려고 할 때 유용합니다.

2. API 응답에서 값의 부재 처리

API 요청 후 응답에서 값을 추출할 때 Nullish Coalescing 연산자를 사용하여 부재하는 값을 처리할 수 있습니다. API에서 반환된 값이 null이나 undefined인 경우에만 기본값을 사용하고, 그렇지 않은 경우에는 반환된 값을 사용합니다. 이는 널 또는 빈 값을 처리하는 API 연동 시나리오에서 특히 유용합니다.

장점