Bài báo gốc: Hướng dẫn về mảng đối tượng JavaScript – Cách tạo, cập nhật và lặp qua các đối tượng bằng phương pháp mảng JS của Ondrej Polesny
Được dịch bởi: Boyeon-Ihn
저는 평균적으로 일주일에 18번 JSON 데이터로 작업합니다. 그럼에도 불구하고 JSON 데이터를 다룰 때마다 구체적인 메서드 사용법을 검색해야 합니다. 이럴 때마다 명쾌한 해답을 주는 안내서가 있다면 얼마나 좋을까요?
이 기사에서는 JavaScript 배열의 기본적인 사용법에 대해 설명하겠습니다.
JSON은 Ký hiệu đối tượng JavaScript의 약자이며, 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: 배열의 앞쪽에 추가하기
Array.unshift를 사용하면 배열의 맨 앞에 객체를 추가할 수 있습니다.
let car = {
"color": "red",
"type": "cabrio",
"registration": new Date('2016-05-02'),
"capacity": 2
}
cars.unshift(car);
Array.push: 배열의 뒤쪽에 추가하기
Array.push를 사용하면 배열의 맨 뒤에 객체를 추가할 수 있습니다.
let car = {
"color": "red",
"type": "cabrio",
"registration": new Date('2016-05-02'),
"capacity": 2
}
cars.push(car);
Array.splice: 배열의 중간에 추가하기
Array.splice를 사용하면 배열의 중간에 객체를 추가할 수 있습니다. 기존 요소를 삭제하려 할 때도이 메서드를 사용할 수 있습니다. 필요한 매개변수는 다음과 같습니다.
Array.splice(
{배열의 변경을 시작할 인덱스},
{배열에서 제거할 요소의 수},
{배열에 추가할 요소}
);
bạn đã biết, cars 배열의 다섯 번째 위치에 빨간색 폭스바겐 카브리오를 추가하려면 다음처럼 mối nối 를 사용하멈 닩됩.
let car = {
"color": "red",
"type": "cabrio",
"registration": new Date('2016-05-02'),
"capacity": 2
}
cars.splice(4, 0, car);
객체 배열을 통한 루프
여기서 짚고 넘어갈 문제가 한 가지 있습니다. 배열의 순회를 필요로 하는 이유는 무엇인가요? 대부분 의 배열 순회 그저 목적 달성 하기 수단일 뿐 순회 가 이 되지 는 것 이 의 요지 요지 요지.
JavaScript는 순회 로직을 구현하지 않아도 원하는 문제를 해결할 수 있도록 여러 기능을 자쩲적으니로 제. 이어지는 내용에서 살펴보겠습니다.
Array.find: 배열 내 특정 값을 만족하는 객체 찾기
빨간색 차를 찾고 싶다고 가정하고 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.filter: 특정 조건을 만족하는 모든 객체 찾기
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: 배열 내 객체 바꾸기
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' },
// ...
// ]
Array.forEach: 객체에 새 프로퍼티(thuộc tính) 추가하기
만약 자동차 크기 값을 추가하고 싶은 상황이라면 어떡해야 할까요? 이 경우에는 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: 객체 정렬하기
보통 원하는 형태로 객체를 가공하고 나면 특정 기준에 따른 정렬 작업이 필요하게 됩니다.
일반적으로 배열 내 모든 객체가 가지고 있는 프로퍼티 중 한 가지의 값을 기준으됩 정렬싁닁의 정렬의 정렬의 정렬의 젤. 이에 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 함수는 두 객체를 비교해 정렬 함수의 결과가 양수이면 첫 번째 객체를 두 번째 위치에 습니. 즉 “첫 번째 객체를 두 번째 위치에 놓아야 하나요?”라는 질문을 묻는 것과 같은 셈이지요.
불필요한 정렬을 방지하기 위해 비교되는 두 객체의 값이 같을 때 값이 반환되도록 명시하는 걸 잊지 마세요.
Array.every와 Array.gồm: 조건을 충족하는지 확인하기
배열의 객체가 주어진 조건을 충족하는지 확인할 때 Array.every 또는 Array.some를 사용할 수 있습니다. 다음과 같은 질문에 대한 답을 찾기 위해 활용할 수 있습니다.
차 중에 빨간색 카브리오가 있습니까? 모든 차에 최소 4명 이상 탑승할 수 있나요? (또는 좀 더 웹과 관련있는 질문으로) 장바구니에 특정 제품이 들어있습니까?
cars.some(car => car.color === "red" && car.type === "cabrio");
// 출력된 값: true
cars.every(car => car.capacity >= 4);
// 출력된 값: false
Array.includes는 Array.some과 비슷하지만 원시(nguyên văn) 자료형에서만 작동한다는 중요한 차이점이 있습니다.
마치며
이 기사에서는 객체 배열의 생성, 조작, 변환 및 순회와 관련된 기본 기능들에 대해 설명했습다. 객체 배열을 다루는 문제 대부분은 위의 메서드를 활용해 해결할 수 있을 거예요.
더 고급 기능을 적용해야 하는 문제가 있을 경우 더 자세한 가이드 [영문]를 살펴보거나 Các trường W3 참고 자료를 확인해보세요.
또는 제게 연락해 주신다면 새로운 기사를 준비해보도록 하겠습니다 🙂
