[JavaScript/자바스크립트]옵셔널 체이닝 연산자

?.

ES11에서 도입된 옵셔널 체이닝 (optional chaining)연산자 ?. 는

좌항의 피연산자가 null 또는 undefined인 경우 undefined를 반환하고,

그렇지 않으면 우항의 프로퍼티 참조를 이어간다.

 

(프로퍼티 참조란 변수를 통해 변수값을 참조하듯이 객체의 프로퍼티에 접근해프로퍼티 값을 참조하는 것을 말한다.)

옵셔널 체이닝 연산자 ?. 가 도입되기 이전에는

논리 연산자 &&를 사용한 단축 평가를 통해 변수가 null 또는 undefined인지 확인했다.

---

var elem =null;

// elem이 null또는 undefined이면 undefined를 반환하고, 그렇지 않으면 우항의 프로퍼티 참조를 이어간다.
var value = elem?.value; //elem && elem.value를 줄여 쓴 것!!
console.log(value); // -> undefined

---

var elem =null;

//elem이 Falsy 값이면 elem으로 평가되고, elem이 Truthy 값이면 elem.value로 평가된다.
var value = elem && elem.value; //elem && elem 이부분이 중복되니까 ?.으로 줄여서 쓸수있다->옵셔널체이닝
console.log(value); // -> null

elem?.value 부분은! if문을 줄여쓴 삼항 조건 연산자처럼

elem이 있으면!? value에 접근하고, 없으면?! 접근하지 말라는 뜻!!

---

결과 값의 차이 비교하기

논리 연산자 &&는 Falsy값이면 elem으로 평가되어 null로 출력하고

옵셔널 체이닝 연산자 ?.는  null또는 undefined인 경우 undefined으로 출력한다.

---

let book = { title:'pizza', author: { name: 'Jamie' } };
function printName(book) {
  const author = book?.author?.name;
  //const bookInfo = book && book.title && book.author;
  console.log(author);
}
printName(book);

1행 : book이라는 객체에 title: pizza, author : name 이라는 값이 있다.

2행 : 여기에 printName함수를 이용해서 !!

3행 :book에 값이 없으면 undefined 출력, 있으면 다음 값으로 접근. 

book title에 없으면 undefined 출력, 있으면 book.author값으로 접근.

여기서도 값이 없으면 undefined출력, 있으면 값 author로 접근

4행 : 옵셔널 체이닝 연산자 대신 논리연산자 &&를 사용한 식

5행 : author값 출력!

6행 : book 객체에 있는  입력값 호출

//book 객체에 있는 author에는 'Jamie'라는 값이 들어있기 때문에 출력결과는 Jamie

만약 printName();를 입력한다면 undefined값이 출력된다. 아무값도 호출을 안하니까 !!!!!!!!

이 옵셔널 체이닝 연산자는 값이 없을 수도 있는 객체에 접근 할 시 유용하다.

값이 없는것에 접근을 하면 에러가 나니까!!!!!

---

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Optional_chaining

Optional chaining (?.) - JavaScript | MDN

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Nullish_coalescing

Nullish coalescing operator (??) - JavaScript | MDN

---

**모던 자바스크립트 deep dive (이응모 선생님) 를 읽고 참고하여 작성하는 글입니다 **