자바스크립트 물음표 선택적 연산자 Optional chaining

자바스크립트는 Ecmascript 로 발전하면서 다양한 기호로 연산자를 표시하게 된다. 가장 많이 쓰이는 논리연산자 Or (||) 연산자, And (&&) 연산자, Not(!) 연산자부터 조건 삼항 연산자( 조건 ? 값1 : 값2) 까지. 그 중에서 오늘은 물음표 기호르 쓰는 연산자인 OptIoN chaing에 대해 글을 써보려고 한다.

 

Optional chaining (?)은 영어 표현식 그대로 옵션으로 표기하는 연산자인데, 이는 있을 수도 있고 없을 수도 있는 값을 undefined 으로 return을 해주는 것이다. 보통 그 값이 없을 경우 error 로 리턴이 되는데, error 가 아닌 undefined 으로 리턴해주어서 error가 아니게 해준다.

 

예)

const adventurer = {
  name: 'Alice',
  cat: {
    name: 'Dinah'
  }
};

const dogName = adventurer.dog?.name;
console.log(dogName);
// expected output: undefined

console.log(adventurer.someNonExistentMethod?.());
// expected output: undefined

 

 

출처

developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Operators/Optional_chaining

Optional chaining - JavaScript | MDN

위의 예시를 보면 dog의 값이 adventurer 변수(데이터) 안에는 없기 때문에 undefined 가 출력된다. 그럼 언제, 왜. 이 연산자를 쓸까? adventurer 값이 예시에서는 변수로 쓰였으나 실제로 어떤 json 데이터 값이 있다고 하자. 그 json 데이터 값이 배열로 이루어졌거나 여러가지 이유로 값이 있을 수도 있고 없을 수도 있다. 그런데 만약 그냥 쓰게 되면 화면상에서는 데이터 값이 없을 경우에는 error로 표시가 되지 않는데, 위의 optional chaing 을 쓰게 되면 에러로 표시되지 않고 화면에 그냥 표시된다.

 

이처럼 어떤 데이터 값이 있을 수도 있고 없을 수도 있는데, 에러로 화면에 표시되지 않기 위해서 하기 위해서 위의 연산자를 쓰면 매우 유용하다.