(ES6) 언제까지 isNull함수만들래? Null병합연산자 ??

 

null 병합 연산자 '??'

프로그래밍을 할 때 우리는 필연적으로 null 체크하는 로직을 만나곤 하게 됩니다.

그때마다 우리는 if문을 통해서 null 값을 체크해오곤 했었습니다.

 

하지만 JavaScript ES6문법에서부터 사용이 가능해진 null 병합 연산자 ??를 사용하면,

짧은 문법으로 여러 연산자 중 그 값이 '확정'되어 있는 변수를 찾을 수 있습니다.

 

 

예를 들어 어떤 변수 x의 값은 변수 a가 null도 아니고 undefined가 아니면 a가,

그렇지 않을 경우는 b가 되도록 하고자 할 때 우리는 구식 문법으로 아래와 코드를 작성했습니다.

//old
//if~else문
let x;
if(a !== null && a!== undefined){
    x = a;
}else {
    x = b;
}

or

//삼항연산자
let x = (a !== null && a!== undefined)? a : b;

 

 

if~else 문 또는 비교연산자와 논리연산자를 사용하면 코드길이가 길어져 가독성이 떨어지게 됩니다.
이 때, null 병합연산자 ?? 사용해서 코드를 작성하면 이렇게 표현할 수 있습니다.

//new
let x = a ?? b;

 

 

연산자 우선순위

그렇담 이 연산자의 우선순위는 어떻게 될지 알아보겠습니다.

?? 연산자는 5번째 우선순위로 꽤 낮습니다. 그렇기 때문에 연산자가 복잡한 표현식안에서는 _괄호_를 사용하여 표현하는게 좋습니다.

 

??연산자는 javascript 스펙에 추가된 지 얼마 안 된 문법으로, 구식 브라우저(

인터넷 익스플로러 라거나....IE라거나...

)에서는 바벨과 같은 폴리필 사용이 요구됩니다.

 

또한 ??연산자에는 자바스크립트 언어에서 규정한 제약사항이 있습니다.
안전성 관련 이슈 때문에 ??연산자는 &&(AND)나 ||(OR)연산자와 함께 사용할수 없습니다.

 

//Syntax Error : Uxexpected token '??'
let x = 1 && 2 ?? 3;

 

제약을 피하려면 아래 예시처럼 괄호를 사용할 수 있습니다.

let x = (1 && 2) ?? 3;
console.log(x);         //2