[Javascript] Optional chaning (?.)

1. Optional chaning이란?

Optional chaning연산자(?.)는 체인의 각 참조가 유효한지 명시적으로 검증하지 않고, 연결된 객체 체인 내에 깊숙히 위치한 속성 값을 읽을 수 있게 해준다.

 

?. 연산자는 . 체이닝 연산자와 유사하게 작동하지만, 만약 참조가 nullish(null 또는 undefined)이라면, 에러가 발생하는 것 대신에 표현식의 리턴 값은 undefined로 단락된다. 함수 호출에서 사용될 때, 만약 주어진 함수가 존재하지 않는다면, undefined를 리턴한다.

 

따라서 참조가 누락될 가능성이 있는 경우 연결된 속성으로 접근할 때 더 짧고 간단한 표현식이 생성된다. 어떤 속성이 필요한 지에 대한 보증이 확실하지 않는 경우 객체의 내용을 탐색하는 동안 도움이 될 수 있다.

 

 

2. 문법

obj?.prop
obj?.[expr]
arr?.[index]
func?.(args)

[설명]

optional chaining 연산자는 참조나 기능이 undefined 또는 null일 수 있을 때 연결된 객체의 값에 접근하는 단순화할 수 있는 방법을 제공한다.

 

예를 들어, 중첩된 구조를 가진 객체에서 obj가 있다. optional chaining이 없이 깊이 중첩된 하위 속성을 찾으려면, 다음과 같이 참조를 확인해야 한다.

let nestedProp = obj.first && obj.first.second;

obj.first의 값은 obj.first.second의 값에 접근하기 전에 null (그리고 undefined)가 아니라는 점을 검증한다. 이는 만약에 obj.first를 테스트 없이 obj.first.second에 직접 접근할 때 일어날 수 있는 에러를 방지한다.

 

그러나 optional chaining 연산자를 사용하여, obj.first.second에 접근하기 전에 obj.first의 상태에 따라 명시적으로 테스트하거나 단락시키지 않아도 된다

let nestedProp = obj.first?.second;

 

.대신에 ?. 연산자를 사용함으로써, 자바스크립트는 obj.first.second에 접근하기 전에 obj.first가 null또는 undefined가 아니라는 것을 암묵적으로 확인하는 것을 알고 있다. 만약 obj.first가 null또는 undefined이라면, 그 표현식은 자동으로 단락되어 undefined가 반환된다.

 

이는 임시 변수가 실제로 생성되지 않는다는 점을 제외하고 다음과 동일하다.

let temp = obj.first;
let nestedProp = ((temp === null || temp === undefined) ? undefined : temp.second);

 

 

 

3. 사용 유의점

3.1 ?.앞의 변수는 꼭 서넌되어 있어야 한다.

아래 변수 user가 선언되어 있지 않으면 user?.anything 평가시 에러가 발생한다.

// ReferenceError: user is not defined
user?.address;

user?.anything을 사용하려면 let이나 const, var를 이용해 user를 정의해야 한다. 이렇게 Optional chaining은 선언이 완료된 변수를 대상으로만 동작한다.

 

 

3.2 Optional chaning을 남용하지 않아야 한다.

?. 는 존재하지 않아도 괜찮은 대상에만 사용해야 한다.

let user = null;

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

사용자 주소를 다루는 위의 예시에서 user는 반드시 있어야 하는데 address는 필수 값이 아니다. 그러니 user.address?.street를 사용하는 것이 바람직하다.

실수로 인해 user에 값을 할당하지 않았다면 바로 알아낼 수 있도록 해야 한다. 그렇지 않으면 에러를 발견하지 못하고 디버깅이 난해해진다.

 

 

3.3 Optional chaning은 할당자 왼쪽에서 사용할 수 없다.

let object = {};
object?.property = 1; // Uncaught SyntaxError: Invalid left-hand side in assignment

?.은 읽기나 삭제하기에는 사용할 수 있지만 쓰기에는 사용할 수 없다.

 

 

3.4 단락 평가

Optional chaning은 왼쪽 평가 대상에 값이 없으면 즉시 평가를 멈춘다. 참고로 이런 평가 방법을 단락 평가(short-circuit)라고 부른다.

let user = null;
let x = 0;

user?.sayHi(x++); // 아무 일도 일어나지 않는다.
alert(x); // 0, x는 증가하지 않는다.

 

 

 

 

---

#References

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Operators/Optional_chaining

Optional chaining - JavaScript | MDN

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

옵셔널 체이닝 '?.'