[JavaScript] Nullish coalescing operator ES11

bbio3o·2021년 2월 7일
0

JavaScript

목록 보기
5/13
post-thumbnail

타입스크립트에서도 등장하는 ??에 대해 알아보자.
널 병합 연산자 (??) 는 왼쪽 피연산자가 null 또는 undefined일 때 오른쪽 피연산자를 반환하고, 그렇지 않으면 왼쪽 피연산자를 반환하는 논리 연산자이다.

논리 연산자 OR (||)와 달리, 왼쪽 피연산자가 null 또는 undefined가 아닌 falsy 값이면 반환된다. 즉, 만약 다른 변수 foo에게 기본 값을 제공하기 위해 ||을 사용 경우, falsy 값( '' 또는 0)을 사용하는 것을 고려했다면 예기치 않는 동작이 발생할 수 있다.
MDN
출처

null 과 undefined일때, 오른쪽 피연산자를 return 한다.

x = (a !== null && a !== undefined) ? a : b; 
// 위의 코드는 아래와 같다.
x = a ?? b 
let firstName = null;
let lastName = null;
let nickName = "Minji";

// show the first not-null/undefiend value 
alert(firstName ?? lastName ?? nickName ?? "Anonymous"); // Minji

|| 와 다른점은 무엇일까?

OR연산자(||)과의 차이점은 왼쪽이 null, undefined, '' 빈 문자열, 0, falsy값일 경우 오른쪽 피연산자를 return한다는 점이 다르다.

?? 은 undefined 이고 null일 때만 오른쪽을 리턴하는 반면, ||을 쓰면, 음수나 0이여도 오른쪽을 리턴한다.

내가 사용했던 예제

const Wrapper = styled.div`
  width: 100%;
  max-width: ${({ maxWidth }) => maxWidth ?? "1400px"};
  padding: ${({ padding }) => padding?.desktop ?? padding ?? "4rem"};
`  

padding?.destop이 만약 undefined라면 padding을 리턴하고 padding이 undefined 또는 null 이라면 4rem을 리턴한다.

profile
그림도 그리는 개발자 🎨👩‍💻

0개의 댓글