Nullish Coalescing을 활용하여 자바스크립트에서의 데이터 유효성 검사하기

자바스크립트에서 데이터 유효성을 검사하고 기본값을 설정하는 작업은 매우 중요합니다. 예를 들어, 사용자 입력이나 서버에서 받은 데이터를 처리할 때, 값이 존재하지 않거나 null 또는 undefined인 경우에 대비해야 합니다. 이를 위해 ES2020에서 Nullish Coalescing 연산자가 도입되었습니다.

Nullish Coalescing 연산자란?

Nullish Coalescing 연산자는 ??로 표현되며, 왼쪽 피연산자가 null 또는 undefined인 경우, 오른쪽 피연산자를 반환합니다. 이 연산자를 사용하면 || 연산자와 달리, 빈 문자열('')이나 숫자 0(0)을 유효한 값으로 처리할 수 있습니다.

데이터 유효성 검사 예제

아래 예제 코드를 통해 Nullish Coalescing 연산자를 사용하여 자바스크립트에서 데이터 유효성을 검사하는 방법을 알아보겠습니다.

const username = getUserInput() ?? 'Guest';
console.log(`Welcome, ${username}!`);

function getUserInput() {
  // 입력값을 받아온다.
  const input = document.getElementById('username').value;
  
  // 입력값이 빈 문자열인 경우, 'Guest'로 대체한다.
  return input ?? 'Guest';
}

위 코드에서 getUserInput 함수는 사용자로부터 입력값을 받아오는 함수입니다. 만약 입력값이 비어있는 경우, Nullish Coalescing 연산자를 사용하여 Guest라는 기본값을 설정합니다.

이렇게 함으로써, 사용자가 입력값을 제공하지 않은 경우에도 Guest로 대체하여 환영 메시지를 출력할 수 있습니다.

마무리

Nullish Coalescing 연산자를 사용하면 자바스크립트에서 데이터 유효성을 검사하고 기본값을 설정하는 작업을 간편하게 처리할 수 있습니다. 이를 통해 코드의 가독성을 향상시키고, 예외 상황에서 안정적인 동작을 보장할 수 있습니다.

#javascript #NullishCoalescing