JavaScript map 사용 방법

map메서드란 무엇인가?

map메서드는 JavaScript의 배열 메서드이며, 배열 내의 각 요소에 대해 주어진 함수를 호출하고 그 결과로 새로운 배열을 생성한다.
기존 배열을 수정하지 않고, 각 요소를 변환하여 새로운 배열을 만들 때 유용하게 사용됨

filter메서드의 문법

배열.map((요소,인덱스,원본배열) => {
  // 콜백함수 로직
  return 변환된 요소
})

• 요소(element) : 처리할 현재 요소
• 인덱스(선택 사항) : 처리할 현재 요소의 인덱스
• 원본배열(선택 사항) : map를 호출할 배열

map메서드의 특성

• 새로운 배열 변환: 기존 배열을 변경하지 않고 새로운 배열을 반환함
• 순회 및 변환: 배열의 각 요소에 대해 주어진 함수를 순회하며 새로운 값을 반환함
• 불변성 유지: 함수형 프로그래밍에서 중요한 개념인 배열의 불변성을 유지함

map메서드 예제

3-1) 배열의 각 요소에 2씩 곱하기

const numbers = [1,2,3];
const newNumbers = numbers.map(number => number * 2);

console.log(newNumbers); // [2,4,6];

3-2) 배열에서 이름 글자수만 추출해서 새로운 배열을 만들기

const names = ['rarrit', 'ruru', 'roe', 'ruby'];
const nameLengths = names.map(name => name.length);

console.log(nameLengths); // [6,4,3,4]

3-3) 객체 배열에서 특정 속성 추출해서 새로운 배열 만들기

const dogs = [
  {name: 'maru', age: 14},
  {name: 'kkambo', age: 12},
  {name: 'moongchi', age: 10}
];
const dogNames = dogs.map(dog => dog.name);

console.log(dogNames); // ['maru', 'kambo', 'moongchi'];

map메서드는 실무에서 언제 사용될까?

4-1) 데이터 포맷 변환

const products = [
  {id: 1, name: 'banana', category: 'fruit', price: 400},
  {id: 2, name: 'hambuger', category: 'food', price: 600},
  {id: 3, name: 'apple', category: 'fruit', price: 200},
  {id: 4, name: 'pizza', category: 'food', price: 800}
]
const formattedProducts = products.map(product => ({
  id: product.id,
  name: product.name,
  category: product.category,
  formattedPrice: `$${product.price}`
}))

console.log(formattedProducts);
/*
  {id: 1, name: 'banana', category: 'fruit', price: $400},
  {id: 2, name: 'hambuger', category: 'food', price: $600},
  {id: 3, name: 'apple', category: 'fruit', price: $200},
  {id: 4, name: 'pizza', category: 'food', price: $800}
*/

4-2) 태그 감싸기

const members = ['rarrit', 'ruru', 'ruby'];
const wrapMembers = members.map(member => `<li>{member}</li>`);

console.log(wrapMembers);
/*
[
  <li>{member}</li>,
  <li>{member}</li>,
  <li>{member}</li>
]
*/

마무리

map메서드는 배열의 각 요소를 변환하고 새로운 배열을 생성하는 작업에 매우 유용한 메서드이다.
기존 데이터를 유지하면서 데이터를 다룰 수 있어서 뭔가 백업,안전 이런 단어가 생각나는..? 앞으로 잘 활용해보겠다!