[JavaScript] Array.prototype.map()

현채은·2025년 2월 4일

map 함수란?

map() 함수는 배열의 모든 요소를 순회하며 콜백 함수를 실행한 결과를 모아 새로운 배열을 반환하는 메서드입니다. 이 과정에서 기존 배열은 수정되지 않고 유지됩니다.

언제 사용하나요?

배열 내 각 요소를 변환하거나 바꾸고 싶은 경우

기존 배열은 그대로 유지하고, 새로운 배열을 만들고 싶은 경우

👩🏻‍🏫 학습 전 예제 맛보기

하단의 코드를 직접 개발자 도구 콘솔창에 입력하여 결과를 확인해보세요.

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

// map()을 사용하여 각 numbers 요소에 콜백함수를 적용한 결과값을 새로운 배열(squares)에 추가합니다.
const squares = numbers.map((number) => number ** 2);

console.log("원본 배열:", numbers); // 출력: 원본 배열: [1, 2, 3, 4, 5]
console.log("새로운 배열:", squares); // 출력: 새로운 배열: [1, 4, 9, 16, 25]

사용방법

💡 map() 함수를 사용하는 경우 원본 배열은 변경되지 않는다는 점을 꼭 기억해주세요!

기본 문법

map() 함수는 array 배열의 요소를 순서대로 한 번씩 순회하면서 콜백 함수를 호출하고, 함수의 반환 값을 새로운 배열에 모아서 반환합니다.

const newArray1 = array.map((element) => { // 화살표 함수 사용
  return 변환된_값;
});
const newArray2 = array.map(function(element) { // 인라인 콜백 함수 사용
    return 변환된_값;
});

array : 원본 배열 ( map 함수를 적용해도 변경되지 않습니다. )
element : array 배열의 각 요소
변환된_값 : array 배열의 각 요소에 대해 function을 실행한 결과
newArray : 변환된_값을 모아서 반환한 새로운 배열
- 콜백함수가 true를 반환하면, 현재 요소는 필터링된 배열에 포함됩니다.

사용 예시

numbers 배열의 모든 숫자를 2배로 변환한 새로운 배열을 생성하고 싶은 경우

const numbers = [1, 2, 3, 4];
const doubledNumbers = numbers.map((number) => {
  return number * 2;
});

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

numbers : 원본 배열 ( map 함수를 적용해도 변경되지 않습니다. )
- ex. [1, 2, 3, 4]
number : numbers 배열의 각 요소
- ex. 1, 2, 3, 4
number * 2 : numbers 배열의 각 요소에 대해 function을 실행한 결과
- ex. 2, 4, 6, 8
doubledNumbers : *2를 적용시킨 요소들을 모아서 반환한 배열
- ex. [2, 4, 6, 8]

fruits 배열의 모든 과일 이름 뒤에 ‘주스’ 이라는 문자열을 추가한 새로운 배열을 생성하고 싶은 경우

const fruits = ['딸기', '사과', '포도'];
const juice = fruits.map((fruit) => {
  return fruit + '주스';
});

console.log(juice); 
// 출력결과: ['딸기주스', '사과주스', '포도주스']

users배열 내 객체의 특정 속성이나 값만 추출하여 새로운 배열을 생성하고 싶은 경우 (name)

const users = [
    {id: 1, name: "김코딩"},
    {id: 2, name: "김오즈"},
    {id: 3, name: "박자바"}
];

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

console.log(names); 
// 출력결과: ['김코딩', '김오즈', '박자바']

한걸음 더 나아가기

📌 map을 이용한 반복 렌더링은 React에서 매우 자주 사용되지만, 이는 React에 특화된 기능이 아닌 JavaScript 배열 메서드입니다. 따라서 바닐라 JavaScript에서도 사용 가능합니다.
React에서는 map을 통해 컴포넌트를 반복 렌더링하고, 바닐라 JavaScript에서는 DOM 요소를 반복 생성하거나 템플릿을 동적으로 구성하는 데 활용할 수 있습니다.

바닐라 JavaScript에서 map 사용 예제

const fruits = ['사과', '바나나', '포도'];

const ul = document.createElement('ul');
fruits.map(fruit => {
  const li = document.createElement('li');
  li.textContent = fruit;
  ul.appendChild(li);
});
document.body.appendChild(ul);

설명

map을 사용해 li 요소를 반복 생성합니다.
각 li 요소는 사용자 데이터에서 텍스트 콘텐츠를 동적으로 삽입합니다.
이후 appendChild를 통해 DOM에 추가합니다.

React에서의 map 사용 예제

import { useState } from 'react';

function FruitList() {
	const [fruits, setFruits] = useState(['사과', '바나나', '포도']);
	  return (
	    <ul>
	      {fruits.map(fruit => (
	        <li>{fruit}</li>
	      ))}
	    </ul>
	  );
	}