JavaScript 배열 메소드: map()을 활용한 데이터 변환 🌟

JavaScript에서 배열을 다루는 것은 웹 개발의 핵심입니다. 특히, map() 메소드는 배열의 각 요소를 순회하며 주어진 함수를 적용한 새로운 배열을 생성하는 데 아주 유용합니다. 이 방법을 통해 데이터 변환 작업을 간단하고 효율적으로 수행할 수 있습니다. 오늘은 map() 메소드의 기본 사용법과 함께 실용적인 예제를 살펴보겠습니다.

map() 메소드란?

map() 메소드는 원본 배열의 각 요소에 대해 주어진 함수를 호출한 결과를 모아 새로운 배열을 만듭니다. 이 과정에서 원본 배열은 변경되지 않습니다.

기본 문법

const newArray = array.map(function(currentValue, index, arr), thisValue)

• currentValue: 현재 처리하고 있는 요소의 값입니다.
• index (선택적): 현재 처리하고 있는 요소의 인덱스입니다.
• arr (선택적): map() 메소드가 호출된 배열입니다.
• thisValue (선택적): callback 함수 내에서 this로 사용될 값입니다.

예제: 숫자 배열의 각 요소 두 배 만들기

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

console.log(doubled); // 출력: [2, 4, 6, 8, 10]

이 예제에서는 numbers 배열의 각 요소를 순회하며 해당 요소에 2를 곱한 새로운 배열 doubled를 생성합니다.

예제: 객체 배열에서 특정 속성 추출하기

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

const names = people.map(person => person.name);

console.log(names); // 출력: ["Alice", "Bob", "Charlie"]

이 예제에서는 people 배열의 각 객체에서 name 속성만 추출하여 새로운 배열 names를 생성합니다.

map() 활용 팁

• 데이터 변환: map()은 API로부터 받은 데이터를 사용자 인터페이스에 표시하기 적합한 형태로 변환할 때 유용합니다.
• 체이닝: map() 메소드는 다른 배열 메소드와 체인(chain)하여 사용할 수 있습니다. 예를 들어, map()으로 데이터를 변환한 후 filter()로 특정 조건을 만족하는 요소만 추출할 수 있습니다.

map() 메소드를 활용하면 JavaScript에서 배열 데이터를 다루는 작업을 간결하고 효과적으로 수행할 수 있습니다. 실제 프로젝트에서 이 메소드를 적극적으로 활용해 보세요!