JavaScript의 배열 메서드 마스터하기: 매핑, 필터링 및 축소

JavaScript의 배열 메서드: 매핑, 필터링, 축소

JavaScript는 배열 작업을 단순화하는 강력한 배열 메서드를 제공합니다. 그 중 Map, Filter, Reduce는 모든 개발자가 이해해야 할 필수 고차 함수 3가지입니다.

---

1. 지도 방법

map 메소드는 콜백 함수를 사용해 기존 배열의 각 요소를 변환하여 새로운 배열을 생성합니다.

구문

array.map(callback(currentValue[, index[, array]])[, thisArg]);

예: 요소 변형

const numbers = [1, 2, 3, 4];
const squared = numbers.map(function(number) {
  return number * number;
});
console.log(squared); // Output: [1, 4, 9, 16]

사용 사례

• 배열에 변환 적용(예: 단위 변환, 데이터 형식 지정)

---

2. 필터 방법

필터 메소드는 제공된 콜백 함수로 구현된 테스트를 통과한 요소만 포함하는 새 배열을 생성합니다.

구문

array.filter(callback(element[, index[, array]])[, thisArg]);

예: 요소 필터링

const numbers = [1, 2, 3, 4, 5];
const evenNumbers = numbers.filter(function(number) {
  return number % 2 === 0;
});
console.log(evenNumbers); // Output: [2, 4]

사용 사례

• 특정 조건에 따라 배열을 필터링합니다(예: null 값 필터링, 활성 사용자 찾기).

---

3. 감소 방법

리듀스 메소드는 누산기와 배열의 각 요소(왼쪽에서 오른쪽으로)에 함수를 적용하여 단일 값으로 줄입니다.

구문

array.reduce(callback(accumulator, currentValue[, index[, array]])[, initialValue]);

예: 배열 요소 합산

const numbers = [1, 2, 3, 4];
const sum = numbers.reduce(function(accumulator, currentValue) {
  return accumulator + currentValue;
}, 0);
console.log(sum); // Output: 10

사용 사례

• 총계 계산(예: 합계, 평균)
• 중첩 배열을 병합합니다.

---

4. 맵, 필터, 축소 결합

이러한 방법을 결합하여 복잡한 작업을 수행할 수 있습니다.

예: 짝수의 제곱합

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

const total = numbers
  .filter(function(number) {
    return number % 2 === 0; // Keep even numbers
  })
  .map(function(number) {
    return number * number; // Square the numbers
  })
  .reduce(function(accumulator, currentValue) {
    return accumulator + currentValue; // Sum the squares
  }, 0);

console.log(total); // Output: 20

---

5. 주요 차이점

Method	Purpose	Return Value
map	Transforms each element	A new array of the same length
filter	Filters elements	A new array with fewer or equal items
reduce	Reduces array to a single value	A single accumulated result

---

6. 이 방법을 사용하면 얻을 수 있는 이점

1. 가독성: 더욱 깔끔하고 선언적인 코드.
2. 재사용성: 어레이 작업을 모듈화합니다.
3. 성능: 최적화된 방법으로 일반적인 작업을 단순화합니다.

---

7. 요약

• map은 각 요소에 함수를 적용하여 배열을 변환합니다.
• 필터는 조건에 따라 요소를 선택합니다.
• Reduce는 배열 요소를 단일 값으로 집계합니다.
• 이러한 방법은 함수형 프로그래밍을 촉진하고 배열 처리를 단순화합니다.

맵, 필터, 축소를 마스터하면 JavaScript 기술이 향상되고 코드가 더 깔끔하고 효율적으로 만들어집니다.

안녕하세요. 저는 Abhay Singh Kathayat입니다!
저는 프론트엔드와 백엔드 기술 모두에 대한 전문 지식을 갖춘 풀스택 개발자입니다. 저는 효율적이고 확장 가능하며 사용자 친화적인 애플리케이션을 구축하기 위해 다양한 프로그래밍 언어와 프레임워크를 사용하여 작업합니다.
제 비즈니스 이메일(kaashshorts28@gmail.com)로 언제든지 연락주세요.

위 내용은 JavaScript의 배열 메서드 마스터하기: 매핑, 필터링 및 축소의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!