객체 배열를 다루는 방법

객체를 담은 배열에 요소 추가하기

이번 시간에는 [{}, {}, {}]에 객체요소를 추가하는 법을 알아보자

1. 배열, 객체에 요소 추가하는 법

• 배열에 요소 추가하기
  : 배열에서는 push 혹은 인덱스에 접근해 요소를 추가할 수 있다.

let array = [];
array.push(1);     //push하는 경우
array.push(2);
array[2] = 4;      //인덱스로 접근해 추가하는 경우
console.log(array)

• 객체에 요소 추가하기
  : 객체에 요소를 추가할 때 obj.key, obj['key']를 사용해 추가할 수 있다.

let obj = {};
obj['hello'] = {id:1, name: 'hoho'};
obj.bye = {id:2, name: 'haha'};
console.log(obj)
// { hello:{ id:1, name:"hoho"}, bye:{ id:2, name:"haha" }}

: 또 Object.assign(대상객체, 복사할객체)을 사용해 넣고 싶은 값을 바로 추가할 수도 있다.
: 아래 코드는 target 객체에 c값을 추가하고 b값을 갱신하는 코드이다.

const target = { a: 1, b: 2 };
const source = { b: 3, c: 4 };
Object.assign(target, source);
console.log(target);   // { a: 1, b: 4, c: 5 }

2. [{}, {}, {}]에 객체 요소 추가하기

• 우리는 앞선 내용을 통해 배열에선 push(), 객체에서는 키, 함수를 이용해 요소를 추가한다는 걸 알게 되었다.
• 하지만 우리가 서비스에서 접하는 객체는 [{}, {}, {}] 형태의 데이터이다.
• 이 데이터에 만약 요소를 추가하고자 한다면 어떻게 하는 게 좋을까?

그건 바로 push함수나 인덱스를 이용하는 것이다!
왜냐하면 결국 이 객체는 배열로 감싸져 있으니까! ^0^

let arrObj = [{id:1, name:'haha'}];
arrObj.push({id:2, name:'hohp'});   //push사용
arrObj[2] = {id:3, name:'aoao'};    //인덱스로 접근
console.log(arrObj)
//[{id:1, name:'haha'},{id:2, name:'hohp'},{id:3, name:'aoao'}]

출처
아래 포스팅으로 가면 더 자세히 알 수 있어요 ^0^

mozilla, Array.prototype.push()
JAVASCRIPT]javascript object 요소 추가, 삭제하기
mozilla, Object.assign()