[JS] Optional Chaining 연산자 사용 방법

 안전하게 객체에 deep하게 접근하기 위해 현업에서 &&연산자를 활용하여 접근했었다.

 

편하긴한데, 자주 사용하다보면 이게 꽤 지저분하게 보이는것을 확인할 수 있었다.

그래서 Optional Chaining 연산자를 활용해보며 조금 깔끔하게 사용하는 방법에 대해 공유를 합니다.

 

임직원 객체에 대한 정보가 아래와 같습니다.

예를들어 emp안에 info라는 객체 안에 job이라는 객체 안에 "pay"라는 값에 대해서 가져오고싶다고 가정합니다.

const emp = {
    name: 'kim',
    info: {
        empNo: 1001,
        job: {
           position: 'FE-Dev',
           pay: 1234
        },
    },
};

 

1. && 연산자

아래는 &&연산자를 활용하여 접근했습니다.

이렇게 접근하다보면 .으로 접근하여 같은 객체나 변수를 계속 사용하게 됩니다.

// && 연산자
console.log(emp && emp.info && emp.info.job && emp.info.job.pay);

 

2. Optional Chaining 연산자

아래와 같이 Optional Chaining 연산자를 사용하게 되면 &&연산자보다 깔끔하게 접근할 수 있습니다.

단, 상위 객체(emp)는 반드시 undefined라도 있어야 합니다.

// Optional chaining 사용
console.log(emp.info?.job?.pay);

 

예를들어 emp라는 객체의 값이 백엔드로부터 받지 못하여 undefined로 들어왔다고 가정해봅니다.

const emp = undefined;

&&연산자로 받아올 경우 enp가 이미 undefined이기때문에 emp && 뒤에 있는 객체에 접근을 하지 않습니다.

console.log(emp && emp.info && emp.info.job && emp.info.job.pay);

 

하지만 Optional Chaining으로 받아올 경우 아래와 같이 emp가 undefined인데도 .으로 접근하다보니 에러가 납니다.

console.log(emp.info?.job?.pay);