[TIL] 옵셔널 체이닝?

* 옵셔널 체이닝이란(Optional Chaining) ?

옵셔널 체이닝(Optional Chaining)은 ES2020에서 등장한 새로운 연산자로서 '?.' 의 형태로 사용하며 체인으로 이루어진 각 참조가 유효한지 명시적으로 검증하지 않고 연결된 객체 체인 내에 깊숙히 위치한 속성 값을 읽을 수 있는 연산자입니다.

체이닝 연산자와 비슷하게 동작하지만, 만약 참조가 null 혹은 undefined여도 에러식을 뱉지 않고 undefined값을 리턴합니다. 함수 호술시에도 마찬가지로 값이 없다면 undefined를 리턴합니다.

옵셔널 체이닝을 사용함으로써 문법의 가독성이 올라가고 한결 간결한 표현식으로 작성할 수 있게됩니다.

속성값이 존재한다는 확실한 보증이 없을 경우 그 객체를 탐색하는데 도움을 줍니다.

또한 값이 누락될 가능성이 있는 경우에 옵셔널 체이닝을 사용하면 프로그램의 안정성을 높일 수 있고 보다 간단하게 표현할 수 있습니다.

코드를 통해 알아보겠습니다.

const animals = {
	cat: {
    	name: "나비"
    },
    lion: {
    	name: "호랑이"
    }
}

const dogName = animals.dog?.name;

console.log(dogName); // 결과는??

위 코드에서 찍히는 console.log는 undefined이다. 문법의 종류에는 obj?.prop / obj?.[expr] / arr?.[index] / func?.(args)가 있고 object, array, function에서 중첩된 속성값을 읽을 때 도움이 됩니다.

❓그럼 옵셔널 체이닝을 사용하지 않고 값을 입력할때는 어떤 값이 나올까요❓

답은 아래와 같습니다.

const animals = {
	cat: {
    	name: "나비"
    },
    lion: {
    	name: "호랑이"
    }
}

const dogName = animals.dog?.name;

console.log(dogName);
// 결과 : Uncaught TypeError: Cannot read properties of undefined (reading 'name')

const nestedProps = obj.first && object.first.name

이처럼 중첩구조를 가진 object에서 객체의 속성값을 찾기 위해선 이런식으로 참조를 확인하여야 했었다.  논리 연산자 &&를 이용하여 좌항 연산자가 truty한 경우에만 object.first.name을 불러올 수 있었다.

하지만 이를 간단이 하여서 

const nestedProps = obj.first?.name;

으로 표현하여 first의 값이 존재하면 name을 반환하고 없으면 undefined를 반환한다. 이를 풀어서 해석하면

const nestedProp = ((obj.first === null || obj.first === undefined) ? undefined : obj.first.name);

이런 식이 될 수 있겠다.

* 옵셔널 체이닝의 단축 평가

옵셔널 체이닝(?.)은 바로 앞에있는 평가 대상에만 적용되고 확장되지 않습니다.

let users = null

console.log(users?.user)
console.log(users?.user.name)
// undefined
// undefined

옵셔널 체이닝은 평가 대상이 nullish 한 경우 즉시 평가를 멈추게됩니다.
이를 옵셔널 체이닝의 단축 평가라고 합니다.
이러한 이유 떄문에 name 프로퍼티까지 평가하지 않고 중간에 평가를 멈춘 후 undefined를 반환하여 에러가 발생하지 않는 것입니다.

*nullish : null or undefined

참조 : https://rootjang-dev.tistory.com/2 [루트장의 Dev 일기:티스토리]

https://yoo11052.tistory.com/168