JavaScript - Optional Chaining 선택적 체인

최근 추가된 Javascript 문법중 optional chaining은 객체를 검증할 때 사용한다.

 

평소 개발을 하다 보면 항상 object에 접근했을 때 해당 값이 없을 때 항상 오류를 발생하는 경우가 굉장히 많다.

 

이럴때 앱이 멈추지 않고 단순 undefined를 리턴하는 값을 출력해주는 optional chaining 문법을 사용하면 좋다.

 

optional chaining는 문법은 "object?.key"로 물음표와 콤마를 합성해 주면 된다. 보통 object에 key 값을 접근할 때는 단순히 콤마(.)를 사용해서 접근했지만 물음표와 같이 사용하여 객체에 접근하는 것은 굉장히 생소할 것이다.

 

이 문법이 생기기전에는 이러한 오류를 사전에 검증하기 위해 조건문에 AND(&&)을 사용하여 객체가 있는지 && 객체의 키값이 있는지 확인하곤 했었지만 이러한 문법도 물음표+콤마(?.)로 더욱 간결하게 코드를 작성할 수 있게 되었다.

 

그럼 콤마와 물음표+콤마의 차이가 어떻게 되는지 알아보자.

 

기존의 코드를 사용했을 때 발생하는 TypeError

Javascript로 개발을 하다보면 자주보게 되는 TypeError다.

이러한 문제점으로 인해 선택적 체인 문법을 사용하면 된다. 앱을 사용하던 도중 TypeError가 나와 앱이 멈춘다면 그 이후로 스크립트가 동작하지 않아 사용자들은 정말 혼란스러울 것이다.(이건 개발자도 마찬가지...)

 

기존 AND 조건을 사용한 결과와 선택적 체인을 사용한 결과는 값이 false로 같다.

이러한 에러를 위한 방어코드로 AND조건을 주면 return 값으로 undefined를 출력해준다.

리턴 값이 undefined 일때의 적절한 상황에 맞는 코드를 추가해줘서 앱이 멈추는 일은 없도록 해준다.

 

위 예제를 보면 알겠지만 AND조건을 사용한 결과보다 선택적 체인 문법을 사용한 부분이 더욱 간결하고 명확하게 확인 할 수 있다.

 

object의 깊이에 따라 AND 조건으로 계속 나열을 하다 보면 정말 많은 조건을 추가해줘야될 뿐만 아니라 코드의 길이가 길어져 유지보수에도 굉장히 까다롭게 느껴진다.

 

선택적 체이닝 문법으로 object의 탐색을 효과적으로 사용할 수 있다!