[JavaScript] Option chaining(?.), Nullish coalescing operator(??)

 

 

 

 

Optional Chaining

체인의 각 참조가 유효하면 해당 값을, 유효하지 않으면 undefined 반환.

const userData = {
    name: '백충덕'
};
 
 
console.log(userData?.name); // 백충덕
console.log(userData?.age); // undefined

 

 

Nullish Coalescing Operator

왼쪽 피연산자가 null 혹은 undefined 일 때 오른쪽 피연산자를 반환.

const userData = {
    name: '백충덕'
};
 
 
console.log(userData.name ?? '이름없음'); // 백충덕
console.log(userData.age ?? '나이없음'); // 나이없음

 

 

optional chaining과 nullish coalescing operator를 조합하면,
정의되지 않은 데이터에 그냥 접근하다가 Uncaught Type Error를 발생시키거나,
이를 방지하기 위한 if 검사 조건문을 간단하게 표현할 수 있음.

// getUserData()는 문제가 발생했을 경우 null을 반환한다고 가정
const userData = getUserData(userId);
 
 
// 무턱대고 접근시 Uncaught TypeError 발생
console.log(`연령: ${userData.age}`);
 
 
// 이를 막기 위해 값을 검사하는 조건문이 필요
if (userData === null || !('age' in userData)) {
    console.log('연령: 데이터 없음');
}
else {
    console.log(`연령: ${userData.age}`);
}
 
 
// 위 조건문을 optional chaining과 nullish coalescing operator로 한줄로 끝낼 수 있음
console.log(`연령: ${userData?.age ?? '데이터 없음'}`);

 

 

 

브라우저 호환 등 자세한 내용은 아래 참조

optional chaining: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Operators/Optional_chaining

nullish coalescing operator: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Operators/Nullish_Coalescing_Operator