map() 함수

map() 함수는 배열을 순회해서 각 요소를 콜백 함수로 적용해서 처리해 모은 새로운 배열을 반환하기 위한 함수입니다.

map() 함수에 전달되는 콜백 함수는 "각 요소를 변환하여 새로운 배열로 매핑(mapping)하는 역할을 한다"라고 말합니다.
이렇게 매핑된 결과를 새로운 배열로 반환하기 때문에 이 함수의 이름이 "map"으로 정해졌습니다.

매핑(mapping)이란
어떤 값을 다른 값에 대응시키는 과정을 뜻하는 개념이며 수학, 컴퓨터 과학, 지리 정보 시스템 등 다양한 분야해서 사용합니다.

원본 배열은 변경하지 않으면서 해당 배열 요소에 대한 규칙적인 새로운 배열 요소을 생성할 때 사용합니다.

간단한 예제

map() 함수는
배열을 순회하며 지정된 콜백 함수를 적용하여 각 요소를 변환하고, 그 변환된 값을 모아서 새로운 배열로 반환하는 역할을 수행합니다.

간단한 예제를 통해 설명해보겠습니다.
다음은 숫자 배열을 받아 각 숫자를 두 배로 만들어 새로운 배열을 생성하는 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]

위의 예제에서 numbers 배열에 있는 각 숫자를 map() 함수로 변환하여, 각 숫자에 2를 곱한 값을 가지는 doubledNumbers 배열을 생성합니다. map() 함수를 호출할 때 사용한 함수는 각 숫자를 받아 2를 곱한 결과 값을 반환합니다.

주요 포인트는 map() 함수가 기존 배열을 변경하지 않고, 새로운 배열을 생성한다는 점입니다. 따라서 원본 배열은 그대로 유지됩니다. 또한, map() 함수는 변환 작업을 간단하게 처리할 수 있도록 도와주며, 함수형 프로그래밍의 개념을 활용하여 가독성 좋은 코드를 작성하는 데 도움이 됩니다.

이를 통해 초보자도 map() 함수를 쉽게 이해하고 활용할 수 있습니다. 요소를 변환하고, 새로운 배열을 생성하는 용도로 사용할 수 있으며, 데이터를 변경하지 않고 변환 작업을 수행하는 특성을 가지고 있습니다.

구문

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

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

매개변수

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

반환 값

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

구현 설명

map() 함수는 arr 배열의 요소를 순서대로 한 번씩 순회하면서 function 함수를 호출하고, 함수의 반환 값을 새로운 배열에 모아서 반환합니다. 이를 통해 각 요소를 변환하거나 조작하여 새로운 배열을 생성할 수 있습니다. 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() 함수를 사용하여 배열의 각 요소를 매핑하여 새로운 배열을 반환하는 세 가지 유용한 사례를 소개해드리겠습니다

소문자 변환

문자열 배열에서 각 문자열을 소문자로 변환하여 새로운 배열을 생성하는 경우 map() 함수를 사용할 수 있습니다.

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

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

console.log(lowercaseFruits);
// 출력: ['apple', 'banana', 'cherry']
자바스크립트 toLowerCase() 함수

위의 예제에서 map() 함수는 fruits 배열의 각 문자열을 소문자로 변환하여 lowercaseFruits 배열을 생성합니다.

값 추출

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() 함수는 users 배열의 각 요소에서 name 속성을 추출하여 새로운 배열 names를 생성합니다.

조건에 따른 값 대체

조건에 따라 배열의 각 요소를 대체 값으로 변경하여 새로운 배열을 생성하는 경우 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() 함수는 numbers 배열의 각 숫자가 짝수인지 홀수인지 판별하여, 짝수일 경우 'Even', 홀수일 경우 'Odd'로 대체하여 modifiedNumbers 배열을 생성합니다.

map()과 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()과 forEach() 함수의 장단점

map() 함수와 forEach() 함수는 각각 다른 장단점을 가지고 있습니다. 각각의 장점은 단점이 될 수도 있고, 단점은 장점이 될 수도 있으니 이점을 유의해서 참고하시기 바랍니다.

map() 함수의 장점

  • 각 배열 요소를 변환하여 새로운 배열을 반환합니다.
  • 반환된 배열은 원본 배열과 길이가 같고, 각 요소는 변환된 값으로 구성됩니다.
  • 변환 작업을 통해 새로운 배열을 생성하기 때문에 원본 배열은 변경되지 않습니다.

map() 함수의 단점

  • 새로운 배열을 생성하는 과정에서 메모리를 사용하므로, 큰 크기의 배열에 대해서는 성능 이슈가 있을 수 있습니다.
  • forEach() 함수보다 코드가 길어질 수 있습니다.

forEach() 함수의 장점

  • map() 함수보다 코드가 간결합니다.
  • 반환 값이 없기 때문에, 작업 결과를 다른 변수에 저장하거나 활용하지 않아도 됩니다.
  • 원본 배열을 직접 변경할 수 있으므로, 필요에 따라 배열을 수정할 수 있습니다.

forEach() 함수의 단점

  • 배열의 각 요소를 다른 값으로 바꾸거나, 특정 작업을 수행하거나, 배열의 각 요소를 필터링하는 데 사용할 수 없습니다.
  • 새로운 배열을 반환하지 않습니다.

전반적으로, map() 함수는 배열의 요소를 처리하는 데 더 유용한 함수입니다. 하지만, forEach() 함수는 코드가 간결하여 특정 상황에서는 더 유용한 함수가 될 수 있습니다.

명세서

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

브라우저 호환성

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

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

참고문헌

같이 보기