자바스크립트 동적으로 객체 생성하기 (Computed Property Names)

자바스크립트에서 데이터를 나타내는데 많이 사용되는 객체는 때에 따라서 수정되야 하고 동적으로 생성되야 한다.

이런 경우에, 유용하게 사용될 수 있는 문법들을 정리해보기로 하였다.

 

Computed Property Names ⛅️

객체에서 프로퍼티의 이름을 동적으로 생성할 수 있게 해주는 문법이다. 대괄호 안에 변수를 넣음으로써, 해당 변수의 값이 프로퍼티의 이름이 되게 한다.

const name = "park";
const target = false;

const obj = {
  [name]: target,
}

console.log(obj); // {park: false}

 

객체 확장하기

기존에 존재하는 객체를 바탕으로 새롭게 더 많은 데이터, 프로퍼티를 가지는 객체를 생성하게 되야 하는 경우도 있다.

혹은 여러 객체를 합쳐야 하는 경우도 있는데, 다음과 같은 방법들을 사용할 수 있다.

Object.assign(obj1, obj2, obj3);

Object Spread {...obj1, ...obj2, ...obj3}

 

const obj1 = {"a": 1};
const obj2 = {"b": 2};
const obj3 = {"a": 3};

const oa = Object.assign({}, obj1, obj2, obj3);
console.log(oa);

const os = {...obj3, ...obj2, ...obj1};
console.log(os);

위의 예제를 확인해보면, 더 나중에 추가된 객체의 프로퍼티 값이 기존의 값에 덮어쓰기된다. (a)

 

이 외에도 Object.keys, Object.values, Object.entries 등으로 객체 값에 접근하여 객체 데이터를 처리할 수 있다.

 

 

 

 

☀️ 참고 문서

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Object_initializer

Object initializer - JavaScript | MDN