동적으로 생성된 프로퍼티에 접근하기는 자바스크립트에서 흔히 하는 작업 중 하나입니다. 객체의 프로퍼티는 런타임 동안에 추가될 수 있고, 이에 접근하는 방법을 이해하는 것이 중요합니다. 이 포스트에서는 동적으로 생성된 프로퍼티에 접근하는 다양한 방법을 살펴보겠습니다.

1. 점 표기법 (Dot Notation)

가장 기본적인 방법은 점 표기법을 사용하여 프로퍼티에 접근하는 것입니다.

const obj = {};
obj.dynamicProperty = "value";
console.log(obj.dynamicProperty); // "value"

2. 괄호 표기법 (Bracket Notation)

프로퍼티 이름이 변수로 주어지거나, 유효한 식별자가 아닌 경우에는 괄호 표기법을 사용해야 합니다.

const obj = {};
const propertyName = "dynamicProperty";
obj[propertyName] = "value";
console.log(obj[propertyName]); // "value"

3. Object.keys 및 Object.entries 사용

동적으로 생성된 모든 프로퍼티에 접근하려는 경우에는 Object.keys 나 Object.entries를 사용하여 객체의 키를 검색할 수 있습니다.

const obj = { prop1: 'value1' };
const propertyName = "dynamicProperty";
obj[propertyName] = "value2";

console.log(Object.keys(obj)); // ["prop1", "dynamicProperty"]
console.log(Object.entries(obj)); // [["prop1", "value1"], ["dynamicProperty", "value2"]]

요약

동적으로 생성된 프로퍼티에 접근하는 방법은 다양하지만, 점 표기법과 괄호 표기법을 활용하면 대부분의 상황에서 처리할 수 있습니다. 또한, Object.keys 나 Object.entries를 사용하여 객체의 모든 키를 반복하는 방법을 알고 있는 것이 유용합니다.

이것은 자바스크립트에서 동적으로 생성된 프로퍼티에 접근하는 방법을 간략하게 설명한 것입니다. 독자분들이 자바스크립트에서 동적 프로퍼티에 접근하는 데 도움이 되기를 바랍니다.

참고문헌:

• MDN Web Docs - Working with objects