관리 메뉴

Bbaktaeho

[Javascript/Array] reduce, reduceRight (자바스크립트, 배열 반복, 배열의 합, 누산기, accumulator) 본문

프로그래밍 (Programming)/자바스크립트 (JavaScript)

[Javascript/Array] reduce, reduceRight (자바스크립트, 배열 반복, 배열의 합, 누산기, accumulator)

Bbaktaeho 2020. 3. 29. 14:35
반응형

📚 reduce, reduceRight

  • 자바스크립트 Array.prototype
  • 자바스크립트 배열을 반복해서 콜백 함수를 실행 후 하나의 결과 값을 반환
  • reduce 는 왼쪽 원소부터 콜백 함수를 실행
  • reduceRight 는 오른쪽 원소부터 콜백 함수를 실행

📗 reduce

배열의 왼쪽부터 콜백 함수를 실행 후 누산함

  • 배열.reduce( 콜백함수(acc, cur, index, arr){} )

  • 콜백함수의 인자로 누산기, 현재 원소, 현재 인덱스, 원본 배열을 가짐

  • 배열의 모든 합 구하기

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

var result = arr.reduce((acc, element, i, array) => {
  return acc + element;
});

console.log(result);
  45
  • 배열의 모든 합 구하기 분석
    배열의 첫 원소는 누산기로 누적되고 시작한다.
var arr = [1, 2, 3, 4, 5, 6, 7, 8, 9];

var result = arr.reduce((acc, element, i, array) => {
  console.log(
    `인덱스:${i}, 누산기:${acc}, 현재원소:${element} | 원본 배열:${array}`
  );
  return acc + element;
});

console.log(result);
  인덱스:1, 누산기:1, 현재원소:2 | 원본 배열:1,2,3,4,5,6,7,8,9
  인덱스:2, 누산기:3, 현재원소:3 | 원본 배열:1,2,3,4,5,6,7,8,9
  인덱스:3, 누산기:6, 현재원소:4 | 원본 배열:1,2,3,4,5,6,7,8,9
  인덱스:4, 누산기:10, 현재원소:5 | 원본 배열:1,2,3,4,5,6,7,8,9
  인덱스:5, 누산기:15, 현재원소:6 | 원본 배열:1,2,3,4,5,6,7,8,9
  인덱스:6, 누산기:21, 현재원소:7 | 원본 배열:1,2,3,4,5,6,7,8,9
  인덱스:7, 누산기:28, 현재원소:8 | 원본 배열:1,2,3,4,5,6,7,8,9
  인덱스:8, 누산기:36, 현재원소:9 | 원본 배열:1,2,3,4,5,6,7,8,9
  45
  • 문자열 배열 더하기
    문자열로 이루어진 배열을 더해서 새로운 문자열을 반환한다.
var arr = ["경기도 ", "안양시 ", "만안구 "];

var result = arr.reduce((acc, element) => acc + element);

console.log(result);
console.log(typeof result);
  경기도 안양시 만안구
  string

📒 reduceRight

배열의 오른쪽부터 콜백 함수를 실행 후 누산함

  • 배열.reduceRight( 콜백함수(acc, cur, index, arr){} )

  • 콜백함수의 인자로 누산기, 현재 원소, 현재 인덱스, 원본 배열을 가짐

  • 문자열 배열 더하기
    reduce 와 다르게 오른쪽부터 누산 한다.

var arr = ["경기도 ", "안양시 ", "만안구 "];

var result = arr.reduceRight((acc, element) => acc + element);

console.log(result);
console.log(typeof result);
  만안구 안양시 경기도
  string
  • 문자열 배열 더하기 분석
var arr = ["경기도 ", "안양시 ", "만안구 "];

var result = arr.reduceRight((acc, element, i, array) => {
  console.log(
    `인덱스:${i}, 누산기:${acc}, 현재원소:${element} | 원본 배열:${array}`
  );
  return acc + element;
});

console.log(result);
  인덱스:1, 누산기:만안구 , 현재원소:안양시 | 원본 배열:경기도 ,안양시 ,만안구
  인덱스:0, 누산기:만안구 안양시 , 현재원소:경기도 | 원본 배열:경기도 ,안양시 ,만안구
  만안구 안양시 경기도

반응형