JavaScript 관련 글입니다.

• JS Event Loop, 자바스크립트 동작 원리
• 호이스팅이란 , var, let, const 차이
• Three.js에 대해
• script, script async, script defer의 차이
• AJAX가 무엇일까?
• 함수선언식과 함수표현식
• null과 undefined의 차이 간단정리
• setTimeout과 setInterval 요약
• this의 여러가지 의미
• Spread Operator(...)?
• JS class Constructor
• ES6 Destructuring Syntax
• default 파라미터 알아보기
• import / export 를 사용한 모듈식 개발방법
• Optional Chaining (?.)
• 프로미스(Promise)에 대해서
• ES8 - async / await
• Symbol 자료형?
• forEach, for in, for of 알아보기
• JSON형식 변환 방법 - JSON.parse(), JSON.stringify()
• 자바스크립트 가비지 컬렉션
• 화살표 함수와 일반함수의 차이
• JavaScript Array.reduce() 간단히 알아보기

이번 글에서는 ?. (Optional Chaining)에 대해서 알아보겠습니다.

Optional Chaining(?.)

const person = {
    name : 'kim',
    age : 26,
    phoneNumber : '010-1234-5678'
}

console.log(person.name);

person이라는 object가 있습니다. 여기서 ‘person.name’을 찾고싶습니다.
콘솔에는 당연히 ‘kim’이 출력될 것입니다.

const person = {
    name : 'kim',
    age : 26,
    phoneNumber : '010-1234-5678'
}

console.log(person?.name);

Optional Chaining은 위처럼 . 옆에 ?를 붙이는 것인데, 위의 ‘person?.name’은 무슨 의미일까요?
person이 null이거나 undefined이면 undefined로 하라는 의미입니다.

어떤 경우에 사용을 하면 좋을까요?

var user = {
    name : {last : 'kim', first : 'subin'},
    age : 26,
    phoneNumber : '010-1234-5678'
}

console.log(user.name1?.first);

위와 같이 object가 중첩되어있는 경우에 사용하면 좋습니다. 만약 자료가 깊이 있고 자료를 찾을 때 실수를 해서 잘못찾는 경우에 에러가 날 수 있습니다. null이거나 undefined인 경우에 . 을 이용해서 자료를 찾으면 에러를 발생시키기 때문입니다. 실제 서비스에서 이런 에러가 발생할 경우에는 위험할 수 있고 에러발생시 다른 코드가 정상적으로 동작하지 않을 수 있습니다.

그리고 보통은 if문을 이용해서 undefined이거나 null일 경우에 처리를 해주는 경우가 있는데 ?. 을 사용하면 에러를 발생시키지 않아서 유용합니다. 물론 근본적으로 에러를 해결해주는 것은 아니며 에러가 발생하지 않도록 숨겨주는 역할을 하는 것이 ?. 입니다.

End.