JS의 옵셔널체이닝 복습

(JS에서 옵셔널 체이닝 복습하느라 04-07의 10번 예제를 보는 와중)
Q1.
const user = {}; 일때, console.log(user && user.address && user.address.city);

이 값이 어째서 undefined가 나오는 것인가?



A1.
이 코드를 단계별로 설명하겠습니다:

 

1. user 객체 선언:

const user = {};

user는 빈 객체이므로 아무런 속성이 없습니다.

2. 표현식 평가:

console.log(user && user.address && user.address.city);

 

이 표현식을 좌측부터 순서대로 평가하면:

• user 부분: user는 빈 객체 {}로 truthy 값입니다.
• user.address 부분: user 객체에는 address 속성이 없으므로 user.address는 undefined이며, 이는 falsy 값입니다.
• 논리 연산자 &&는 좌측 값이 truthy일 때 우측 값을 평가합니다. 그러나 user.address가 undefined로 falsy이기 때문에, 다음 부분인 user.address.city는 평가하지 않습니다.

3. 논리 연산자 &&의 동작:

• && 연산자는 좌측 값이 falsy이면 그 값을 즉시 반환하고, 그렇지 않으면 우측 값을 반환합니다.
• 따라서 user && user.address의 결과는 undefined입니다.
• 전체 표현식은 undefined && user.address.city가 되는데, 좌측 값이 falsy이므로 전체 결과는 undefined가 됩니다.

4. 결과 출력:

console.log(undefined);

 

따라서 콘솔에 undefined가 출력됩니다.

 

요약: user 객체에 address 속성이 없기 때문에 user.address는 undefined이며, 논리 연산자의 특성상 전체 표현식의 결과는 undefined가 됩니다.

 

 

 

Q2.이것도 옵셔널체이닝의 한 방법인가?

 

 

 

A2.

네, 맞습니다. 해당 코드는 옵셔널 체이닝을 구현하는 전통적인 방법 중 하나입니다.

 

console.log(user && user.address && user.address.city);

이 코드는 단계적으로 다음을 확인합니다:

• user 객체가 존재하는지 (truthy 값인지) 확인합니다.
• user.address 속성이 존재하는지 확인합니다.
• user.address.city 값을 출력합니다.

각 단계에서 값이 undefined 또는 null(즉, falsy 값)이면 그 즉시 undefined를 반환하고 이후의 접근을 방지합니다. 이것은 중첩된 객체의 속성을 안전하게 접근하기 위한 방법입니다.

 

하지만 ES11(ECMAScript 2020)부터는 옵셔널 체이닝(?.) 연산자가 도입되어 더 간편하게 작성할 수 있습니다:

console.log(user?.address?.city);

 

이렇게 하면 각 단계에서 객체나 속성이 존재하지 않으면 자동으로 undefined를 반환하여 오류를 방지합니다. 따라서 이전에 && 연산자를 사용하여 체이닝하던 방식을 옵셔널 체이닝 연산자로 대체할 수 있습니다.

 

 

 

Q3.

즉, console.log(user?.address?.city); 이 코드나, console.log(user?.address); 이 코드나, user 객체 안에 address라는 속성이 undefined 이기에, 그 즉시 undefined 를 반환하고 거기서 멈추는 것이며, 그렇기에 user.address 안에 city 속성이 있는지는 확인도 안하는 것이란 말인가?

 

 

 

A3.

네, 정확합니다.

console.log(user?.address?.city);

이 코드는 다음과 같은 과정을 따릅니다:

• user 객체가 존재하는지 확인: user는 {}로 선언되었으므로 존재합니다.
• user.address 속성이 있는지 확인: user 객체에는 address 속성이 없으므로 user.address는 undefined입니다.
• 옵셔널 체이닝으로 접근 중단: user.address가 undefined이기 때문에 ?. 연산자는 이후의 체이닝을 중단하고 undefined를 반환합니다.
• console.log 출력: 결과적으로 undefined가 출력됩니다.

즉, user 객체에 address 속성이 없으므로 user.address가 undefined이며, 옵셔널 체이닝 연산자 ?.는 undefined나 null을 만나면 평가를 중단하고 undefined를 반환합니다. 따라서 user.address.city를 확인하지 않고 멈추게 됩니다.

 

두 번째 코드도 마찬가지입니다:

console.log(user?.address);

여기서는 user.address가 존재하지 않으므로 undefined가 출력됩니다.

 

요약하면, 옵셔널 체이닝 연산자 ?.는 앞의 속성이 undefined나 null인 경우 평가를 중단하고 undefined를 반환하기 때문에, 존재하지 않는 속성에 안전하게 접근할 수 있게 해줍니다. 따라서 user 객체에 address 속성이 없을 때 user.address.city를 접근하려고 하면 에러가 발생하지 않고 undefined를 반환하여 프로그램이 중단되지 않습니다.