FRONTEND/React

[JavaScript] Optional Changing (?.)

neeon 2022. 9. 23. 15:39
728x90

공부하다가 ?. 라는 첨 보는 문법이 나와서 검색하려고 했더니 ?. 키워드는 검색이 안됨..

그래서 더 찾아보니 이걸 Optional Changing이라고 한다더라 ~

 

참고로 이 문법은 javascript.info 에 검색하면 최근에 추가된 문법이라고 뜰 정도임

처음 보는게 ㅇㅇ 당연함

옵셔널 체이닝(optional Chaining) 인 ?. 을 사용하면, 프로퍼티가 없는 중첩 객체를 에러 없이 안전하게 접근할 수 있다고 한다.

 

배경)

어떤 페이지에 존재하지 않는 요소에 접근하여 요소의 정보를 가져오려고 하면 문제가 발생한다.

 

// querySelecter(...) 호출 결과가 null인 경우 에러 발생
let html = document.querySelector('.my-element').innerHTML;

 

그래서 이런 문제들을 해결하기 위하여 && 연산자를 사용하곤 했는데...

let user = {}; //주소 정보가 없는 사용자
alert( user && user.address && user.address.street); // undefined, 에러가 발생하지 않음

중첩 객체의 특정 프로퍼티에 접근하기 위해 거쳐야 할 구성 요소들을 AND(&&)로 연결하여 실제 해당 객체나 프로퍼티가 있는지 확인하는 방법을 사용했었다. 이렇게 AND 연산자를 이용하여 연결하면 코드가 아주 길어진다는 단점이 존재..

 

그래서 옵셔널 체이닝(?.)이 등장하게 됨.

?.는 ?. '앞'의 평가 대상이 undefined 나 null 이면 평가를 멈추고 undefined를 반환한다.

옵셔널 체이닝을 사용해 user.address.street에 접근해보자.

let user = {};				// 주소 정보가 없는 사용자
alert(user?.address?.street);	// undefined, 에러가 발생하지 않음.

user?.address의 형태로 주소를 읽으면 아래와 같이 user 객체가 존재하지 않더라도 에러가 발생하지 않음.

let user=null;

alert(user?.address);	//undefined
alert(user?.address.street);	//undefined

예시를 보면 ?.는 ?. '앞'의 평가 대상에만 동작되고, 확장에서는 동작하지 않는 것을 볼 수 있다..

참고로, user?. 는 user가 null이나 undefined인 경우에만 처리가 가능하다.

참고 문헌

 

https://ko.javascript.info/optional-chaining

728x90