[JavaScript] ES20 - '?.' 와 '??'

 

1. Optional Chaining: ?. 

: 값이 있을 수도 있고 없을 수도 있는 상황에서 주로 사용한다.

 

중첩 객체의 특정 속성에 접근하기 위해서 기존에는 일일이 And 로 연결해 속성의 존재 여부를 확인해야 했다.

하지만 이렇게 되면 코드가 너무 길어지고, 

조건문 속 속성이 없을 경우 TypeError 에러가 뜰 수 있다.

 

옵셔널 체이닝 (A ?. B) 은 

A가 undefined 나 null 이면 바로 undefined 를 반환하고 에러 없이 멈춘다. 

또한, 코드가 간결하고 읽기 쉬우며

null 체크를 매번 하지 않아도 돼서 실수가 줄어든다.

 

let will_pokemon = {
    pikachu: {
        friend: { 
            charizard: {
                species: 'Dragon Pokemon',
                height: 1.7,
                weight: 90.5,
                power: 'fire'
            }
        }
    }
}


// And 연산자
if (will_pokemon 
	&& will_pokemon.pikachu 
	&& will_pokemon.pikachu.friend 
	&& will_pokemon.pikachu.friend.charizard) { 
    console.log('fight!')
} else {
    console.log('walk away...')
}

// 옵셔널 체이닝
if (will_pokemon?.pikachu?.friend?.charizard) {
    console.log('fight!')
} else {
    console.log('walk away...')
}

 

 

단, 옵셔널 체이닝은 존재하지 않아도 괜찮은 대상에만 사용하는 것이 좋다. 

위의 예시에서, will_pokemon 에 pikachu 가 반드시 있어야 한다면,

will_pokemon.pikachu?.friend?.charizard 처럼 사용해야

에러를 조기에 발견할 수 있어 디버깅이 쉬워진다.

 

 

 

2. Nullish Coalescing Operator: ??

x = (a !== null && a !== undefined) ? a : b;
x = a ?? b

 

 A ?? B  : A 가 null 또는 undefined 일 경우에만 B를 사용한다.

: '값이 할당된' 변수를 빠르게 찾을 수 있다.

: ?? 연산자의 우선순위는 5 로, 대부분의 연산자보다 나중에 평가된다.

그래서 ?? 를 다른 연산자와 같이 쓸 때는 꼭 () 를 사용해야 한다.

 

let height = null;
let width = null;

// 괄호를 추가!
let area = (height ?? 100) * (width ?? 50);

 

 

2-1. || (Or 연산자) 와 ?? 의 차이

 

?? 는 null 과 undefined 만 체크하지만,

|| 는 0, '', false 등도 같이 체크한다.

 

const title = "";

// OR 연산자
console.log(title || "Untitled"); // "Untitled" ❗
// Null 병합
console.log(title ?? "Untitled"); // "" (빈 문자열 유지됨!) ✅

 

 

 

3. ?. 와 ?? 같이 사용하기

const city = user.address?.city ?? "No City";

 

user 객체에 address 는 꼭 있어야 한다.

user.address 에 city 가 있나?

있다면, null 이나 undefined 인가?

그렇다 -> "No City"

아니다 -> user.address.city 반환

 

 

 

(+) 응용

const theme = null;
const finalTheme = (theme ?? 'light') === 'dark' ? '🌙' : '☀️';

console.log(finalTheme); // '☀️'

 

 

 

 

 

https://ko.javascript.info/optional-chaining

옵셔널 체이닝 '?.'

https://ko.javascript.info/nullish-coalescing-operator

nullish 병합 연산자 '??'