[🍭JS 기초] 옵셔널 체이닝 " ?. " (Q)

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

참고로 옵셔널 체이닝은 연산자가 아닌 함수나 대괄호와 함께 동작하는 특별한 문법 구조체 (syntax construct)입니다.

 

옵셔널 체이닝이 등장한 배경

사용자 중 몇 명은 주소 정보를 가지고 있지 않았을 때,   use.address.street  을 사용해 주소 정보에 접근 하면 에러가 발생할 수 있습니다. 혹은 자바스크립트를 사용해서 페이지에 존재하지 않는 요소에 접근해서 요소의 정보를 가져오려고 할 때 문제가 발생하는 경우가 있습니다. 

 

옵셔널 체이닝 존재 전에는 이러한 문제를 해결하기 위해 && 연산자를 사용했으나, 중첩 객체의 특정 프로퍼티에 접근하기 위해 거쳐야 할 구성요소들을  &&(AND)로 연결해 실제 해당 객체나 프로퍼티가 있는지 확인을 해야 했기 때문에 코드가 아주 길어지고는 했습니다. 

 

// 1. 주소 정보가 없는 사용자에 접근을 할 경우.
let user = {};
alert(user.address.street);  // 오류 발생 

//2. querySelector(...) 호출 결과가 null인 경우 에러 발생 
let html = document.querySelector('.my-element').innerHTML; 

// && 사용시,, 
let user = {};
alert(user && user.address && user.address.street);

 

 

옵셔널 체이닝의 등장

  ?.  의 앞 부분의 평가 대상이 undefined나 null 이면 평가를 멈추고 = (단락 평가 : short-circuit), undefined를 반환합니다. 

 

let user = {}; 
alert(user?.address?.street); // undefined, 에러가 발생하지 않음. 

let user = null; 
alert(user ?. address); // undefined
alert(user ?. address.street); // undefined

  user?. 는 user가 nul 이나 undefined인 경우만 처리할 수 있습니다. ❗user가 null이나 undefined가 아니고 실제 값이 존재하는 경우엔 반드시   user.address   프로퍼티는 있어야 합니다. 그렇지 않으면 user?.address.street의 두 번째 연산자에서 에러가 발생합니다. 

 

📍 옵셔널 체이닝을 남용하지 마세요 : 옵셔널체이닝은 존재하지 않아도 괜찮은 대상에만 사용하는 것이 바람직.

📍 ?. 앞의 변수는 꼭 선언되어 있어야 합니다. 

 

 

단락 평가 ( short-circuit )

  ?. 는 왼쪽 평가 대상에 값이 없으면 즉시 평가를 멈추기 때문에 함수 호출을 비롯한   ?.  의 오른쪽에 있는 부가 동작은 평가가 멈췄을 때 더는 일어나지 않습니다.  ( Q왼쪽 평가 대상이 없어도 괜찮은 경우에만 선택적으로 사용해야 합니다... ?? )

let user = null;
let x = 0; 

user?.sayHi(x++); // user값이 null이기 때문에 동작은 멈추고 오른쪽의 함수는 실행 되지 않습니다.
alert(x); //그렇기 때문에 0은 증가하지 않습니다.

 

📍obj?.prop - obj가 존재하면 obj.prop을 반환하고, 그렇지 않으면 undefined를 반환

📍obj?.[prop] - obj가 존재하면 obj[prop]을 반환하고, 그렇지 않으면 undefined를 반환

📍obj?.method() - obj가 존재하면 obj.method()를 호출하고, 그렇지 않으면 undefined를 반환

 

 

 

🍀참고 사이트 : 모던 javascript 튜토리얼 : 옵셔널체이닝