[모던 JavaScript 튜토리얼] - [4.6] 옵셔널 체이닝(optional-chaning)

IRISH·2024년 1월 29일

JS

목록 보기

46/80

학습일자 : 2024.01.29
참고 URL
- https://ko.javascript.info/optional-chaining
- https://coding-farmer.tistory.com/4

학습 내용

옵셔널 체이닝의 정의

⇒ optional chaning연산자 (?.)는 객체 내의 key에 접근할 때 그 참조가 유효한지 아닌지 직접 명시하지 않고도 접근할 수 있는 연산자

⇒ ?. 앞의 평가대상이 만약 nullish ( undefined 또는 null ) 일 경우 평가를 멈추고 undefined를 반환

⇒ 코드를 짜면서 객체내의 값을 접근하는 경우가 종종 있습니다. 하지만 항상 그 key값이 존재하는 경우 보다는 없는 경우도 있음

옵셔널 체이닝 상세

옵셔널 체이닝은 신식 브라우저에서 작용한다.
?. 을 사용하면 프로퍼티가 없는 객체에 에러 없이 안전하게 접근이 가능하다.

user && user.address && user.address.street
- 이렇게 사용하면 코드가 길어진다.
user?.address?.street
- 위 코드를 이렇게 짧게 표현할 수 있음

?. : 해당 객체가 undefined 이나 null이면 평가를 멈추고 undefined를 반환한다.
옵셔널체이닝은 존재하지 않아도 괜찮은 대상에만 사용하는 것이 바람직하다.
?.은 연산자가 아닌 특별한 문법 구조체(Sysnatx construct) 이다.
delete와 조합하여 사용 가능하다.

delete user?.name

읽기나 삭제에는 사용가능하지만, 쓰기에는 사용 불가능하다.

user?.name = "Violet"; // SyntaxError: Invalid left-hand side in assignment

옵셔널 체이닝(?.) 사용방식 4가지

obj?.prop : obj가 존재하면 prop 반환, 없으면 undefined 반환
obj?.[prop] : obj가 존재하면 prop 반환, 없으면 undefined 반환
obj?.method() : obj가 존재하면 method()호출, 아니면 undefined 반환
obj.method?.() : obj의 메서드 method가 존재하면 메소드 실행, 아니면 undefined 반환

옵셔널 체이닝 장점

⇒ https://coding-farmer.tistory.com/4

1. if문을 줄여줍니다.

nullish연산자와 함께 쓰면 기본값 주기에 용이합니다.
대괄호 표기법에도 옵셔널 체이닝이 가능합니다.
존재하지 않을 수 있는 메서드를 호출할 때도 유용합니다.

5.배열에도 사용 가능합니다.

주의할 점

존재하지 않아도 괜찮은 대상에만 적용해야합니다. 에러를 피하기 위해서 남용하다가 디버깅이 어려워질 수 있습니다.
?.(optional chaining)앞에 오는 변수는 선언이 되어 있어야합니다.

실습 내용

let user = {};                          // 주소 정보가 없는 사용자

console.log( user?.address?.street );   // undefined, 에러가 발생하지 않습니다.

/* ?.은 ?. ‘앞’ 평가 대상에만 동작되고, 확장은 되지 않는다 */
let user1 = null;

console.log( user1?.address );          // undefined
console.log( user1?.address.street );   // undefined

/* user가 null이나 undefined가 아니고 실제 값이 존재하는 경우엔 반드시 user.address 프로퍼티는 있어야 합니다. 
그렇지 않으면 user?.address.street의 두 번째 점 연산자에서 에러가 발생 */
let user2 = "null";

console.log( user2?.address );              // undefined
// console.log( user2?.address.street );    // error
console.log( user2.address?.street );       // undefined