감소의 힘

Reduce는 모든 초보 프로그래머가 . 간단히 말해서 reduce는 배열을 반복하고 단일 값을 반환합니다. 그 단일 값은 원시적이든 복합적이든 모든 데이터 유형이 될 수 있습니다. reduce는 입력 컬렉션을 반복하면서 모든 값에 대해 콜백 함수를 호출하고 모든 패스에서 반환 값을 업데이트합니다. 반환되는 값은 문자열, 숫자, 배열 또는 객체일 수 있습니다. Reduce는 무한한 방법으로 사용할 수 있는 귀중한 도구입니다. 사용 방법에 대한 몇 가지 간단한 예를 보여 드리겠습니다. 먼저 간단한 데이터 유형인 숫자를 반환하는 데 사용하는 예입니다. 여기서는 숫자에 있는 모든 요소의 합계입니다.

var numbers = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];

var reduced = function(array){
  return array.reduce(function(accumulator, element){
return accumulator += index; 
}); 
};
reduced(numbers);  //returns 55

위의 콜백 함수는 숫자 배열의 모든 요소에 대해 함수를 호출하고 누산기의 값을 업데이트하고 반복이 완료되면 최종 값을 반환합니다. 위에서 반환 값은 컬렉션의 각 요소와 동일한 유형의 데이터이지만 reduce는 복잡한 데이터도 반환할 수 있습니다. 예를 들어 사용자 배열이 있고 30세 미만의 사용자 개체 배열만 반환하려고 합니다.

var users = [{name:'john', age: 27, accountNumber: 383838}, 
             {name: 'jane', age: 26, accountNumber: 388728}, 
             {name: 'bob', age: 33, accountNumber: 399384}];

var reducedArray = function(array){
  return array.reduce(function(accumulator, object){
    if(object.age < 30){
      accumulator.push(object);
    }
    return accumulator;
  }, [])
};
(reducedArray(users)); 

위의 함수는 동일한 방식으로 작동하며 모든 호출에서 반환 값을 반복 및 업데이트하고 객체가 2개뿐인 단순화된 배열을 반환합니다. 여기서 콜백 함수는 (함수 본체 다음에) 하나 이상의 인수를 취하며, 빈 배열은 시드라고 하는 누산기의 초기 값입니다. 이것은 선택 사항입니다(첫 번째 예에는 하나가 없었음을 기억하십시오). 하나가 제공되지 않으면 입력 배열의 첫 번째 요소가 누산기의 초기 값이 되고 반복은 인덱스 1에서 시작됩니다.

처음부터 생성된 함수를 살펴보면 함수가 사용될 때마다 백그라운드에서 어떤 일이 일어나는지 볼 수 있습니다.

function reduceFromScratch(array, iterator, seed){
  let accumulator = seed;
  let i = 0;

  if(accumulator === undefined){
    accumulator = array[0];
    i = 1;
  }
    for(; i < array.length; i++){
      let elem = array[i];
      accumulator = iterator(accumulator, elem, array, seed);  
      }
      return accumulator;
}

먼저 함수는 시작 값이 전달되었는지 확인하고 전달된 경우 누산기에 할당합니다. 시드가 제공되지 않은 경우 첫 번째 요소를 시작 값으로 만들고 루프가 첫 번째 요소 대신 두 번째 요소에서 시작하도록 지시합니다. 그런 다음 모든 요소에서 반복자 함수를 호출하고 콜백 방향에 따라 누산기를 업데이트합니다.

JSON 파일과 같은 대규모 중첩 데이터 컬렉션으로 작업할 때 반복적으로 사용되는 자바스크립트의 기본 배열 메서드는 거의 없습니다. 맵 및 필터 방법은 매우 중요하며 컬렉션에서 정확한 데이터 조각을 추출하기 위해 함께 연결될 수 있지만 종종 reduce는 더 적은 코드로 동일한 결과를 달성하기 위해 단독으로 사용될 수 있습니다.

30세 미만의 사용자를 위한 객체를 반환한 위의 두 번째 예를 다시 살펴보세요. 계정 번호만 필요한 경우 filter 및 map이 작업을 처리할 수 있지만 reduce는 자체적으로 처리할 수 있습니다.

var users = [{ name:'john', age: 27, accountNumber: 383838}, 
             {name: 'jane', age: 26, accountNumber: 388728}, 
             {name: 'bob', age: 33, accountNumber: 399384}];

var reducedArray = function(array){
  return array.reduce(function(accumulator, object){
    if(object.age < 30){
      accumulator.push(object.accountNumber);
    }
    return accumulator;
  }, [])
};
console.log(reducedArray(users));

이 기본적인 예는 reduce의 다양성을 보여주지만 reduce가 달성할 수 있는 가능성에는 제한이 없습니다. 소매 회사가 사용자 데이터베이스에서 축소를 사용하여 데이터를 기반으로 고객을 정확하게 타겟팅하는 방법을 상상하는 것은 어렵지 않습니다. 특정 제품을 구매한 모든 사람에게 이메일을 보내야 하는 경우를 예로 들어 보겠습니다. Reduce는 제품이 구매 배열에 있으면 주소를 반환합니다. 평균 잔액을 나타내는 단순한 숫자나 중첩된 객체처럼 복잡한 것을 반환할 수 있으며 가능성은 무한합니다.

결론적으로, 이러한 매우 간단한 예제는 reduce의 작은 샘플만 가능합니다. reduce를 사용하는 방법을 아는 것은 훌륭한 자산이며 코드를 훨씬 더 효율적이고 간결하게 만들어 디버깅을 더 쉽게 만들고 반복을 줄입니다. 이는 우리 모두가 노력해야 하는 것입니다.