자바스크립트(JavaScript)에서 배열 데이터를 가공할 때는 배열의 각 요소를 순회하면서 새로운 형태로 변환하는 작업이 자주 발생한다. map(맵) 메서드는 기존 배열의 모든 요소를 순회하며 지정된 콜백 함수(Callback function, 다른 함수의 인자로 전달되는 함수)를 실행하고, 그 반환값들을 모아 새로운 배열을 생성하는 내장 함수이다. 반복문 없이도 배열 데이터를 일괄적으로 변환할 수 있어 코드의 가독성을 높이고 중복을 줄일 수 있다. 이 글에서는 map 메서드의 기본 개념과 동작 원리, 다양한 활용 예제를 다룬다.
1. map 함수
map 메서드는 배열 내의 모든 요소를 하나씩 전달받아 함수를 호출하고, 그 결과값들을 모아서 새로운 배열로 반환한다. 이는 마치 컨베이어 벨트 위에 놓인 재료들에 동일한 가공 처리를 거쳐 새로운 완성품 상자를 만들어내는 과정과 유사하다. map 메서드는 원본 배열을 직접 수정하지 않고 새로운 배열을 생성하여 반환하므로, 기존 데이터를 보존하면서 변환된 데이터를 다룰 수 있다.
사용법
다음 코드는 숫자 배열의 각 요소에 2를 곱하여 두 배의 값을 가진 새로운 배열을 생성하는 기본 사용법이다.
const numbers = [1, 2, 3, 4, 5];
const doubledNumbers = numbers.map(number => number * 2);
console.log(doubledNumbers); // [2, 4, 6, 8, 10]
numbers 배열에 map 메서드를 호출하면서 화살표 함수(Arrow function) 형태의 콜백 함수를 전달한다. 배열의 각 요소가 number 매개변수로 전달되어 number * 2 연산이 수행되며, 그 반환값들이 모여 [2, 4, 6, 8, 10]이라는 새로운 배열이 doubledNumbers 변수에 할당된다.
map 메서드를 사용할 때 가장 자주 발생하는 실수는 콜백 함수 내부에서 return 키워드로 값을 반환하지 않는 경우이다. 콜백 함수가 아무런 값을 반환하지 않으면 새로 생성되는 배열의 요소가 모두 undefined로 채워진다. 또한 map 메서드는 원본 배열과 동일한 길이의 새 배열을 생성하므로, 단순 반복 작업만 필요하고 반환값이 필요 없는 경우에는 forEach 메서드를 사용하는 것이 적절하다.
2. 콜백 함수의 매개변수 활용
map 메서드의 콜백 함수는 현재 처리 중인 요소의 값(value) 외에도 해당 요소의 인덱스(index, 순번)와 메서드를 호출한 원본 배열(array)을 매개변수로 전달받을 수 있다. 다음 코드는 문자열 배열의 각 요소 뒤에 특정 문자열을 덧붙여 새로운 배열을 만드는 예제이다.
/*기존의 배열요소를 기반으로 새로운 배열요소를 만들어 리턴*/
let cats=['땅콩','얼룩','회색'];
cats=cats.map(function(value,index){
return value+"밥먹자!!"
})
console.log(cats)
cats 배열의 각 문자열 요소를 value 매개변수로 받아 “밥먹자!!”라는 문자열을 연결하여 반환한다. 변환된 새 배열이 다시 cats 변수에 재할당되어 콘솔에 출력된다. 콜백 함수 내부에서 index 매개변수를 함께 활용하면 요소의 위치 순번에 따른 조건부 연산도 수행할 수 있다.
3. 배열 데이터의 일괄 연산과 결과 확인
다음 코드는 숫자 배열의 모든 요소를 제곱 연산하여 배열을 갱신하고, 결과를 forEach 메서드를 통해 콘솔에 출력하는 예제이다.
/**
* 모든수를 제곱하라
*/
// 배열선언
let numbers = [273, 52, 103, 32, 57];
// 배열의 모든 값을 제곱하여 numbers에 할당
numbers = numbers.map(function (value, index, array) {
return value * value;
});
// numbers의 요소를 console.log 에 순회한다
numbers.forEach(console.log);
map 메서드에 전달된 콜백 함수가 value * value 연산을 수행하여 각 숫자의 제곱값을 반환한다. 변환된 결과 배열은 다시 numbers 변수에 할당된다. 이후 numbers.forEach(console.log)를 실행하면 forEach가 콜백 함수(여기서는 console.log)에 현재 요소값, 인덱스, 전체 배열을 인자로 전달하여 각 요소의 정보를 출력한다.
아래의 결과 접기 영역을 열면 콘솔 화면에 출력된 실제 결과를 확인할 수 있다. 이미지에서는 forEach(console.log)에 의해 각 요소의 제곱된 수치와 해당 인덱스 번호, 그리고 변환된 전체 배열이 순차적으로 콘솔에 출력된 형태를 확인할 수 있다.
결과
