쓸 일이 있을까?
모던 자바스크립트를 공부하다 옵셔널 체이닝 연산자를 내가 쓸 일이 있을까? 하는 의문이 들었다. 최신 문법이라 모든 브라우저에서 호환이 안 된다는 문제가 아니라 옵셔널하게 체이닝하는 것이 옳은가? 고민이 들었다.
왜 쓰는 걸까?
에러가 나지 않게 하기 위해 사용한다는 것이 나의 결론이었다. 옵셔널 체이닝은 방어적 프로그래밍 기법으로 nullish 값을 참조할 때 발생하는 에러를 방지해준다.
const user = {};
console.log(user.address.street); // TypeError: Cannot read property 'street' of undefined위의 코드를 실행하면 TypeError가 발생한다. .연산자는 좌항의 피연산자가 객체인지 확인하고 객체가 맞다면 좌항의 객체의 프로퍼티로 우항의 피연산자가 존재하는 지 확인한다. user.address가 undefined인데 undefined를 참조하여 에러가 발생하였다.
어떻게 쓰는 걸까?
옵셔널 체이닝 연산자가 등장하기 전에는 nullish 값에 참조하는 오류를 발생시키지 않게 하기 위해 논리 연산자(&&)를 사용하였다.
const user = {};
console.log(user && user.address && user.address.street); // undefined위 코드의 동작 원리는 단축 평가에서 확인할 수 있다.
user 혹은 user.address가 falsy 값이라면 user.address.street에 가기 전에 해당 값을 반환하고 식을 종료하기 때문에 문제가 생길 수 있는 식을 실행하지 않는다.
위 코드에서는 user.address가 undefined기 때문에 undefined가 콘솔에 출력된다.
const user = {};
console.log(user.address?.street); // undefined옵셔널 체이닝 연산을 이용하면 && 연산을 길게 쓸 필요없이 사용할 수 있다.
falsy vs nullish
옵셔널 체이닝 연산을 이용하면 단순히 길게 쓴 식을 줄일 수 있을 뿐 아니라 좀 더 다양한 값을 활용할 수 있다. && 연산은 falsy 값과 truthy 값만 구분한다. 0 혹은 빈 문자열 같은 값을 유효한 값으로 사용하고 싶어도 && 연산은 이러한 값을 false로 구분한다.
const str = '';
console.log(str && str.length) // ''const js = '';
console.log(str?.str.length) // 0빈 문자열을 값으로 사용할 수 있다.
falsy(false로 평가되는 값)
- +/-0
- NaN
- false
- undefined
- null
- ''(빈 문자열)
nullish
- undefined
- null
그런데...
없는 객체를 왜 참조하는걸까?
없어도 되거나 있는지 없는지 불확실한 객체를 참조하는 일을 만들지 않는게 더 바람직한 코딩이 아닐까?
에러를 왜 안나게 하는 걸까
에러는 필요하면 나야한다. undefined null에 참조해놓고 에러 대신 undefined가 나왔다고 에러 안났다 만세! 할 일은 아니지 않을까?
필요할 때 에러가 나야 디버깅을 할 수 있는 것 아닐까?
위의 두 원인이 옵셔널 체이닝 연산을 쓸 일이 있을까? 옵셔널하게 객체에 접근하는 일이 필요할까 생각하게 된 이유이다.
그런데 이 후의 고민이 해결되면 글을 추가하겠습니다.
출처
모던 JavaScript 튜토리얼
도서: 모던 자바스크립트 deep dive
