?. optional chaining

사용법

var user = {
    name : 'kim',
    age : 20
}

console.log(user?.name);

• ?. 왼쪽 값이 null 혹은 undefined인 경우 마침표를 찍지말고 undefined를 남겨달라는 뜻이다.

• 주로 에러없이 안전하게 데이터를 꺼낼 때 사용한다.

delete와 조합해 사용할 수 도있다.

delete user?.name; // user가 존재하면 user.name을 삭제

하지만, 쓰기에는 사용 할 수 없다.

// user가 존재할 경우 user.name에 값을 쓰려는 의도로 아래와 같이 코드를 작성해봤다.
user?.name = "Violet"; // SyntaxError: Invalid left-hand side in assignment
// 에러가 발생하는 이유는 undefined = "Violet"이 되기 때문

?? nullish coalescing operator

일명 병합연산자라고 불림

사용법

var user;

console.log(user ?? '로딩중')

• ?? 왼쪽 값이 null,undefined일 경우 오른쪽을 보여달라는 뜻이다.

• 한마디로 user ?? '대신보여줄문자' 라고 생각하면된다.

• 리액트나 뷰에서 데이터가 늦게 도착할 경우 사용자는 undefined가 화면에 출력됬다가, 데이터가 도착하면 데이터를 보게되는데, 그런것을 방지하는 경우 사용한다. if문을 사용해도되지만 이걸 사용하는게 더 깔끔하다.

'??'와 '||'의 차이

병합연산자는 or연산자인 ||와 상당히 유사하지만 다음과 같은 차이점이 있다.

• ||는 첫 번째 truthy 값을 반환함
• ??는 첫 번째 정의된(defined) 값을 반환함

무슨말일까? 이는 간단히 요약하자면, 사용목적에 따라서 '??'를 써야할지, '||'를 써야할지 정해진다는것이다.
예를들면, null과 undefined, 숫자 0을 구분 지어 다뤄야 할 때가 대표적인 예이다.

예시를 좀 더 살펴보자

height = height ?? 100;

이 경우 height에 값이 정의되지않을 경우 height엔 100이 할당된다.
그럼 ??와 ||를 비교해보자

let height = 0;

alert(height || 100); // 100
alert(height ?? 100); // 0

height || 100은 height에 0을 할당했지만, falsy한 값으로 취급했기 때문에 null이나 undefined를 할당한 것과 동일하게 처리했다. 반면에,

height ?? 100은 height가 정확하게 null이나 undefined일 경우에만 100이된다.
예제에서는 0이라는 값을 할당해줬기에 0이 출력되었다.

이런 특징들 때문에 높이처럼 0이 할당 될 수 있는 변수를 사용해 기능을 개발할땐 or연산자보다 병합연사자 (??)를 사용하는게 더 적합하다.