이제 막 자바스크립트를 배우기 시작했다면 옵셔널 체이닝이 등장하게 된 배경 상황을 직접 겪어보지 않았을 겁니다. 몇 가지 사례를 재현하면서 왜 옵셔널 체이닝이 등장했는지 알아봅시다.
사용자가 여러 명 있는데 그중 몇 명은 주소 정보를 가지고 있지 않다고 가정, 이럴 때 user.address.street를 사용해 주소 정보에 접근하면 에러가 발생할 수 있다.
let user = {}; //주소 정보가 없는 사용자
console.log(user.address.street); // TypeError: Cannot read property 'street' of undefined
// querySelector(...) 호출 결과가 null인 경우 에러 발생
let html = document.querySelector('.my-element').innerHTML;
let user = {}; // 주소 정보가 없는 사용자
alert( user && user.address && user.address.street ); // undefined, 에러가 발생하지 않습니다.
?.은 ?. '앞'의 평가 대상이 undefined나 null이면 평가를 멈추고 undefined를 반환
설명이 장황해지지 않도록 지금부턴 평가 후 결과가 null이나 undefiend가 아닌 경우엔 값이 '있다' 혹은 '존재한다'라고 표현하겠습니다.
이제 옵셔널 체이닝을 이용해 user.address.street에 안전하게 접근
let user = {}; //주소 정보가 없는 사용자
console.log(user?.address?.street); //undefined, 에러가 발생하지 않는다.
let user = null;
conosle.log(user?.address); //undefined
console.log(user?.address.street); //undefiend
옵셔널 체이닝을 남용하지 마세요.
?.앞의 변수는 꼭 선언되어 있어야 합니다.
변수 user가 선언되어있지 않으면 user?.anything 평가시 에러가 발생합니다.
//ReferenceError:user is not defined
user?.address;
user?.anytging을 사용하려면 let 이나 const, var를 사용해 user를 정의해야 하죠. 이렇게 옵셔널 체이닝은 선언이 완료된 변수를 대상으로만 동작
?.는 왼쪽 평가대상에 값이 없으면 즉시 평가를 멈춤. 참고로 이런 평가 방법을 단락 평가라고 부름.
그렇기 때문에 함수 호출을 비롯한 ?. 오른쪽에 있는 부가 동작 ?.의 평가가 멈췄을 때 더는 일어나지 않습니다.
let user =null;
let x = 0;
user?.sayHi(x++); //아무 일도 일어나지 않습니다.
console.log(x); //0, x는 증가 하지 않습니다.
?.은 연산자가 아닙니다. ?.은 함수나 대괄호와 함께 동작하는 특별한 문법 구조체 입니다.
함수 관련 예시와 함께 존재 여부가 확실치 않은 함수를 호출할 때 ?.()를 어떻게 쓸 수 있는지 알아봅시다.
한 객체엔 메서드 admin이 있지만 다른 객체엔 없는 상황
let user1 = {
admin*(){
console.log("관리자 계정입니다.");
}
}
let user2 ={};
user1.admin?.(); //관리자 계정입니다.
user2.admin?.();
let user1 = {
firstName:"violet"
}
let user 2 = null; // user2는 권한이 없는 사용자라고 가정
let key = "firstName";
console.log( user1?.[key]) ; //violet
console.log( user2?.[key]) ; //violet
console.log(user1?.[key]?.something?.not?.existing); //undefined
delete user?.name; //user가 존재하면 user.name을 삭제
//user가 존재할 경우 user.name에 값을 쓰려는 의도로 아래와 같이 코드를 작성
user?.name = "Violet" // SyntaxError: Invalid left-hand side in assignment
// 에러가 발생하는 이유는 undefined = "Violet"이 되기 때문입니다.
위 내용은 javascript.info사이트에서 공부한 내용 정리
자세한 내용은 아래 링크를 참고하세요
https://ko.javascript.info/optional-chaining