자바스크립트의 알려지지 않은 연산자들 - "??", "??=", "?."
자바스크립트에 비교 및 연산 과정을 줄여주는 새로운 연산자들이 몇가지 추가되었습니다.
이미 연산자가 넘쳐나기 때문에 아직은 잘 사용되지 않고 있고 역시나 시간이 좀 지나야 합니다.
새로 추가된 연산자들은 "??", "??=", "=." 입니다.
다른 연사자들과 달리 의미가 바로 와닿지 않기 때문에 예제를 통해 알아 보겠습니다.
??
두 값을 비교해 값을 반환받는 비교 연산자인 "||" 와 기본적으로 같습니다.
"||"와 "??" 모두 논리적인 OR 비교를 하는 연산자로 두 항목 중 참인 항목의 값을 반환합니다. 두 항목 모두 참이면 첫 번째 항목이, 둘 다 거짓이면 두 번째 항목이 반환됩니다. 둘 중 한 항목만 참이면 참인 항목이 반환됩니다.
"||" 연산자와 다른점은 자바스크립트의 기본 연산 규칙에 따라 Undefined, Null 과 숫자 0 까지 모두 거짓으로 처리하지만, "??" 연산자는 Undefined, Null 만 거짓으로 처리하고 0은 참으로 처리합니다.
즉, Undefined, Null 여부만 확인하는 비교 연산자입니다.
다음과 같은 비교 결과 값 반환 함수를 사용해 "||" 와 "??"를 비교해보겠습니다.
let zero = 0, plus = 1, minus = -1, nullvar = null, undefinedvar = undefined;
compareVar = data => data || "기본값";
console.log(compareVar(zero));
console.log(compareVar(plus));
console.log(compareVar(minus));
console.log(compareVar(nullvar));
console.log(compareVar(undefinedvar));
콘솔에 표시되는 결과는 다음과 같습니다. 중요한 것은 0과 비교했을 때 거짓으로 처리되어 "기본값"으로 정한 문구가 출력되는 것입니다.
"??" 연산자로 변경을 하면 다음과 같이 숫자 0을 가진 "data" 변수는 참으로 처리됩니다.
let zero = 0;
console.log(zero ?? null);
??=
"+=" 연산차와 같은 구조로 비교 결과를 왼쪽 항에 저장하며, "x = x ?? y"을 줄여서 "x ??= y" 로 표현한 것입니다.
"||" 연산자 또한 "||=" 연산자가 있으며, 같은 방식으로 동작합니다.
"??=" 연산자는 논리적인 비교 기준도 "??" 와 같아서 Undefined, Null 만 거짓으로 처리되고, 나머지는 모두 참으로 처리됩니다.
왼쪽 항에는 항상 결과 값을 저장하는 변수가 와야 합니다.
let zero = 0, nullvar = null, undefinedvar = undefined;
undefinedvar??=nullvar;
zero??=nullvar;
console.log(undefinedvar);
console.log(zero);
?.
객체 값을 참조할 때 객체 존재 유무를 체크할 수 있는 참조 체크 연산자입니다.
객체 값을 참조할 때 참조하려는 속성 값의 상위 객체가 있는지 조건 체크를 한 후 속성 값을 얻는 연산자입니다.
객체 참조가 없을 경우 Undefined 를 반환합니다.
객체가 존재하는지 조건문으로 사전체크를 할 필요가 없기 때문에 객체 참조 과정을 단순화하는데 도움이 됩니다.
let toDo = {
date: '2020-11-01',
time: 'PM 2:30',
item: {
content: '오후 3시 미팅',
alarm: true
}
}
let members = toDo.item?.members;
members ??= '전체 팀원';
console.log(members);
다만 객체나 속성이 존재하지 않으면 어차피 Undefined 를 반환하기 때문에 살짝 무쓸모입니다.
거의 사용되지 않으며, 참조 예외를 줄이기 위한 용도로 구현된 연산자라고 알아두는 정도를 추천합니다.