map 함수

map 함수란?

map 함수는 JavaScript 배열 메서드로, 배열의 각 요소를 다른 값으로 변환하여 새로운 배열을 생성한다. 원본 배열은 변경되지 않고, 변환 결과를 기반으로 새로운 배열을 반환한다.

 

구문

const newArray = array.map((element, index, array) => {
  // 변환 로직
  return transformedElement;
});

• element : 현재 처리 중인 배열의 요소
• index : 현재 요소의 인덱스
• array : 원본 배열

 

사용 예시

1. 배열의 각 요소 변환

const numbers = [1, 2, 3, 4, 5];
const doubled = numbers.map(num => num * 2);

console.log(doubled); // [2, 4, 6, 8, 10]
console.log(numbers); // [1, 2, 3, 4, 5] (원본 배열은 변경되지 않음)

2. 객체 배열 변환

const users = [
  { id: 1, name: "Alice" },
  { id: 2, name: "Bob" },
  { id: 3, name: "Charlie" }
];
const names = users.map(user => user.name);

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

3. 문자열 문자 배열로 변환

const text = "Hello";
const chars = Array.from(text).map(char => char.toUpperCase());

console.log(chars); // ['H', 'E', 'L', 'L', 'O']

 

실제 사례

React 컴포넌트 렌더링 : 배열 데이터를 기반으로 컴포넌트를 동적으로 생성 할 때 자주 사용된다

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

const FruitList = () => (
  <ul>
    {fruits.map((fruit, index) => (
      <li key={index}>{fruit}</li> 
    ))}
  </ul>
);

export default FruitList;

👉 출력 결과

<ul>
  <li>Apple</li>
  <li>Banana</li>
  <li>Cherry</li>
</ul>