사놓지(7), 객체를 담은 배열에 요소 추가하기

gicomong·2021년 4월 29일
2
post-thumbnail

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

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


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()

profile
⚠ 이 블로거는 퇴근 후 극심한 피로감 + 강렬한 휴식 욕구로 인해 일주일 이상 포스팅이 없을 수 있습니다. 하지만 항상 좋은 내용을 담고자 합니다🙇🏼

0개의 댓글