옵셔널 체이닝이란?. javascript optional chaining ?.

😎 옵셔널 체이닝이란?

✅ 옵셔널 체이닝?.

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

 

 

✅ 옵셔널 체이닝이 필요한 이유

없는 정보

사용자가 여러 명 있고, 그중 몇 명은 주소 정보를 가지고 있지 않다고 가정해보자.

이럴 때 user.address.street를 사용해 주소 정보에 접근하면 에러가 발생할 수 있다.

let user = {} //주소 정보가 없는 사용자
console.log(user.address.street) //TypeError: Cannot read property 'street' of undefined

 

아직 그려지지 않은 DOM

또 다른 상황으로는 자바스크립트를 사용해서

페이지에 존재하지 않는 요소에 접근해 요소의 정보를 가져오려 하면 문제가 발생한다.

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

 

그래서 우리는 이런 문제들을 해결하기 위해 && 연산자를 사용해왔다.

let user = {} //주소 정보가 없는 사용자
console.log( user && user.address && user.address.street )
//undefined, 에러가 발생하지 않는다

이렇게 AND를 연결해서 사용하면 코드가 아주 길어진다는 단점이 있다.

 

 

✅ 옵셔널 체이닝의 등장 ' ?. '

?.은 ?.'앞’의 평가 대상이 undefined나 null이면 평가를 멈추고 undefined를 반환한다.

맨 처음 예시 코드와 비교해보자.

// ?. 미사용
let user = {} //주소 정보가 없는 사용자
console.log(user.address.street) //TypeError: Cannot read property 'street' of undefined

// ?.사용
let user = {} //주소 정보가 없는 사용자
console.log( user?.address?.street ); //undefined, 에러가 발생하지 않는다

 

옵셔널 체이닝 핵심

• ?.은 ?. ‘앞’ 평가 대상에만 동작되고, 확장 되지는 않는다
• ?.앞의 변수는 꼭 선언되어 있어야 한다.
  변수 user가 선언되어있지 않으면 user?.anything 평가시 에러가 발생한다.
• 문법 : obj?.prop     
            obj?.[expr]
            obj?.()
            arr?.[index]
            func?.(args)

user?.address //ReferenceError: user is not defined

 

옵셔널 체이닝 주의점

• 옵셔널 체이닝을 남용하지 말자.
• ?.는 존재하지 않아도 괜찮은 대상에만 사용해야 한다.⭐

사용자 주소를 다루는 위의 예시에서

논리상 user는 반드시 있어야 하고, address는 필수값이 아니다.

그러니 user.address?.street를 사용하는 것이 바람직한 사용법이다.
왜냐면 어떠한 실수로 인해 꼭 필요한 정보인 user에 값을 할당하지 않았다면

이 사실을 바로 알아낼 수 있도록 해야 한다.

이러한 에러를 조기에 발견하지 못한다면 문제 파악과 디버깅이 어려워진다.

 

단락 평가

논리 연산 시 첫 번째 값만으로 결과가 확실할 때 두 번째 값은 평가하지 않는 방법

?.는 왼쪽 평가 대상에 값이 없으면 즉시 평가를 중단한다.
그렇기 때문에 ?. 오른쪽 부가 동작은 ?.의 평가가 멈췄을 때 중단된다.

let user = null;
let x = 0;
user?.hello(x++); // hello()는 중단된다
console.log(x); // 0, x는 증가하지 않는다

 

?.의 사용 기능

사용 가능 : 읽기, 삭제

사용 불가 : 쓰기

// 삭제
delete user?.name //user가 존재하면 user.name을 삭제

// 쓰기
user?.name = "opntional" //SyntaxError: Invalid left-hand side in assignment
//undefined = "opntional" 되기 때문에 에러 발생

 

 

💡 옵셔널 체이닝 정리

• ?.은 ?.왼쪽 평가대상이 없어도 괜찮은 경우에만 선택적으로 사용해야 한다.
• ?.(optional chaining)앞에 오는 변수는 선언이 되어 있어야 한다.
• 꼭 있어야 하는 값인데 없는 경우에 ?.을 사용하면 프로그래밍 에러를 쉽게 찾을 수 없으므로 
  이런 상황을 만들지 않도록 하자!

console.log(user?.address?.street) // user 객체가 꼭 있어야 할 필요가 없다는 뜻
console.log(user.address?.street); // user 객체가 없다면 에러 발생

 

자바스크립트 최고!

 

 

 

 

참고

https://ko.javascript.info/optional-chaining

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