JavaScript Array Map 메서드 완벽 가이드

JavaScript에서 배열은 데이터를 저장하고 조작하는 데 유용한 방법입니다. 그 중에서도 map() 메서드는 배열의 각 요소를 반복하면서 함수로 처리할 수 있는 내장 함수입니다. 이 메서드는 호출된 배열의 모든 요소에 대해 제공된 함수를 호출한 결과를 포함하는 새 배열을 만듭니다. 이 기사에서는 map() 메서드의 문법, 기능, 사용 사례 등을 탐구할 것입니다.

 

JavaScript Array Map 메서드 완벽 가이드

 

문법

map() 메서드는 배열에서 호출되며 콜백 함수를 인수로 받습니다. 콜백 함수는 처리 중인 현재 요소, 현재 요소의 인덱스 및 map()이 호출된 배열을 매개 변수로 받습니다. map() 메서드의 문법은 다음과 같습니다:

array.map(callback(currentValue, index, array))

 

여기서 array는 map() 메서드가 호출되는 배열이고, callback은 배열의 각 요소에 대해 호출될 함수입니다. currentValue는 처리 중인 현재 요소의 값을 나타내고, index는 현재 요소의 인덱스를 나타내며, array는 원래 배열을 나타냅니다.

 

 

기능

map() 메서드는 원래 배열의 각 요소에 대해 콜백 함수를 호출한 결과를 포함하는 새 배열을 만듭니다. 원래 배열은 수정되지 않으며, 새 배열이 map() 메서드의 결과로 반환됩니다. 새 배열의 길이는 원래 배열의 길이와 동일합니다. 콜백 함수가 반환하는 값은 새 배열에 포함되지 않습니다.

map() 메서드는 고차 함수로, 함수 자체를 인수로 받거나 결과로 함수를 반환할 수 있습니다. 또한 map() 메서드는 순수 함수로, 원래 배열을 수정하지 않으며 부작용이 없습니다.

다음은 map() 메서드의 사용 예시입니다:

 

1. 배열 요소의 두 배 만들기

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

 

여기서 map() 메서드를 사용하여 원래 배열 numbers의 요소를 두 배로 만든 새 배열 doubledNumbers를 생성했습니다.

 

 

2. 화씨를 섭씨로 변환하기

const fahrenheitTemperatures = [32, 68, 86, 104];
const celsiusTemperatures = fahrenheitTemperatures.map(temp => (temp - 32) * 5 / 9);
console.log(celsiusTemperatures); 
// 출력: [0, 20, 30, 40]

 

여기서 map() 메서드를 사용하여 화씨 온도 배열을 섭씨 온도로 변환했습니다.

 

 

3. 배열의 객체에서 속성 추출하기

const people = [
  { name: "Alice", age: 23 },
  { name: "Bob", age: 27 },
  { name: "Charlie", age: 18 },
];
const names = people.map(person => person.name);
console.log(names); 
// 출력: ["Alice", "Bob", "Charlie"]

 

여기서 map() 메서드를 사용하여 people 배열의 각 객체에서 name 속성을 추출했습니다.

 

4. 중첩 배열 평탄화하기

const nestedArray = [[1, 2], [3, 4], [5, 6]];
const flattenedArray = nestedArray.map(innerArray => innerArray.join(","));
console.log(flattenedArray); 
// 출력: ["1,2", "3,4", "5,6"]

 

여기서 map() 메서드를 사용하여 nestedArray 배열의 각 중첩 배열 요소를 쉼표로 연결된 문자열로 변환했습니다.

 

 

결론

결론적으로, map() 메서드는 JavaScript에서 배열을 다루는 데 매우 강력한 도구입니다. 이 메서드를 사용하면 배열의 각 요소를 변환하여 새 배열을 만들 수 있습니다. map() 메서드는 고차 함수로, 함수 자체를 인수로 받아 원래 배열을 수정하지 않고 순수 함수로 작동합니다.

map() 메서드는 데이터 변환, 객체에서 속성 추출, 배열의 평탄화 등 다양한 작업에 유용하게 사용될 수 있습니다. map() 메서드를 사용하면 더 간결하고 표현력이 높은 코드를 작성할 수 있으며, 이는 읽기 쉽고 유지 관리가 용이합니다.

JavaScript에는 map() 메서드 외에도 filter(), reduce(), forEach()와 같은 다양한 배열 메서드가 있습니다. 이러한 메서드는 각기 다른 작업에 유용하게 사용될 수 있습니다.

따라서, 배열을 효율적으로 다루고자 하는 JavaScript 개발자라면 map() 메서드를 이해하고 활용하는 것이 중요합니다.

추가적으로, map() 메서드를 사용하는 다양한 사례와 실습 예제를 통해 이 메서드의 활용 방법을 더 깊이 이해할 수 있습니다. 더 많은 예제와 구체적인 설명을 원하시면 언제든지 요청해 주세요. 추가로 필요한 내용을 더 작성해 드리겠습니다.