자바스크립트에서는 객체 내부의 속성에 접근하기 위해 점(.) 또는 대괄호([])를 사용할 수 있습니다. 하지만 객체의 속성이 중첩되어 있는 경우에는 접근 방법이 약간 복잡해질 수 있습니다. 이번 포스트에서는 중첩된 속성에 접근하는 방법에 대해 알아보겠습니다.

점(.)을 사용한 접근

점(.)을 사용하여 객체의 속성에 접근하는 것은 일반적으로 가장 직관적이고 간편한 방법입니다. 하지만 속성이 중첩되어 있는 경우에는 점을 연달아 사용하여 차례로 접근해야 합니다.

아래는 중첩된 객체에서 속성에 점을 사용하여 접근하는 예제입니다.

const person = {
  name: "John",
  age: 30,
  address: {
    street: "123 Main St",
    city: "New York"
  }
};

console.log(person.name); // "John"
console.log(person.address.street); // "123 Main St"

대괄호([])를 사용한 접근

대괄호([])를 사용하여 객체의 속성에 접근하는 방법은 조금 더 유연한 방법입니다. 중첩된 속성에 접근할 때는 대괄호를 연달아 사용하여 차례로 접근하면 됩니다.

아래는 대괄호를 사용하여 중첩된 객체에서 속성에 접근하는 예제입니다.

const person = {
  name: "John",
  age: 30,
  address: {
    street: "123 Main St",
    city: "New York"
  }
};

console.log(person['name']); // "John"
console.log(person['address']['street']); // "123 Main St"

대괄호를 사용하는 방법은 변수를 사용하여 동적으로 속성에 접근할 때 유용합니다.

Optional Chaining (선택적 체이닝)

ES2020에서 도입된 Optional Chaining은 중첩된 속성에 접근할 때 더욱 간편하게 코드를 작성할 수 있는 기능입니다. Optional Chaining을 사용하면 중첩된 속성이 없는 경우 undefined를 반환하므로 코드에서 발생할 수 있는 에러를 방지할 수 있습니다.

아래는 Optional Chaining을 사용하여 중첩된 속성에 접근하는 예제입니다.

const person = {
  name: "John",
  age: 30
};

console.log(person.address?.street); // undefined

마무리

이번 포스트에서는 자바스크립트에서 객체의 중첩된 속성에 접근하는 방법에 대해 알아보았습니다. 점(.)이나 대괄호([])를 사용하여 속성에 접근할 수 있으며, ES2020에서는 Optional Chaining을 사용하여 보다 간편하게 접근할 수 있습니다.

더 자세한 정보는 MDN 문서를 참고하십시오.