[Javascript] 객체 프로퍼티 추가하는 3가지 방법

JavaScript에서 객체에 새로운 프로퍼티를 동적으로 추가하는 방법은 다음과 같습니다.

1. 점 표기법 사용

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

person.address = '123 Main St';

console.log(person); // {name: 'John', age: 30, address: '123 Main St'}

위 예제에서 person.address라는 새로운 프로퍼티를 점 표기법으로 추가하였습니다.

 

2. 대괄호 표기법 사용

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

person['address'] = '123 Main St';

console.log(person); // {name: 'John', age: 30, address: '123 Main St'}

위 예제에서 person['address']라는 새로운 프로퍼티를 대괄호 표기법으로 추가하였습니다.

 

 

3. Object.assign() 메소드 사용

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

const newProps = { address: '123 Main St', phone: '555-1234' };
Object.assign(person, newProps);

console.log(person); // {name: 'John', age: 30, address: '123 Main St', phone: '555-1234'}

위 예제에서 Object.assign() 메소드를 사용하여 person 객체에 새로운 프로퍼티를 추가하였습니다. 

Object.assign() 메소드는 첫 번째 인수로 전달된 객체에 다른 객체의 프로퍼티를 복사합니다. 두 번째 인수부터는 복사할 객체를 전달합니다. 이 예제에서는 person 객체에 newProps 객체의 프로퍼티를 복사하여 추가하였습니다.

 

만약 첫 번째 인자로 전달된 객체에 이미 동일한 이름의 프로퍼티가 있다면, 두 번째 인자부터 전달된 객체들의 프로퍼티 값으로 덮어씁니다.

 

만약 2개 이상의 객체를 하나로 합치고 싶다면 아래 포스팅을 참고해주세요.

[Javascript] 3개 이상 객체 합치기 - Object.assign()