[Dseok의 코딩스터디] JavaScript map() 한방에 끝내기 | 개념 & 실용 예제 10가지

📌 map() 메서드란?

map() 메서드는 배열(Array)의 각 요소를 변환하여 새로운 배열을 반환하는 JavaScript 내장 메서드입니다. 기존 배열을 변경하지 않고, 새로운 배열을 반환하는 것이 특징입니다.

✅ 기본 문법

const newArray = array.map(function(element, index, array) {
  return element;
});

• element: 현재 순회 중인 요소
• index: 현재 요소의 인덱스 (선택 사항)
• array: map()을 호출한 원본 배열 (선택 사항)

✅ 화살표 함수 문법

const newArray = array.map((element, index) => element * 2);

✅ 설명: 위 코드는 배열의 모든 요소를 2배로 변환하여 새로운 배열을 반환합니다.

 

📌 map()의 활용

map()은 고차 함수(Higher-Order Function)이며, 함수형 프로그래밍(Functional Programming)에서 자주 사용됩니다. 기본적으로 순수 함수(Pure Function)를 활용하여 데이터를 변환하고 불변성을 유지합니다.

• 데이터 변환: 배열 데이터를 가공하여 새로운 형식으로 변경
• 불변성 유지: 기존 배열을 변경하지 않고 새로운 배열 생성
• 병렬 처리 최적화: 일부 언어에서는 map()을 멀티코어 환경에서 병렬로 실행 가능

✅ 예제: map()을 사용하여 JSON 데이터를 변환하는 코드

fetch('https://jsonplaceholder.typicode.com/users')
  .then(response => response.json())
  .then(users => {
    const userNames = users.map(user => user.name);
    console.log(userNames);
  });

✅ 설명: API에서 받아온 JSON 데이터에서 name 필드만 추출하여 새로운 배열을 생성합니다.

 

📌 map() 실용 예제 10가지

1️⃣ 배열의 모든 요소를 2배로 변환하기

<p>콘솔을 확인하세요!</p>
<script>
const numbers = [1, 2, 3, 4, 5];
const doubled = numbers.map(num => num * 2);
console.log(doubled);
</script>

✅ 설명: 각 요소를 2배로 변환하여 새로운 배열을 만듭니다.

 

2️⃣ 문자열 배열을 대문자로 변환하기

<p>콘솔을 확인하세요!</p>
<script>
const words = ["hello", "world", "javascript"];
const upperCaseWords = words.map(word => word.toUpperCase());
console.log(upperCaseWords);
</script>

✅ 설명: map()을 사용하여 문자열을 대문자로 변환합니다.

 

3️⃣ 객체 배열에서 특정 속성만 추출하기

<p>콘솔을 확인하세요!</p>
<script>
const users = [
  { name: "홍길동", age: 25 },
  { name: "김철수", age: 30 },
  { name: "이영희", age: 28 }
];

const userNames = users.map(user => user.name);
console.log(userNames);
</script>

✅ 설명: 객체 배열에서 name 속성만 추출하여 새로운 배열을 만듭니다.

 

4️⃣ HTML 요소를 동적으로 생성하기

<ul id="userList"></ul>
<script>
const users = ["홍길동", "김철수", "이영희"];
const userList = document.getElementById("userList");

const userItems = users.map(user => `<li>${user}</li>`).join("");
userList.innerHTML = userItems;
</script>

✅ 설명: map()을 사용하여 동적으로 리스트 항목을 생성합니다.

 

5️⃣ 가격 할인 적용하기

<p>콘솔을 확인하세요!</p>
<script>
const prices = [100, 200, 300, 400];
const discountedPrices = prices.map(price => price * 0.9);
console.log(discountedPrices);
</script>

✅ 설명: map()을 사용하여 모든 가격에 10% 할인을 적용합니다.

 

6️⃣ 숫자를 문자열로 변환하기

<p>콘솔을 확인하세요!</p>
<script>
const numbers = [10, 20, 30, 40];
const stringNumbers = numbers.map(num => num.toString());
console.log(stringNumbers);
</script>

✅ 설명: 숫자 배열을 map()을 사용하여 문자열 배열로 변환합니다.

 

7️⃣ 특정 키워드가 포함된 항목 필터링

<p>콘솔을 확인하세요!</p>
<script>
const products = ["Apple MacBook", "Samsung Galaxy", "Apple iPhone", "Dell Laptop"];
const appleProducts = products.map(product => product.includes("Apple") ? product : null).filter(Boolean);
console.log(appleProducts);
</script>

✅ 설명: map()을 활용해 Apple이 포함된 제품만 남기고 나머지는 null로 변환한 후, filter()를 활용해 null 값을 제거합니다.

 

8️⃣ 객체 배열에서 새로운 속성 추가하기

<p>콘솔을 확인하세요!</p>
<script>
const users = [
  { name: "홍길동", age: 25 },
  { name: "김철수", age: 30 }
];

const usersWithRole = users.map(user => ({ ...user, role: "user" }));
console.log(usersWithRole);
</script>

✅ 설명: 객체 배열에서 새로운 속성을 추가한 새로운 배열을 생성합니다.

 

9️⃣ 날짜 형식 변환하기

<p>콘솔을 확인하세요!</p>
<script>
const dates = ["2024-02-20", "2024-03-15", "2024-04-10"];
const formattedDates = dates.map(date => new Date(date).toLocaleDateString("ko-KR"));
console.log(formattedDates);
</script>

✅ 설명: 날짜 문자열을 사용자 친화적인 형식으로 변환합니다.

 

🔟 점수를 등급으로 변환하기

<p>콘솔을 확인하세요!</p>
<script>
const scores = [95, 82, 76, 65, 50];
const grades = scores.map(score => score >= 90 ? "A" : score >= 80 ? "B" : score >= 70 ? "C" : "D");
console.log(grades);
</script>

✅ 설명: map()을 사용해 점수를 A~D 등급으로 변환합니다.

 

 

📌 forEach() vs map() 차이점

비교 항목forEach()map()

반환 값	없음 (undefined)	새로운 배열 반환
원본 배열 변경	❌ 변경되지 않음	❌ 변경되지 않음
사용 목적	배열을 순회하며 특정 작업 수행	배열을 변환하여 새로운 배열 생성
중간 연산 가능 여부	❌ 불가능	✅ 가능

✅ 결론: forEach()는 단순 반복 작업에 적합하고, map()은 배열을 변환할 때 더 적합합니다.

 

📌 마무리 정리 🎯

map() 메서드는 JavaScript에서 배열을 변환하는 가장 강력한 도구 중 하나입니다. 기존 데이터를 변경하지 않고 새로운 배열을 반환하여 데이터 불변성을 유지하며, 함수형 프로그래밍 패턴을 활용하는 데 매우 유용합니다.

🚀 이제 map()을 활용하여 다양한 데이터 변환을 시도해 보세요!