Javascript Nullish Coalescing Operator (??) 자바스크립트 연산자

June 12, 2024

개발을 하다보면 변수가 null 또는 undefined일 때 기본값을 설정하는 경우가 많습니다. 이를 효과적으로 처리하기 위해 ECMAScript 2020(ES11)에서는 Nullish Coalescing Operator (??)가 도입되었습니다. 이 글에서는 Nullish Coalescing Operator의 개념, 사용법, 그리고 활용 예시를 살펴보겠습니다.

Nullish Coalescing Operator란?

Nullish Coalescing Operator (??)는 JavaScript에서 변수가 null 또는 undefined인 경우에만 오른쪽 피연산자를 할당합니다. 아래 예시를 보면 변수가 0이나 '' 같은 값일 땐 오른쪽 피연산자를 할당하지 않는 것을 확인할 수 있습니다.

let foo = null
let bar = foo ?? 'default value'
console.log(bar) // 출력: 'default value'

let foo2 = undefined
let bar2 = foo2 ?? 'default value'
console.log(bar2) // 출력: 'default value'

let foo3 = 0
let bar3 = foo3 ?? 'default value'
console.log(bar3) // 출력: 0

let foo4 = ''
let bar4 = foo4 ?? 'default value'
console.log(bar4) // 출력: ''

|| 연산자와의 차이점

|| 연산자와 비슷해 보이지만 다릅니다. ||연산자는 falsy 값인 0, '', false, null, undefined, NaN 등을 false로 처리합니다. 따라서 || 연산자는 0이나 '' 같은 값이 들어왔을 때도 오른쪽 피연산자를 할당합니다.

let foo = null
let bar = foo || 'default value'
console.log(bar) // 출력: 'default value'

let foo2 = undefined
let bar2 = foo2 || 'default value'
console.log(bar2) // 출력: 'default value'

let foo3 = 0
let bar3 = foo3 || 'default value'
console.log(bar3) // 출력: 'default value'

let foo4 = ''
let bar4 = foo4 || 'default value'
console.log(bar4) // 출력: 'default value'

https://ko.javascript.info/nullish-coalescing-operator 문서에서 좋은 표현을 찾았는데요. || 연산자는 첫 번째 truthy 값을 반환하는 반면, ?? 연산자는 첫 번째 defined 값을 반환한다고 생각하면 이해하기 쉽습니다.

활용 예시

로컬 저장소 값 처리

로컬 저장소에서 값이 없을 때 null이기 때문에 기본값을 쉽게 처리할 수 있습니다.

const storedValue = localStorage.getItem('key')
const value = storedValue ?? 'Default Value'

console.log(value) // 출력: 'Default Value' (로컬 저장소에 값이 없을 때)

환경 설정 값 처리

환경 설정에서 설정되지 않은 값이 있을 때 기본값으로 처리하기 쉽습니다.

const config = {
  apiEndpoint: process.env.API_ENDPOINT ?? 'https://default.api.com',
  timeout: process.env.TIMEOUT ?? 5000,
}

console.log(config.apiEndpoint) // 환경 변수에 따라 다름, 기본 값은 'https://default.api.com'
console.log(config.timeout) // 환경 변수에 따라 다름, 기본 값은 5000

0이 할당될 수 있는 변수 처리

예를 들어, 사용자의 만족도 조사 점수로 0부터 5까지의 값을 받는데, 사용자가 응답하지 않았을 때 0이 할당될 수 있습니다. 이때 ?? 연산자를 사용하면 기본값을 설정할 수 있습니다.

function displayScore(score) {
  let finalScore = score ?? '조사에 참여하지 않았습니다.'
  console.log(`만족도 점수: ${finalScore}`)
}

displayScore(5) // 출력: 만족도 점수: 5
displayScore(0) // 출력: 만족도 점수: 0
displayScore(null) // 출력: 만족도 점수: 조사에 참여하지 않았습니다.
displayScore(undefined) // 출력: 만족도 점수: 조사에 참여하지 않았습니다.

참고 글

https://ko.javascript.info/nullish-coalescing-operator

Written by@Donghoon Song

사람들의 꿈을 이어주는 코멘토에서 일하고 있습니다.

Instagram GitHub Twitter LinkedIn