JavaScript에서 두 배열을 하나의 객체 배열로 합치는 방법

JavaScript로 개발하다 보면 두 개의 배열을 하나로 묶어야 하는 상황이 자주 발생합니다. 예를 들어 다음과 같은 두 개의 배열이 있다고 가정해 보겠습니다.

var firstArray = ['John', 'David', 'Bob'];
var secondArray = ['Mike', 'Sam', 'Carol'];

이처럼 각각의 배열에 담긴 값들을 인덱스 기준으로 짝지어 하나의 객체 배열로 결합하려면 JavaScript의 map() 메서드를 활용하는 것이 가장 간단하고 효율적입니다. map()은 원본 배열의 각 요소를 순회하면서 콜백 함수가 반환하는 값으로 새로운 배열을 생성하기 때문에, 두 배열의 값을 쌍(pair)으로 묶는 작업에 특히 유용합니다.

예제

var firstArray = ['John', 'David', 'Bob'];
var secondArray = ['Mike', 'Sam', 'Carol'];
var arrayOfObject = firstArray.map(function (value, index){
    return [value, secondArray[index]]
});
console.log("The First Array=");
console.log(firstArray);
console.log("The Second Array=");
console.log(secondArray);
console.log("The mix Of array object=");
console.log(arrayOfObject);

위 코드에서 map()의 콜백 함수는 현재 요소(value)와 해당 요소의 인덱스(index)를 함께 전달받습니다. 이 인덱스를 이용해 secondArray에서 같은 위치의 값을 꺼내와 두 값을 하나의 배열로 묶어 반환하는 방식입니다.

프로그램 실행 방법

위 프로그램을 실행하려면 Node.js 환경에서 다음 명령어를 입력하세요.

node fileName.js

여기서는 파일 이름이 demo190.js라고 가정하겠습니다.

실행 결과

코드를 실행하면 다음과 같은 출력 결과를 확인할 수 있습니다.

PS C:\Users\Amit\javascript-code> node demo190.js
The First Array=
[ 'John', 'David', 'Bob' ]
The Second Array=
[ 'Mike', 'Sam', 'Carol' ]
The mix Of array object=
[ [ 'John', 'Mike' ], [ 'David', 'Sam' ], [ 'Bob', 'Carol' ] ]

결과를 보면 첫 번째 배열과 두 번째 배열의 요소들이 인덱스 순서대로 한 쌍씩 묶여 새로운 배열이 만들어진 것을 확인할 수 있습니다.

참고: 키-값 형태의 객체 배열로 만들기

단순한 배열 쌍이 아니라 의미 있는 키를 가진 객체 배열이 필요하다면, map() 내부에서 객체 리터럴을 반환하도록 수정하면 됩니다.

var result = firstArray.map(function (value, index) {
    return { name1: value, name2: secondArray[index] };
});
console.log(result);
// 출력: [ { name1: 'John', name2: 'Mike' }, { name1: 'David', name2: 'Sam' }, { name1: 'Bob', name2: 'Carol' } ]

이처럼 map() 메서드 하나만으로도 두 배열을 손쉽게 결합할 수 있으며, 반환 형태를 배열 또는 객체로 유연하게 조정할 수 있다는 점이 큰 장점입니다.