출처

https://www.freecodecamp.org/news/javascript-array-of-objects-tutorial-how-to-create-update-and-loop-through-objects-using-js-array-methods/

배열만들기

아래처럼 중괄호와 각 항목을 구분짓는 컴마를 사용하여 개체(Object)을 열거할 수 있습니다.

let cars = [
  {
    "color": "purple",
    "type": "minivan",
    "registration": new Date('2017-01-03'),
    "capacity": 7
  },
  {
    "color": "red",
    "type": "station wagon",
    "registration": new Date('2018-03-03'),
    "capacity": 5
  },
  {
    ...
  },
  ...
]

맨 앞에 넣기 ( unshift )

let car = {
  "color": "red",
  "type": "cabrio",
  "registration": new Date('2016-05-02'),
  "capacity": 2
}
cars.unshift(car);

맨 뒤에 넣기 ( push )

let car = {
 "color": "red",
 "type": "cabrio",
 "registration": new Date('2016-05-02'),
 "capacity": 2
}
cars.push(car);

중간에 끼워 넣기 ( splice )

Array.splice(
  {시작 하려는 인덱스},
  {제거할 항목 수},
  {추가할 항목}
);

---

let car = {
  "color": "red",
  "type": "cabrio",
  "registration": new Date('2016-05-02'),
  "capacity": 2
}
cars.splice(4, 0, car);

대상 찾기 ( find )

찾는 대상 중 맨 앞에 존재하는 항목을 찾습니다.(return first match item)

let car = cars.find(car => car.color === "red");

조건이 일치하는 목록 찾기 / 필터링 ( filter )

let redCars = cars.filter(car => car.color === "red");
console.log(redCars);
// output:
// [
//   {
//     color: 'red',
//     type: 'station wagon',
//     registration: 'Sat Mar 03 2018 01:00:00 GMT+0100 (GMT+01:00)',
//     capacity: 5
//   },
//   {
//     color: 'red',
//     type: 'cabrio',
//     registration: 'Sat Mar 03 2012 01:00:00 GMT+0100 (GMT+01:00)',
//     capacity: 2
//   }
// ]

내부 개체 정보(Object) 변경하기 ( map )

map 을 통해 조건식을 만들어 해당 개체의 정보를 변경(transform) 할 수 있습니다.

let sizes = cars.map(car => {
  if (car.capacity <= 3){
    return "small";
  }
  if (car.capacity <= 5){
    return "medium";
  }
  return "large";
});
console.log(sizes);
// output:
// ['large','medium','medium', ..., 'small']

개체 반복 ( forEach )

forEach 는 반복이라는 점은 동일하지만 map 은 해당 개체의 값을 변형하는 반면, forEach 는 해당 개체의 정보를 순차적으로 탐색 합니다. ( 물론 탐색하는 과정에서 값을 update 하는 것 가능 ) / map - transform ( 변형) vs forEach - loop / update ( 순차탐색 , 변경 ) 정도의 의미를 부여할 수 있습니다.

cars.forEach(car => {
 car['size'] = "large";
 if (car.capacity <= 5){
   car['size'] = "medium";
 }
 if (car.capacity <= 3){
   car['size'] = "small";
 }
});

정렬 ( sort )

정렬 함수를 통해 값의 순서를 재정렬 할 수 있습니다.

let sortedCars = cars.sort((c1, c2) => (c1.capacity < c2.capacity) ? 1 : (c1.capacity > c2.capacity) ? -1 : 0);
console.log(sortedCars);
// output:
// [
//   {
//     color: 'purple',
//     type: 'minivan',
//     registration: 'Wed Feb 01 2017 00:00:00 GMT+0100 (GMT+01:00)',
//     capacity: 7
//   },
//   {
//     color: 'red',
//     type: 'station wagon',
//     registration: 'Sat Mar 03 2018 01:00:00 GMT+0100 (GMT+01:00)',
//     capacity: 5
//   },
//   ...
// ]

---

sort 는 함수의 결과(-1<=,0,>=1)에 따라 순서를 아래와 같이 재정렬 합니다.

조건 매칭 함수 ( every, some )

조건 함수의 값이 모두 ( every ) 또는 일부 ( some ) 가 일치하면 참(true) 을 return 합니다.

cars.some(car => car.color === "red" && car.type === "cabrio");
// output: true

cars.every(car => car.capacity >= 4);
// output: false

맺음말

솔직히 매일은 힘들지만 뭐 꾸준한 컨텐츠를 기록해보려 하네요 :) 제 스스로에게도 큰 도움이 되기 때문이니까요 :)