[JavaScript] map()

 

map() 

map 메서드는 자바스크립트에서 배열의 각 요소를 주어진 함수로 처리한 결과를 모아 새로운 배열을 반환하는 데 사용됩니다.

이 메서드는 원래 배열을 변경하지 않고, 항상 새로운 배열을 반환합니다.

 

map 메서드는 콜백 함수를 인자로 받습니다.

이 콜백 함수는 배열의 각 요소와 그 인덱스, 그리고 배열 자체를 매개변수로 받습니다.

const newArray = oldArray.map((element, index, array) => {
  // 새로운 요소를 반환
});

• element: 현재 처리 중인 배열의 요소
• index(선택): 현재 처리 중인 배열 요소의 인덱스
• array(선택): map 메서드를 호출한 배열

 

예제 1: 배열의 각 요소에 2를 곱한 새로운 배열 생성

const numbers = [1, 2, 3, 4, 5];
const newNumbers = numbers.map(number => number * 2);
console.log(newNumbers); // (5) [2, 4, 6, 8, 10

numbers 배열의 각 요소에 2를 곱한 결과를 newNumbers 배열에 저장합니다.

 

 

예제 2: 객체 배열에서 특정 속성 값을 추출한 배열 생성

const users = [
  { name: 'Alice', age: 25 },
  { name: 'Bob', age: 30 },
  { name: 'Charlie', age: 35 }
];

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

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

users 배열의 각 객체에서 name 속성만 추출하여 names 배열을 만듭니다.

 

 

예제 3: 배열 요소의 인덱스와 값을 함께 사용하기

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

const indexedNumbers = numbers.map((number, index) => `Index ${index}: ${number}`);

console.log(indexedNumbers);
// ['Index 0: 1', 'Index 1: 2', 'Index 2: 3', 'Index 3: 4', 'Index 4: 5']

배열의 각 요소와 그 인덱스를 조합하여 새로운 문자열 배열을 만듭니다.

 

 

예제 4: 원래 배열의 요소를 변경하지 않음

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

const newNumbers = numbers.map(number => number * 2);

console.log(numbers); // [1, 2, 3, 4, 5]
console.log(newNumbers); // [2, 4, 6, 8, 10]

 

 

map 메서드와 다른 배열 메서드 비교

• forEach: 각 요소에 대해 함수를 실행하지만 반환 값이 없고 원래 배열을 변경하지 않습니다.
• filter: 조건을 만족하는 요소만을 포함하는 새로운 배열을 반환합니다.
• reduce: 배열을 단일 값으로 축소합니다.

 

map 메서드는 배열의 각 요소를 변환하여 새로운 배열을 생성하는 데 매우 유용합니다.