앞부분의 멘트들이 줄어들었죠? 조급함을 느낀 것입니다.
null 병합 연산자 '??' 파트 링크 : https://ko.javascript.info/nullish-coalescing-operator
최근 추가된 문법으로 구식 브라우저는 폴리필이 필요하다.
null 병합 연산자 '??'
null 병합 연산자 (null coalescing operator)는 여러 피연산자 중 '값이 확정된(정의된)' 변수를 찾는다.
이 null 병합 연산자를 풀어서 쓰면 아래와 같이 풀어쓸 수 있다.
// a??b를 풀이
x = (a !==null && a !== undefined) ? a : b;위와 같이 a가 null 이 아니고 undefined 가 아니라면 a, null 이나 undefined 라면 b 를 반환한다.
OR (||) 연산자와 구분
얼핏보면 ||(OR) 연산자와 비슷해 보인다.
하지만 숫자 0이 올 수 있는 값을 쓸 때, null과 undefined 와 0을 구분지어야 할 때는 null 병합 연산자 '??' 가 적합하다.
let height = 0;
//1번
alert(height || 100); //100
//2번
alert(height ?? 100); //0위의 예시를 보면 둘의 차이를 명확히 알 수 있다.
예시 중 1번의 경우 ||연산자가 비교를 위해 height 값을 boolean 형으로 변환 시킨다. 0을 boolean 형으로 변환 시키면 falsy 가 반환 되어 이 OR 연산은 그 뒤에 있는 첫번째 truthy인 100을 반환한다.
예시 중 2번은 height가 0을 갖고 있지만 값이 '정의된' 변수이기 때문에 그대로 height의 값인 0을 반환한다.
null 병합 연산자의 우선순위
'??' 연산자는 우선순위가 5위로 꽤 낮다.
=, ? 연산자 보다는 먼저 연산되지만 다른 연산자들 보다는 나중에 연산된다.
??와 &&와 ||와 함께 사용
사람들이 ||를 ??로 대체 하면서 발생되는 에러를 방지하기 위해 ??는 &&나 ||와 함께 사용할 수 없다. (syntax error 가 발생한다)
let x = 1 && 2 ?? 3; //syntax error그래도 같이 사용하고 싶다면 괄호로 감싸주면 된다!
let x = (1 && 2) ?? 3;
alert(x); //연산이 정상적으로 동작하여 2가 출력된다.