자바스크립트는 동적인 언어로, 객체의 속성을 실시간으로 추가하거나 제거할 수 있습니다. 이는 개발자에게 많은 유연성을 제공해줍니다. 이번 포스트에서는 자바스크립트에서 객체의 속성을 동적으로 추가하는 방법을 알아보도록 하겠습니다.

1. Bracket Notation을 사용하는 방법

Bracket Notation을 사용하여 객체의 속성을 동적으로 추가할 수 있습니다. Bracket Notation은 객체에 동적으로 접근하고 속성을 추가 또는 수정할 수 있는 방법입니다. 아래 예제를 통해 확인해보겠습니다.

const myObj = {};

const dynamicKey = "name";
const dynamicValue = "John";

myObj[dynamicKey] = dynamicValue;

console.log(myObj); // { name: "John" }

위 코드에서는 myObj라는 빈 객체를 생성하고, dynamicKey 변수에는 추가할 속성의 키를 할당합니다. dynamicValue 변수에는 해당 속성의 값을 할당합니다. 그리고 myObj 객체에 dynamicKey를 속성 키로 사용하여 dynamicValue를 값으로 추가합니다. 이후 myObj 객체를 출력하면 { name: "John" }가 출력됩니다.

2. Dot Notation을 사용하는 방법

Dot Notation 역시 객체의 속성을 동적으로 추가할 수 있는 방법 중 하나입니다. Dot Notation은 객체의 속성에 직접 접근하여 속성을 추가하거나 수정할 수 있는 방식입니다. 아래 예제를 통해 확인해보겠습니다.

const myObj = {};

const dynamicKey = "age";
const dynamicValue = 25;

myObj.dynamicKey = dynamicValue;

console.log(myObj); // { dynamicKey: 25 }

위 코드에서도 마찬가지로 myObj라는 빈 객체를 생성합니다. 그리고 dynamicKey 변수에는 추가할 속성의 키를 할당하고, dynamicValue 변수에는 해당 속성의 값을 할당합니다. 이후 myObj.dynamicKey와 같이 Dot Notation을 사용하여 속성을 추가합니다. 이때 dynamicKey 변수의 값이 그대로 속성 키로 사용되는 것이 아니라, dynamicKey라는 문자열 자체가 속성 키로 사용되며, 이에 dynamicValue가 값으로 할당됩니다. 따라서 myObj 객체를 출력하면 { dynamicKey: 25 }가 출력됩니다.

3. Object.assign() 메소드를 사용하는 방법

위와 같은 방법 외에도 Object.assign() 메소드를 사용하여 객체의 속성을 동적으로 추가할 수 있습니다. Object.assign() 메소드는 여러 객체를 결합할 때 사용되는데, 첫 번째 인수로는 대상 객체, 그 이후 인수로는 소스 객체들을 전달하여 속성을 복사합니다. 아래 예제를 통해 확인해보겠습니다.

const myObj = {};

const dynamicKey = "gender";
const dynamicValue = "male";

Object.assign(myObj, { [dynamicKey]: dynamicValue });

console.log(myObj); // { gender: "male" }

위 코드에서는 myObj라는 빈 객체를 생성하고, dynamicKey 변수에는 추가할 속성의 키를 할당합니다. dynamicValue 변수에는 해당 속성의 값을 할당합니다. 그리고 Object.assign() 메소드를 사용하여 myObj 객체와 { [dynamicKey]: dynamicValue } 객체를 결합하면서 속성을 추가합니다. 이후 myObj 객체를 출력하면 { gender: "male" }가 출력됩니다.

자바스크립트에서 객체의 속성을 동적으로 추가하는 방법에 대해 알아보았습니다. Bracket Notation과 Dot Notation, 그리고 Object.assign() 메소드를 사용하여 객체에 속성을 추가할 수 있습니다. 이러한 동적 속성 추가는 자바스크립트의 강력한 기능 중 하나이며, 다양한 상황에서 유용하게 활용될 수 있습니다. 지금까지의 내용을 참고하여 자바스크립트에서 객체 속성을 동적으로 추가하는 방법을 익히시기 바랍니다!