영어 원문: JavaScript Array of Objects Tutorial – How to Create, Update, and Loop Through Objects Using JS Array Methods
원문 글쓴이: Ondrej Polesny
저는 평균적으로 일주일에 18번 JSON 데이터로 작업합니다. 그럼에도 불구하고 JSON 데이터를 다룰 때마다 구체적인 메서드 사용법을 검색해야 합니다. 이럴 때마다 명쾌한 해답을 주는 안내서가 있다면 얼마나 좋을까요?
이 기사에서는 JavaScript에서 객체 배열의 기본 사용법에 대해 설명하겠습니다.
JSON은 JavaScript Object Notation의 약자이며, Javascript 객체 문법을 따르는 문자 기반의 데이터 형식입니다. JSON로 작업한 적이 있다면 JavaScript 객체도 익숙하실 것입니다.
객체 생성은 다음과 같이 간단합니다:
{
"color": "purple",
"type": "minivan",
"registration": new Date('2012-02-03'),
"capacity": 7
}위의 객체는 자동차를 나타냅니다. 자동차는 여러 종류와 색상이 있을 수 있고, 각 객체는 특정 자동차를 나타냅니다.
대부분의 경우 외부 서비스로부터 이런 객체 데이터를 받습니다. 그러나 경우에 따라 제가 이 온라인 샵을 만들 때처럼 객체와 해당 배열을 직접 만들어야 합니다:
각 범주별 목록 항목이 HTML에서 다음과 같이 작성됩니다:
이 코드를 수동으로 12번 반복하는 작업은 매우 번거롭고 유지보수가 어렵습니다.
자동차 객체로 잠시 돌아가보겠습니다. 이 자동차 세트를 살펴보겠습니다:
이 자동차 세트를 다음과 같이 배열로 나타낼 수 있습니다:
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
},
{
...
},
...
]일반적으로 객체 배열은 자주 조작하기 때문에 항상 동일하게 유지되지 않습니다. 기존 객체 배열에 새 객체를 추가해보겠습니다.
객체를 배열 맨 앞쪽에 추가하려면 Array.unshift를 사용해야 합니다.
let car = {
"color": "red",
"type": "cabrio",
"registration": new Date('2016-05-02'),
"capacity": 2
}
cars.unshift(car);
객체를 배열 맨 뒤쪽에 추가하려면 Array.push를 사용해야 합니다.
let car = {
"color": "red",
"type": "cabrio",
"registration": new Date('2016-05-02'),
"capacity": 2
}
cars.push(car);
객체를 배열 중간에 추가하려면 Array.splice를 사용해야 합니다. 이 메서드는 기존 요소를 삭제할 수도 있어서 매우 편리합니다. 다음과 같은 매개변수가 있습니다:
Array.splice(
{배열의 변경을 시작할 인덱스},
{배열에서 제거할 요소의 수},
{배열에 추가할 요소}
);예를 들어, 빨간색 폭스바겐 카브리오를 다섯 번째 위치에 추가하려면 다음과 같은 코드를 실행합니다:
let car = {
"color": "red",
"type": "cabrio",
"registration": new Date('2016-05-02'),
"capacity": 2
}
cars.splice(4, 0, car);여기서 질문 하나 하겠습니다. 객체 배열을 반복하는 이유는 무엇입니까? 대부분의 경우, 객체 배열을 통한 루프는 항상 목적을 위한 수단이기 때문에, 루프를 통해 이루고 싶은 주된 목적은 따로 있습니다.
JavaScript는 반복 로직을 구현하지 않아도 원하는 문제를 해결할 수 있는 많은 기능을 제공합니다. 한 번 살펴보겠습니다.
빨간색 차를 찾고 싶다고 가정해 보겠습니다. 이때 Array.find 메서드를 사용합니다.
let car = cars.find(car => car.color === "red");Array.find 메서드는 일치하는 첫 번째 요소를 반환합니다.
console.log(car);
// 출력된 값:
// {
// color: 'red',
// type: 'station wagon',
// registration: 'Sat Mar 03 2018 01:00:00 GMT+0100 (GMT+01:00)',
// capacity: 5
// }한 번에 여러 값을 검색할 수도 있습니다:
let car = cars.find(car => car.color === "red" && car.type === "cabrio");
이런 경우, 배열의 마지막 객체가 반환됩니다.
Array.find 함수는 조건을 만족하는 첫 번쨰 객체만 반환합니다. 빨간 차를 모두 구하려면 Array.filter를 사용해야 합니다.
let redCars = cars.filter(car => car.color === "red");
console.log(redCars);
// 출력된 값:
// [
// {
// 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
// }
// ]Array.map를 사용해 기존 객체 배열을 다른 객체 배열로 변환하는 일은 매우 자주 하는 작업입니다. 이 메서드를 사용해 자동차를 크기에 따라 세 그룹으로 분류해보겠습니다:
let sizes = cars.map(car => {
if (car.capacity <= 3){
return "small";
}
if (car.capacity <= 5){
return "medium";
}
return "large";
});
console.log(sizes);
// 출력된 값:
// ['large','medium','medium', ..., 'small']더 많은 값이 필요한 경우 새 객체를 생성할 수도 있습니다:
let carsProperties = cars.map(car => {
let properties = {
"capacity": car.capacity,
"size": "large"
};
if (car.capacity <= 5){
properties['size'] = "medium";
}
if (car.capacity <= 3){
properties['size'] = "small";
}
return properties;
});
console.log(carsProperties);
// 출력된 값:
// [
// { capacity: 7, size: 'large' },
// { capacity: 5, size: 'medium' },
// { capacity: 5, size: 'medium' },
// { capacity: 2, size: 'small' },
// ...
// ]자동차 크기 값도 유지하고 싶으면 어떡해야 할까요? 이 경우, 새 속성 size를 객체에 정의할 수 있습니다. Array.forEach 함수의 좋은 활용 사례입니다.
cars.forEach(car => {
car['size'] = "large";
if (car.capacity <= 5){
car['size'] = "medium";
}
if (car.capacity <= 3){
car['size'] = "small";
}
});객체 반환이 끝나면 일반적으로 객체들을 사용자 정의된 기준에 따라 정렬합니다.
일반적으로 정렬은 모든 객체가 가지고 있는 속성 중 하나의 값을 기준으로 합니다. 기반으로 합니다. Array.sort 함수를 사용하기 위해서는 정렬 순서를 정의하는 함수를 제공해야 합니다.
자동차를 용량에 따라 내림차순으로 정렬해보겠습니다.
let sortedCars = cars.sort((c1, c2) => (c1.capacity < c2.capacity) ? 1 : (c1.capacity > c2.capacity) ? -1 : 0);
console.log(sortedCars);
// 출력된 값:
// [
// {
// 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
// },
// ...
// ]Array.sort 함수는 두 객체를 비교해 정렬 함수의 결과가 양수이면 첫 번째 객체를 두 번째 위치에 놓습니다. 정렬 기능은 해당 질문을 묻는 것과 같습니다: 첫 번째 객체는 두 번째 위치에 놓아야 하나요?
불필요한 정렬을 방지하기 위해 비교되는 두 객체의 값이 같을 때 0값이 반환되도록 설정해야 합니다.
배열의 객체가 주어진 조건을 충족하는지 확인할 때 Array.every 또는 Array.some를 사용할 수 있습니다. 예를 들어:
배열에 빨간색 카브리오가 있습니까? 모든 차 객체에 최소 4명 이상 탑승할 수 있나요? 또는 웹과 연관된 조건의 예는: 장바구니에 특정 제품이 있습니까?
cars.some(car => car.color === "red" && car.type === "cabrio");
// 출력된 값: true
cars.every(car => car.capacity >= 4);
// 출력된 값: falseArray.includes는 Array.some과 비슷하지만 원시 자료형에서만 작동한다는 중요한 차이점이 있습니다.
이 기사에서는 객체 배열의 생성, 조작, 변환 및 루프와 관련된 기본 기능들에 대해 설명했습니다. 대부분의 객체 배열 사례는 이 메서드를 통해 풀 수 있는 문제들입니다. In this article, we went through the basic functions that help you create, manipulate, transform, and loop through arrays of objects. They should cover most cases you will stumble upon.
더 고급 기능이 필요한 사용 사례가 있는 경우 이 자세한 가이드 [영문] 를 살펴보거나 W3 schools 참조 자료를 확인해보세요.
또는 제게 연락해 주신다면 제가 새로운 기사를 준비하겠습니다 :-)