[JavaScript] 자바스크립트의 map()

1. map()이란?

자바스크립트에서 map()은 배열의 각 요소에 대해 주어진 함수를 호출하고, 그 결과를 모아서 새로운 배열을 만드는 메서드이다. 원본 배열은 변경되지 않는다.

const newArray = oldArray.map(function(currentValue, index, array) {
  // return 변환할 값
});

• currentValue 현재 처리 중인 요소
• index 현재 요소의 인덱스 (선택 사항)
• array map이 호출된 원래 배열 (선택 사항)

 

또는 화살표 함수로 아래와 같이 쓸 수 있다.

const newArray = oldArray.map((item, index) => {
  return item * 2;
});

 

 

2. 기본 예제

2.1 배열의 각 숫자에 2를 곱하기

const numbers = [1, 2, 3, 4];
const doubled = numbers.map(num => num * 2);
console.log(doubled); // [2, 4, 6, 8]

 

2.2 객체 배열에서 특정 속성만 뽑기

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

const names = users.map(user => user.name);
console.log(names); // ["Alice", "Bob"]

 

2.3 인덱스를 활용한 변환

const letters = ['a', 'b', 'c'];
const indexed = letters.map((letter, index) => `${index + 1}: ${letter}`);
console.log(indexed); // ["1: a", "2: b", "3: c"]

⭐중요한 점!

1. 원본 배열은 바뀌지 않는다.
2. 항상 새로운 배열을 반환한다.
3. .map()은 undefined를 리턴하면 그 값도 그대로 들어간다.

 

3.map() 체이닝

`.map()` : 배열 요소를 변환
`.filter()` : 배열 요소를 걸러냄
`.reduce()` : 배열 요소를 누적 처리
`.sort()` : 배열 요소를 정렬
`.forEach()` : 요소마다 작업 실행 (반환 없음)

 

3.1 map() + filter()

filter()는 배열 요소를 특정 조건에 맞게 걸러내는데 사용된다.

 

점수 배열에서, 짝수 점수만 골라서 10점을 더한 새 배열을 만들기

const scores = [45, 60, 75, 88, 92];

// 짝수만 필터링 → 각 점수에 +10
const updated = scores
  .filter(score => score % 2 === 0)       // [60, 88, 92]
  .map(score => score + 10);              // [70, 98, 102]

console.log(updated); // [70, 98, 102]

3.2 map() + reduce() 

reduce()는 배열의 각 요소에 대해 주어진 리듀서(reducer) 함수를 실행하고, 단일 결과값을 반환한다.
즉, `map()`은 배열의 요소를 변형하고, `reduce()`는 배열을 단일 값으로 줄이는 데 사용된다.

 

가격 배열이 있을 때, 세금 10%를 더한 뒤 총합을 구하기

const prices = [1000, 2000, 3000];

const totalWithTax = prices
  .map(price => price * 1.1)        // 세금 10% 추가
  .reduce((sum, price) => sum + price, 0); // 총합 계산

console.log(totalWithTax); // 6600

 

3.3 map() + filter() + reduce() 

학생 점수 배열에서 60점 이상인 학생만 통과시키고, 그 평균 구하기

const scores = [50, 65, 80, 90, 45];

const average = scores
  .filter(score => score >= 60)             // [65, 80, 90]
  .reduce((acc, score, _, arr) => acc + score / arr.length, 0);

console.log(average); // 78.333...

💡 reduce()에서 마지막 arr은 전체 배열을 가져와서 .length로 평균을 바로 계산할 수 있다.

 

짝수만 골라 2배로 만들고, 합계 구하기

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

const result = numbers
  .filter(n => n % 2 === 0)  // [2, 4]
  .map(n => n * 2)           // [4, 8]
  .reduce((sum, n) => sum + n, 0); // 12

console.log(result); // 12

 

 

4. 객체리터럴과 map()

객체 리터럴을 암시적으로 변환해야 한다면 화살표 함수와 .map()을 사용해서 아래와 같이 쓴다. 

const race = "100m dash";
const runners = ["Alice", "Bob", "Charlie"];

const result = runners.map((runner, i) => ({
  name: runner,
  race,
  place: i + 1
}));

console.log(result);
// [
//   { name: "Alice", race: "100m dash", place: 1 },
//   { name: "Bob", race: "100m dash", place: 2 },
//   { name: "Charlie", race: "100m dash", place: 3 }
// ]

✅ 소괄호로 객체를 감싸는 것! → => ({ ... }) 형식이 핵심이다.

• 객체 리터럴 반환 : () => ({ key: value })
• 인덱스 포함해서 반환 : (item, i) => ({ index: i, item })

❌주의사항 : 이렇게 쓰면 안됨 (잘못된 예)

const result = runners.map((runner, i) => {
  name: runner,
  rank: i + 1
});
// 결과: undefined 요소로만 채워진 배열

이렇게 쓰면 {}를 함수 본문의 블록으로 인식해서 return이 없어진 상태가 된다.

 

5. 중첩 템플릿과 map()

다음과 같이 템플릿 안에 템플릿을 중첩하는 것도 가능하다.

const people = [
  { name: 'Alberto', age: 27 },
  { name: 'Caroline', age: 27 },
  { name: 'Josh', age: 21 }
];

const markup = `
  <ul>
    ${people.map(person => `<li>${person.name}</li>`).join('\n')}
  </ul>`;

console.log(markup);

/*
출력 결과:
<ul>
  <li>Alberto</li>
  <li>Caroline</li>
  <li>Josh</li>
</ul>
*/

 

 

6. Array.from()과 map()

Array.from()은 ES6에서 도입한 새로운 배열 메서드 중 첫번째이다.

Array.from()은 배열스러운, 즉 배열처럼 보이지만 배열이 아닌 객체를 받아서 실제 배열로 변환해 반환한다.

<div class="fruits">
    <p> Apple </p>
    <p> Banana </p>
    <p> Orange </p>
</div>

위 <p> 요소들을 가져와서 ["Apple", "Banana", "Orange"] 형태의 배열로 만드려고 할 때 Array.from() + map()을 사용한다.

 

위의 코드를 Array.from() 대신 map()으로 작성하려면, 먼저 NodeList를 배열로 변환한 후 map()을 사용해야 한다.
왜냐하면 NodeList는 map()을 직접 사용할 수 없기 때문이다. (NodeList는 진짜 배열이 아니다.).

const pTags = document.querySelectorAll('.fruits p'); // NodeList

const fruitNames = Array.from(pTags)                 // NodeList → Array
  .map(p => p.textContent.trim());                   // map으로 텍스트 추출

console.log(fruitNames);
// 출력: ["Apple", "Banana", "Orange"]