[JS] 옵셔널 체이닝 ?.

옵셔널 체이닝 ?. 은 비교적 스펙에 추가된지 얼마 안된 문법으로, 구식 브라우저에 사용하기 위해서는 폴 리필이 필요한 문법이다.

 

 

 

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

alert(user.address.street); // TypeError: Cannot read property 'street' of undefined

위와같은 경우에, user의 address정보가 없기 때문에 자바스크립트에서 오류를 내보내게 된다.

 

 

 

그 외에 아래와 같이 브라우저에 없는 요소를 접근하려 할때도 오류가 발생하곤한다.

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

 

 

 

따라서 보통 && 연산자를 활용해서, 해당 요소가 있는지 확인하고 그 요소들이 있는 경우에만 접근하는 방법을 사용하곤 했었다.

 

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

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

 

 

물론 이런 방식또한 나쁜건 아니지만 객체구조가 복잡하게 될수록 AND연산자가 많이 필요하게 되어 가독성이 떨어지는 단점이 있었다. 이런 상황에서 ?. 을 활용하면 똑같은 기능을 가독성이 좋게 작성하는것이 가능하다.

 

 

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

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

 

 

단, 해당 문법을 사용할때 user가 비어있어도 오류를 내보내주지 않기 때문에 존재하지 않아도 괜찮은 대상에만 사용해야한다는 주의점이 있다 만약 해당 문법을 남용한다면 원하는 기능대로 작동하지 않지만 오류를 내보내주지 않아 오류의 원인을 찾기 힘들수도 있다.

 

 

 

let user1 = {
  admin() {
    alert("관리자 계정입니다.");
  }
}

let user2 = {};

user1.admin?.(); // 관리자 계정입니다.
user2.admin?.();

 

?. 즉 옵셔널 체이닝은 연산자가 아닌 문법 구조체이므로 함수를 호출하거나 배열이나 객체의 값에 접근하는것도 위와같이 사용하는것이 가능하다.

 

 

let user1 = {
  firstName: "Violet"
};

let user2 = null; // user2는 권한이 없는 사용자라고 가정해봅시다.

let key = "firstName";

alert( user1?.[key] ); // Violet
alert( user2?.[key] ); // undefined

alert( user1?.[key]?.something?.not?.existing); // undefined

 

 

 

 

마지막으로, ?. 은 읽기 혹은 삭제하기에만 사용할 수 있으며 값을 입력할때는 사용할 수 없으니 알아보자.

 

// user가 존재할 경우 user.name에 값을 쓰려는 의도로 아래와 같이 코드를 작성해 보았습니다.

user?.name = "Violet"; // SyntaxError: Invalid left-hand side in assignment
// 에러가 발생하는 이유는 undefined = "Violet"이 되기 때문입니다.

 

 

 

해당 문법을 활용해서 꼭 객체가 무조건적으로 존재하지 않는 경우에도 코드를 짜보자.