Array.prototype.map() 사용법

map() 함수는
배열의 각 요소를 순회하여 콜백 함수를 적용한 결과를 모아 새로운 배열을 반환하는 함수입니다.
이때, 원본 배열은 변경되지 않습니다.

map() 함수에 전달되는 콜백 함수는 "각 요소를 변환하여 새로운 배열로 매핑(mapping)하는 역할을 한다"라고 말합니다.
이렇게 매핑된 결과를 새로운 배열로 반환하기 때문에 이 함수의 이름이 "map"으로 정해졌습니다. 매핑(mapping)이란 어떤 값을 다른 값에 대응시키는 과정을 뜻하는 개념이며 수학, 컴퓨터 과학, 지리 정보 시스템 등 다양한 분야해서 사용합니다.

map() 함수는 배열의 각 요소를 변환하거나 가공한 결과를 적용한 새로운 요소로 배열을 생성하기 위해 사용됩니다.

map() 함수의 사용 방법 map() 함수의 사용 방법을 시각화하면 다음과 같습니다. 
/* map() 함수는
   배열의 각 요소를 변환하는 것을 목적으로 사용됩니다. */

// 다음의 예시는 배열의 모든 요소를 소문자에게 대문자로 변환이 목적입니다.
[a, b, c, d].map(소문자 → 대문자) 👉 [A, B, C, D]

map() 함수는 각 요소를 순회하면서, 콜백 함수의 return으로 반환된 값을 모아 (매핑된) 새로운 배열을 생성합니다.
따라서, 콜백 함수는 해당하는 요소를 변환하거나 가공한 결과를 return으로 반환해야 합니다.

간단한 예제

간단한 예제를 통해 설명해보겠습니다.
다음은 숫자 배열을 받아 각 숫자를 두 배로 만들어 새로운 배열을 생성해서 반환하는 map() 함수의 사용 예입니다.

JavaScript 
const numbers = [1, 2, 3, 4, 5];

const doubledNumbers = numbers.map(function(number) {
    return number * 2; // 매핑된 새로운 배열로 반환
});

console.log(doubledNumbers); // 출력: [2, 4, 6, 8, 10]

// 원본 배열은 변경되지 않습니다.
console.log(numbers); // 출력: [1, 2, 3, 4, 5]

map() 함수의 사용법에 대해 알아보겠습니다.

구문

JavaScript 
arr.map(function(currentValue[, index[, array]]) {
    // 변환(mapping)할 로직: 변환된 결과를 반환해야 합니다.
}[, thisArg]);

arr은 map() 함수에 적용할 배열입니다.

매개변수

map() 함수의 매개변수
function 필수.
arr 배열의 각 요소에 적용할 때 호출되는 콜백 함수입니다.
세 개의 매개변수를 가질 수 있습니다.
  • currentValue (필수): 처리할 현재 요소. 이 매개변수를 통해 현재 요소에 접근할 수 있습니다.
  • index (옵션): 처리할 현재 요소의 인덱스. 이 매개변수를 사용하여 현재 요소의 인덱스에 접근할 수 있습니다.
  • array (옵션): map() 함수를 호출한 배열. 이 매개변수를 사용하여 원본 배열에 접근할 수 있습니다.
thisArg 옵션.
function을 실행할 때 this로 사용할 객체. 이 매개변수는 필요에 따라 사용됩니다.

콜백 함수

첫 번째 매개변수인 콜백 함수(function)과 관련되어 함수의 형태별 구문 형식은 다음과 같습니다.

JavaScript 
// 화살표 함수
map((element) => { /* … */ })
map((element[, index]) => { /* … */ })
map((element[, index[, array]]) => { /* … */ })

// 콜백 함수
map(callbackFn)
map(callbackFn[, thisArg])

// 인라인 콜백 함수
map(function (element) { /* … */ })
map(function (element[, index]) { /* … */ })
map(function (element[, index[, array]]) { /* … */ })
map(function (element[, index[, array]]) { /* … */ }[, thisArg])
콜백 함수 구현 설명

map() 함수는 arr 배열의 요소를 순서대로 한 번씩 순회하면서 function 함수를 호출하고, 함수의 반환 값을 새로운 배열에 모아서 반환합니다.
이 과정에서 원본 배열을 변경하지 않습니다.

반환 값

배열의 각 요소에 대해 실행한 function의 결과를 모은 새로운 배열을 반환합니다.

map() 함수와 filter() 함수는 비슷한 구문을 사용하기 때문에 혼동하기 쉬운 점이 있습니다.
자바스크립트 map()과 filter() 함수의 차이점을 참고하세요.

다양한 예제

다양한 예제를 통해서 map() 함수의 사용법을 살펴보겠습니다.

# 함수 구현을 설명하는 간단한 예

JavaScript 
const numbers = [1, 2, 3, 4, 5];

const squaredNumbers = numbers.map(function(number) {
    return number * number;
});

console.log(squaredNumbers);
// 출력: [1, 4, 9, 16, 25]

배열 요소의 소문자 변환

문자열로 구성된 배열을 다루는 상황은 매우 흔합니다.
다음은 map() 함수를 사용해서 문자열로 구성된 배열 요소들을 모두 소문자로 변환해서 새로운 배열로 반환하는 예제입니다. 이때, 원본 배열은 그대로 보존합니다.

JavaScript 
const fruits = ["Apple", "Banana", "Cherry"];

const lowercaseFruits = fruits.map(function(fruit) {
    return fruit.toLowerCase(); // 문자열을 소문자로 변환
});

console.log(lowercaseFruits);
// 출력: ['apple', 'banana', 'cherry']

코드 부연설명
toLowerCase() 함수는 문자열을 소문자로 변환해서 반환하는 함수입니다.

배열 요소가 객체일 경우

map() 함수를 사용하여 객체 배열에서 특정 속성이나 값만 추출하여 새로운 배열을 생성할 수 있습니다.
예를 들어, 사용자 객체 배열에서 사용자 이름만 추출하여 새로운 배열을 생성하고 싶다면 다음과 같이 할 수 있습니다.

JavaScript 
const users = [
    {id: 1, name: "Alice"},
    {id: 2, name: "Bob"},
    {id: 3, name: "Charlie"}
];

const names = users.map(function(user) {
    return user.name;
});

console.log(names);
// 출력: ['Alice', 'Bob', 'Charlie']

배열 요소의 조건에 따른 값 대체

조건에 따라 배열의 각 요소를 대체 값으로 변경하여 새로운 배열을 생성하는 경우 map() 함수를 활용할 수 있습니다.

JavaScript 
const numbers = [1, 2, 3, 4, 5];

const modifiedNumbers = numbers.map(function(number) {
    if (number % 2 === 0) {
        return "Even";
    } else {
        return "Odd";
    }
});

console.log(modifiedNumbers);
// 출력: ['Odd', 'Even', 'Odd', 'Even', 'Odd']

map() vs. forEach()

map() 함수와 forEach() 함수는 모두 배열의 요소를 순회하는 함수입니다.
하지만, map() 함수는 각 요소를 주어진 콜백 함수로 매핑하여 새로운 배열을 반환하는 반면, forEach() 함수는 각 요소를 단순히 순회하면서 콜백 함수로 처리하지만, 새로운 배열을 생성하여 반환하지 않는다는 차이점이 있습니다.

부연설명
배열의 forEach() 함수는 배열을 순회해서 각 요소를 콜백 함수로 처리하기 위한 함수입니다. 배열의 각 요소에 대해 주어진 콜백 함수를 적용해서 순서대로 한 번씩 실행합니다.

다음은 map()과 forEach() 함수의 차이점을 나타내는 사례 코드입니다.

JavaScript 
const numbers = [1, 2, 3, 4, 5];

// map() 함수 사용
const squaredNumbersMap = numbers.map(function(number) {
    return number * number;
});

console.log("Using map():", squaredNumbersMap);
// 출력: "Using map():" [1, 4, 9, 16, 25]

// forEach() 함수 사용
const squaredNumbersForEach = [];

numbers.forEach(function(number) {
    squaredNumbersForEach.push(number * number);
});

console.log("Using forEach():", squaredNumbersForEach);
// 출력: "Using forEach():" [1, 4, 9, 16, 25]

위의 예제에서 map() 함수는 각 요소를 제곱하여 새로운 배열 squaredNumbersMap를 생성합니다. map() 함수는 변환 작업을 수행한 결과를 새로운 배열로 반환합니다.

반면, forEach() 함수는 각 요소를 순회하면서 제곱한 값을 squaredNumbersForEach 배열에 추가합니다. forEach() 함수는 반환 값이 없고, 원본 배열을 변경하거나 다른 배열에 값을 추가해야 합니다.

이를 통해 map() 함수와 forEach() 함수의 사용 방식과 결과의 차이를 비교할 수 있습니다.
map() 함수는 변환 작업을 통해 새로운 배열을 생성하며, forEach() 함수는 각 요소에 대해 작업을 수행하면서 배열을 변경하거나 다른 배열에 값을 추가합니다.

브라우저 호환성

map() 함수에 대한 브라우저 호환성
메서드
데스크탑 Chrome
Chrome
데스크탑데스크탑 Edge
Edge
데스크탑 Firefox
Firefox
Safari
Safari
map() 1 12 1.5 3

caniuse.com에서 더 자세한 정보를 확인해 보세요.

명세서

map() 함수에 대한 명세서 사양
명세서 사양
map() ECMAScript Language Specification
#sec-array.prototype.map

참고문헌

같이 보기