4.6 옵셔널 체이닝 '?.'

⚠️ 최근에 추가됨

📢 옵셔널 체이닝(optional chaining) ?. 을 사용하면 프로퍼티가 없는 중첩 객체에도 에러 없이 안전하게 접근할 수 있다.

 

옵셔널 체이닝이 필요한 이유

등장 배경

◾️ 사용자가 여러 명 있을 때, 그 중 몇명은 주소 정보를 가지고 있지 않다고 가정한다. 

◾️ 이럴 때 user.address.street를 사용해 주소 정보에 접근하면 에러가 발생할 수 있다. 

let user = {}; // 주소정보가 없는 사용자

alert(user.address.street); // TypeError: Cannot read property 'street' of undefined

◾️ 브라우저에서 동작하는 코드를 개발 할 때 

◾️ 페이지에 있는 특정 요소에 담긴 정보에 접근하려 하는데, 요소가 페이지 없는 경우

// querySelector(...) 호출 결과가 null인 경우
let html = document.querySelector('.my-element').innerHTML; //TypeError: Cannot read property 'innerHTML' of null

◾️ 기존에는 && 연산자를 사용하였다.  →  코드가 길어진다는 문제가 생긴다. 

let user = {}; // 주소정보가 없는 사용자

alert( user && user.address && user.address.street ); // undefined

 

옵셔널 체이닝의 등장

◾️ ?. 은 ?.'앞'의 평가 대상이 undefined나 null이면 평가를 멈추고 undefined를 반환한다. 

let user = {}; // 주소 정보가 없는 사용자

console.log( user?.address?.stree ); // undefined

◾️ user?.address로 주소를 읽으면 user객체가 존재하지 않더라도 에러가 발생하지 않는다. 

◾️ ?.은 문법이 위치해 있는 그 자리에서만 동작한다. 

◾️ user?. 에서 평가가 끝나고 user에 값이 없다는 것이 판별되면 그 즉시 평가를 멈춘다. 나머지 프로퍼티에 접근 자체를 하지 않는다. 

let user = null;

console.log( user.?address); // undefined
console.log( user.?address.street ); // undefined

 

 

⚠️ 옵셔널 체이닝을 남용하지 않는다. 

◾️ 존재하지 않아도 괜찮은 대상에만 사용해야 한다. 
◾️ user는 당연히 존재해야하고 address는 필수값이 아니므로 user.address?.street를 사용하는게 바람직하다.

⚠️ ?. 앞의 변수는 꼭 선언되어 있어야한다.  

 

 

단락 평가(short-circuit)

◾️ ?.는 왼쪽 평가 대상에 값이 없으면 즉시 평가를 멈춘다. 

let user = null;
let x = 0;

user?.sayHi(x++); // 함수가 실행되지 않는다. 

console.log(x); // 0;

 

 

?.()와 ?.[]

◾️ ?.은 연산자가 아니고 함수, 대괄호와 함께 동작하는 특별한 문법 구조체(syntax construct)이다. 

◾️ ?.()는 존재 여부가 확실치 않은 함수를 호출할 때 사용할 수 있다. 

let user1 = {
  admin() {
    console.log('관리자 계정입니다.');
  }
}

let user2 = {};

user1.admin?.(); // 관리자 계정입니다. 
user2.admin?.(); // 

◾️ . 대신 []를 사용해 객체 프로퍼티에 접근하는 경우엔 ?.[]를 사용할 수도 있다. 

let user1 = {
   firstName: 'suzu'
};

let user2 = null; 

let key = 'firstName';

console.log( user1?.[key] ); // suzu
console.log( user2?.[key] ); // undefined

console.log( user1?.[key]?.something?.not?.existing ); // undefined

◾️ delete와도 함께 사용할 수 있다. 

◾️ user가 존재하면 user.name을 삭제한다. 

delete user?.name; 

◾️ ?. 는 읽기나 삭제는 가능하지만 쓰기에는 사용할 수 없다. 

◾️ undefined = 'suzu'가 되기 때문에 에러가 발생

user?.name = 'suzu'; // SyntaxError: Invalid left-hand side in assignment

 

 

📝 요약

◽️ 옵셔널 체이닝 문법 ?.은 세가지 형태로 사용할 수 있다. 
   1. obj?.prop - obj가 존재하면 obj.prop을 반환하고 그렇지 않으면 undfined를 반환
   2. obj?.[prop] - obj가 존재하면 obj[prop]을 반환하고, 그렇지 않으면 undefined를 반환
   3. obj?.method - obj가 존재하면 obj.method()를 호출하고, 그렇지 않으면 undefined를 반환

◽️ ?. 왼쪽 평가 대상이 null/undefined인지 확인하고 null/undefined가 아니라면 평가를 계속한다.  
◽️ ?. 를 계속 연결해서 체인을 만들면 중첩 프로퍼티들에 안전하게 접근할 수 있다. 
◽️ ?. 왼쪽 평가대상이 없어도 괜찮은 경우에만 선택적으로 사용해야 한다. 

 

---

📝 오늘 새롭게 배운 내용 📝

 

✅ 최근에 추가된 따끈따끈한 옵셔널 체이닝 문법 

✅ 🐓?.🥚 닭 뱃속에 달걀이 있니? 없니? 있으면 달걀🥚 없으면 undefined❌ 

✅ 뭐든지 편하다고 남용하면 안된다. 진~~~짜로 필요할 때 써야한다. 

 

 

 

📌 [JAVASCRIPT_INFO 옵셔널 체이닝 '?.']

옵셔널 체이닝 '?.'

📌 [MDN Optional chaining]

Optional chaining