javascript ?. Optional chaining

 

언제?

존재하지 않는 메서드를 호출 할때 사용할 수 있다.

const str = null;
console.log(str?.indexOf('a')); //undefined

에러를 리턴하는 대신 undefined를 리턴한다.

 

?.를 사용하지 않았을때

const str = null;

if(str.indexOf('a') > 0){
  console.log('얏호');
}else{
   console.log('유후');
}

"TypeError: Cannot read properties of null (reading 'indexOf')
    at decujogaba.js:3:8
    at https://static.jsbin.com/js/prod/runner-4.1.8.min.js:1:13924
    at https://static.jsbin.com/js/prod/runner-4.1.8.min.js:1:10866"

 

str이 null이라 TypeError가 떨어진다.

 

const str = null;

if(str?.indexOf('a') > 0){
  console.log('얏호');
}else{
   console.log('유후'); //"유후"
}

error를 막을 수 있다.

 

사용예시

 

const obj = {
  subject: "Happy New Year",
  year: 2024,
};

const str = obj?.subject ? `${obj.year} ${obj.subject}` : "Unkown"; 

console.log(str); //"2024 Happy New Year"

 

obj.subject에 값이 있으면 좌측 값 출력

const obj = {
  subject: null,
  year: 2024,
};

const str = obj.day?.();

console.log(str); //undefined

 

주어진 값이 없으면 에러가 나는 대신에 undefined 리턴

 

---

Ref

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

Optional chaining (?.) - JavaScript | MDN