자바스크립트 nullish 연산자 (OR 연산자와 차이점)

목차

nullish 연산자란

nullish 연산자는 자바스크립트 최신 스펙에 추가되어 브라우저에서 지원 하는지 확인하고 사용하시길 바랍니다.

nullish 연산자는 간단히 말해서 값이 있는 변수를 찾을 수 있는 연산자입니다. 코드를 통해서 nullish를 사용하지 않을 때와 사용할 때의 차이점을 볼게요.

const a = null;
const b = 'hello nullish';

// nullish 사용 x
console.log((a !== null && a !== undefined) ? a : b);

// nullish 사용
console.log(a ?? b); // 결과: hello nullish

여기에서 nullish 연산자(??)는 앞에 있는 a의 값을 평가할 때 'undefined' 인지 'null'인지를 평가하게 돼요.

a의 값이 undefined 또는 null 이 아니라면 변수 a의 값이 출력되었을거에요.

이것을 이용하면 값이 들어 있는 변수를 찾는 것에 용이합니다. 주의해야할 점에 대해서도 생각해봤습니다.

아래 예시를 통해서 같이 살펴볼까요?

 

우리의 웹사이트는 회원가입 시 닉네임을 받는 로직이 있습니다. 닉네임을 적지 않는다면 '익명'이라는 닉네임을 부여하기로 했습니다. 그래서 저는 이번에 nullish를 사용해서 로직을 짜보려고 합니다!

 

See the Pen Untitled by dnjs2618 (@dnjs2618) on CodePen.

 

 

 

 

 

 

nullish를 통해서 익명 처리가 잘 이루어지나요?? input의 기본값은  빈 문자열이라서 null or undefined가 아니기 때문에 빈 문자열 값이 결과에 들어가서 실제로 눈에는 보이지 않아요.

 

그러면 이런 경우에는 어떤 방식을 이용해서 처리해야 할까요?  우리가 흔히 접할 수 있는 OR 연산자를 사용하면 돼요.

OR 연산자와 nullish의 차이점

OR 연산자는 둘 중 하나만 참이더라도 반환을 하는 연산자입니다. 이것을 이용한 코딩 방식을 주변에서 자주 접할 수 있는데요.

const a = null;
const b = 'hello OR';

console.log(a || b); // 결과: hello OR

위의 nullish와 느낌이 비슷하죠? 하지만 OR 연산자는 undefined, null 뿐 아니라 falsy한 값을 평가해요.

대표적인 falsy값으로는 ''(빈문자열), 0(숫자 0) 등이 있습니다 이것들도 다 false로 봐요.

그러면 위의 회원가입 로직을 nullish로 짰을 때는 빈문자열을 그대로 출력했었죠??

이번에는 OR를 통해서 로직을 수정해볼게요~!

 

 

See the Pen Untitled by dnjs2618 (@dnjs2618) on CodePen.

 

 

 

 

빈 값을 입력했을 때 익명이라는 값이 잘 나오나요? nullish 연산자 사용 시 주의사항을 봤듯이 이번에는 OR 연산자 사용 시에 주의해야할 점에 대해 알아볼게요!

OR 연산자 사용 시 주의사항

OR 연산자는 falsy한 값을 false로 본다고 했어요.

이번에는 사용자의 하루 대중교통 이용 횟수에 대해서 입력받는다고 가정할게요. 입력하지 않은 사용자는 1회를 타는 것으로 처리를 해볼게요.

 

See the Pen Untitled by dnjs2618 (@dnjs2618) on CodePen.

 

OR 연산자에서 0을 falsy한 값으로 체크를 했기 때문에 0을 입력한 사용자는 1회라는 텍스트가 나와서 당황했을 것 같네요!

이렇듯 OR 연산자는 falsy한 값을 다룰 때 주의해서 작성해야 해요.

 

 

nullish를 사용할 때 알아두면 좋은 것 

nullish는 OR연산자와 AND연산자와 동시에 사용하지 못해요.

 

const first = null;
const seconde = 'hello';
const c = undefined;

console.log(a ?? b || c); // Error: Uncaught SyntaxError: Unexpected token '||'

 

안정성 문제로 인해서 이렇게 된 것이라고 해요. 그래서 사용할 때는 괄호로 묶어서 사용하시는게 좋아요.

const first = null;
const seconde = 'hello';
const c = undefined;

console.log( (a ?? b) || c); // 'hello'

 

오늘은 nullish에 대해서 알아보고 OR 연산자와는 어떤 차이가 있나 알아 보았습니다.

작성한 글을 읽어보시다가 틀린 점이 있다면 댓글로 의견을 주시면 감사하겠습니다. 수정할게요.

 

다음은 개발자들의 생산성을 증가시킨 optional chaining에 대해서 알아볼게요.