자바스크립트 객체 속성 접근(Property Access)

09 Sep 2023

자바스크립트에서 객체의 속성에 접근하는 방법은 여러 가지가 있습니다. 이번 포스트에서는 자바스크립트 객체 속성 접근에 대해 알아보겠습니다.

1. 점 표기법 (Dot notation)

가장 일반적인 방법은 점 표기법을 사용하는 것입니다. 점 표기법을 사용하여 객체의 속성에 접근할 수 있습니다.

예를 들어, 다음과 같은 객체가 있다고 가정해봅시다.

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

객체의 속성에 접근하기 위해서는 다음과 같이 사용할 수 있습니다.

var name = person.name; // "John"
var city = person.address.city; // "New York"

또 다른 방법은 대괄호 표기법을 사용하는 것입니다. 대괄호 표기법은 점 표기법과 유사하지만, 변수를 사용하여 동적으로 속성에 접근할 수 있습니다.

예를 들어, 다음과 같은 변수가 있다고 가정해봅시다.

var propertyName = "name";

이 변수를 사용하여 대괄호 표기법으로 객체의 속성에 접근할 수 있습니다.

var name = person[propertyName]; // "John"

ES2020에서는 옵셔널 체이닝 연산자가 도입되어서 객체의 중첩된 속성에 접근할 때 유용하게 사용될 수 있습니다. 이 연산자를 사용하면 중첩된 속성이 존재하지 않는 경우 에러를 발생시키지 않고 undefined를 반환합니다.

옵셔널 체이닝 연산자는 ?.으로 표기하며 다음과 같이 사용할 수 있습니다.

var street = person.address?.street; // "123 Main St"
var zipCode = person.address?.zipCode; // undefined

ES2015부터 도입된 객체 비구조화 할당은 속성에 접근하는 또 다른 방법입니다. 객체 비구조화 할당을 사용하면 객체에서 원하는 속성을 추출하여 변수에 할당할 수 있습니다.

예를 들어, 다음과 같은 객체가 있다고 가정해봅시다.

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

객체 비구조화 할당을 사용하여 속성에 접근할 수 있습니다.

var { name, address: { street } } = person;
console.log(name); // "John"
console.log(street); // "123 Main St"

자바스크립트에서 객체의 속성에 접근하는 다양한 방법을 알아보았습니다. 각각의 방법은 특정 상황에 따라 유용하게 사용될 수 있으므로, 적절하게 선택하여 사용해야 합니다.