현대 웹 개발에서 데이터 조작은 원활하고 반응이 빠른 애플리케이션을 보장하는 데 매우 중요합니다. 제품을 필터링하든, 특정 항목을 찾든, 표시할 데이터를 변환하든 효과적인 데이터 조작을 통해 애플리케이션이 원활하게 실행되고 뛰어난 사용자 경험을 제공할 수 있습니다.

JavaScript는 일반적인 작업을 위한 찾기, 매핑, 필터와 같은 여러 내장 메서드를 제공합니다. 그러나 다재다능한 축소 방법은 이러한 모든 작업 등을 수행할 수 있는 능력이 뛰어납니다. Reduce를 사용하면 값을 누적하고, 배열을 변환하고, 중첩 구조를 평면화하고, 복잡한 데이터 변환을 간결하게 생성할 수 있습니다.

Reduce는 다른 배열 방법을 복제할 수 있지만 간단한 작업에 항상 가장 효율적인 선택은 아닐 수 있습니다. 맵 및 필터와 같은 방법은 특정 목적에 최적화되어 있으며 간단한 작업의 경우 더 빠를 수 있습니다. 그러나 Reduce를 사용하는 방법을 이해하면 코드를 더 좋고 이해하기 쉽게 만드는 다양한 방법을 찾는 데 도움이 될 수 있습니다.

이 글에서는 축소 방법을 자세히 알아보고, 다양한 사용 사례를 살펴보고, 잠재력을 극대화하기 위한 모범 사례에 대해 논의하겠습니다.

기사 개요

• 감소 방법 이해

• 자바스크립트 축소 구문

• 자바스크립트 축소 예시

• 리듀스 방식의 다양한 활용 사례

• JavaScript 지도, 필터, 찾기를 축소로 대체

• 결론

감소 방법 이해

자바스크립트 축소 메소드는 누산기와 배열의 각 요소(왼쪽에서 오른쪽으로)에 함수를 적용하여 단일 값으로 줄입니다. 이 단일 값은 문자열, 숫자, 객체 또는 배열일 수 있습니다.

기본적으로 축소 메서드는 배열을 가져와 현재 배열 요소에 누적된 결과를 결합하는 함수를 반복적으로 적용하여 하나의 값으로 압축합니다.

JavaScript 감소 구문

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

매개변수:

콜백: 각 요소에서 실행할 함수로, 다음 인수를 사용합니다.

누산기: 콜백의 마지막 호출에서 이전에 반환된 누적 값 또는 제공된 경우 초기 값입니다.

currentValue: 배열에서 처리 중인 현재 요소입니다.

index (선택 사항): 배열에서 처리 중인 현재 요소의 인덱스입니다.

array (선택 사항): 배열 축소가 호출되었습니다.

initialValue: 콜백의 첫 번째 호출에 대한 첫 번째 인수로 사용할 값입니다. initialValue가 제공되지 않으면 배열의 첫 번째 요소(array[0])가 초기 누산기 값으로 사용되고 첫 번째 요소에서는 콜백이 실행되지 않습니다.

자바스크립트 축소 예시

다음은 자바스크립트 축소 메소드를 사용하는 방법에 대한 기본 예입니다.

JavaScript를 사용하여 Sum으로 축소

const numbers = [1, 2, 3, 4];
const sum = numbers.reduce((acc, curr) => acc   curr, 0);
console.log(sum); // Output: 10

이 예에서 Reduce는 배열의 각 숫자를 누산기(acc)에 추가합니다. 초기값 0부터 시작하여 다음과 같이 처리됩니다.

• (0 1) -> 1

• (1 2) -> 3

• (3 3) -> 6

• (6 4) -> 10

감소 방법의 다양한 사용 사례

축소 방법은 매우 다양하며 다양한 시나리오에 적용할 수 있습니다. 다음은 설명과 코드 조각이 포함된 몇 가지 일반적인 사용 사례입니다.

객체 배열 줄이기

객체 배열이 있고 특정 속성을 요약하려고 한다고 가정합니다.

const products = [
  { name: 'Laptop', price: 1000 },
  { name: 'Phone', price: 500 },
  { name: 'Tablet', price: 750 }
];


const totalPrice = products.reduce((acc, curr) => acc   curr.price, 0);
console.log(totalPrice); // Output: 2250

이 예에서는 0에서 시작하는 누산기(acc)에 가격 속성을 추가하여 각 제품 객체에 대한 반복을 줄입니다.

배열을 객체로 축소

reduce를 사용하여 배열을 객체로 변환할 수 있습니다. 이는 속성
을 사용하여 배열을 그룹화하려는 경우 유용할 수 있습니다.

const items = [
  { name: 'Apple', category: 'Fruit' },
  { name: 'Carrot', category: 'Vegetable' },
  { name: 'Banana', category: 'Fruit' }
];

const groupedItems = items.reduce((acc, curr) => {
  if (!acc[curr.category]) {
    acc[curr.category] = [];
  }
  acc[curr.category].push(curr.name);
  return acc;
}, {});

console.log(groupedItems);
// Output: { Fruit: ['Apple', 'Banana'], Vegetable: ['Carrot'] }

이 예에서는 항목을 카테고리별로 그룹화합니다. 각 항목에 대해 해당 카테고리가 누산기(acc)에 이미 존재하는지 확인합니다. 그렇지 않은 경우 해당 카테고리에 대한 배열을 초기화한 다음 항목 이름을 배열에 추가합니다.

배열의 배열을 평면화하기

리듀스 메소드는 아래와 같이 배열 배열을 단일 배열로 평면화할 수 있습니다.

const nestedArrays = [[1, 2], [3, 4], [5, 6]];

const flatArray = nestedArrays.reduce((acc, curr) => acc.concat(curr), []);
console.log(flatArray); // Output: [1, 2, 3, 4, 5, 6]

여기서, 감소는 각 중첩 배열(curr)을 누산기(acc)에 연결하며, 이는 빈 배열로 시작됩니다.

어레이에서 중복 제거

축소 메소드를 사용하여 배열에서 중복 항목을 제거할 수도 있습니다.

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

const uniqueNumbers = numbers.reduce((acc, curr) => {
  if (!acc.includes(curr)) {
    acc.push(curr);
  }
  return acc;
}, []);

console.log(uniqueNumbers); // Output: [1, 2, 3, 4, 5]

JavaScript 맵, 필터, 찾기를 Reduce로 대체

리듀스 방법은 놀라울 정도로 다재다능하며 맵, 필터, 찾기와 같은 다른 배열 방법의 기능을 복제할 수 있습니다. 항상 가장 성능이 좋은 옵션은 아닐 수 있지만 이러한 시나리오에서 Reduce를 사용할 수 있는 방법을 이해하는 것은 유용합니다. 다음은 이러한 방법을 축소로 대체하는 방법을 보여주는 예입니다.

축소를 사용하여 맵 교체

map 메소드는 원본 배열의 각 요소에 함수를 적용하여 새 배열을 만듭니다. 이는 축소로 복제할 수 있습니다.

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

const doubled = numbers.reduce((acc, curr) => {
  acc.push(curr * 2);
  return acc;
}, []);

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

이 예에서는 각 숫자에 대한 반복을 줄이고 두 배로 늘린 다음 결과를 누산기 배열(acc)에 푸시합니다.

감소를 사용하여 필터 교체

필터 메소드는 제공된 함수에 의해 구현된 테스트를 통과하는 요소로 새 배열을 생성합니다. 이는 감소를 통해서도 달성할 수 있습니다.

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

const evens = numbers.reduce((acc, curr) => {
  if (curr % 2 === 0) {
    acc.push(curr);
  }
  return acc;
}, []);

console.log(evens); // Output: [2, 4, 6]

여기서 현재 숫자(curr)가 짝수인지 확인을 줄입니다. 그렇다면 해당 숫자가 누산기 배열(acc)에 추가됩니다.

축소를 사용하여 찾기 바꾸기

find 메소드는 제공된 테스트 기능을 충족하는 배열의 첫 번째 요소를 반환합니다. 이 목적으로 Reduce를 사용할 수도 있습니다. 이는 배열에서 첫 번째 짝수를 찾을 때 유용할 수 있습니다.

const numbers = [1, 3, 5, 6, 7, 8];

const firstEven = numbers.reduce((acc, curr) => {
  if (acc !== undefined) return acc;
  return curr % 2 === 0 ? curr : undefined;
}, undefined);

console.log(firstEven); // Output: 6

결론

JavaScript의 축소 메소드는 맵, 필터 및 찾기 기능을 능가하여 광범위한 데이터 조작 작업을 처리할 수 있는 다용도 도구입니다. 간단한 작업에 항상 가장 효율적인 것은 아니지만, Reduce를 마스터하면 코드를 최적화하고 단순화할 수 있는 새로운 가능성이 열립니다. Reduce를 이해하고 효과적으로 사용하면 복잡한 데이터 변환을 관리하는 능력이 크게 향상되어 JavaScript 툴킷의 중요한 부분이 됩니다.