패스트캠퍼스 - 선택적 체이닝

clouood·2024년 2월 27일

패스트캠퍼스

목록 보기
7/18

자바스크립트의 선택적 체이닝은 망원경이라고 생각하면 쉬울 것 같다. 선택적 체이닝을 사용하면, 객체 안에 있는 속성이나 메서드를 쉽게 접근할 수 있습다. 이 망원경을 이용해서 찾으려는 것이 없다면, 오류를 일으키지 않고 그냥 undefined를 반환한다. 따라서 코드를 작성할 때, 일일이 null 체크나 undefined 체크를 할 필요가 없음. 그러므로 코드가 깔끔해지면서 작성도 더 편리해짐.

위 코드를 실행하면 당연히 해당 속성이 없으므로 undefined가 출력됨.

만약, 값을 null로 할당한 후 name 속성을 찾아보면 에러가 남.

왜냐하면 지금 현재 user가 null인 상황이고, null은 점표기법으로 속성을 조회하는 것이 불가능하기 때문이다. (undefined도 동일)


이를 해결하기 위해서는

점표기법 앞에 물음표를 넣어주면 된다.

그럼 에러를 발생시키지 않고, undefined로 출력해준다.


마지막에는 address 속성 안에 있는 city 속성을 반환하도록 함수를 구성하였다. userA의 경우에는 address, city 속성 모두 있기 때문에

'pangyo'로 잘 출력되지만, userB의 경우, address, city 속성 모두가 없기 때문에 userB.address는 일단 'undefined'가 되고, undefined는 점표기법으로 속성을 찾는 것이 불가능하기 때문에 에러가 나는 것임. 그래서 이것을 해결하기 위해서,

물음표를 사용해서 선택적 체이닝을 하게되면, userB의 경우, user.address는 없는 속성이므로 undefined 처리를 해주고 그 다음 속성을 찾는 작업을 하지 않아도 되게끔 한다. 그래서 출력 결과 또한 'undefined'가 반환됨.

위처럼 OR 연산자를 사용하여 예외처리도 할 수 있음. userB의 경우, user.address 속성은 없으므로 undefined. OR 연산자는 코드를 왼쪽부터 읽으면서 처음으로 만나게 되는 참 값을 반환. 즉, undefined와 오른쪽 문자열 중에서 오른쪽 문자열은 참 값이므로 이를 반환. '주소가 없습니다' 출력.

profile
雲外蒼天

0개의 댓글