reduce()

내일배움캠프 LGLG!

7주차(주특기 심화 - React)

reduce

• 함수를 실행하고 하나의 결과값을 반환
• reduce는 ‘줄이다’라는 뜻이며, ‘누산기’라고 이해하면 된다.

단순화된 형태

두 개의 인자를 갖는다

acc accumulator : 누산기, 누적되는 값, 최종적으로 출력되는 값
cur current : 현재 돌고 있는 요소

const numbers = [4, 3, 2, 1];
let sum = numbers.reduce((acc, cur) => acc + cur)

위를 풀어서보면 아래와 같다.

const numbers = [4, 3, 2, 1];
let sum = numbers.reduce((acc, cur) => {
  return acc + cur
});

더 풀어서보면 다음과 같다.

acc 에는 가장 첫 번째 원소인 ‘4’를 할당하고 (index 0) cur 에는 나머지 원소인 ‘3, 2, 1’이 순차적으로 들어간다. (index 1, 2 …)

acc += cur; // 4 += 3;
acc += cur; // 7 += 2;
acc += cur; // 9 += 1;
console.log(acc); // 10

옵션이 추가된 발전된 형태

2개의 인자 + 1개의 초기값

acc accumulator : 누산기, 누적되는 값, 최종적으로 출력되는 값
cur current : 현재 돌고 있는 요소
initialValue : acc의 초기값 (optional)

const numbers = [4, 3, 2, 1];
let sum = numbers.reduce((accumulator, current) => accmulator + current, 0);
console.log(sum);

acc의 초가값으로 initialValue를 할당하는 순간 cur는 index 1부터가 아니라 0부터 돌아간다.

같은 배열이지만 index 0의 주인이 달라진다.

acc += cur; // 0 += 4;
acc += cur; // 4 += 3;
acc += cur; // 7 += 2;
acc += cur; // 9 += 1;
console.log(acc); // 10

두 개의 인자를 추가

4개의 인자 +1개의 초기값

acc accumulator : 누산기, 누적되는 값, 최종적으로 출력되는 값
cur current : 현재 돌고 있는 요소
idx index : 배열 요소의 순서 (optional)
arr array (또는 src source) : 현재 배열, 원본 배열 (optional)
initialValue : acc의 초기값 (optional)

다음은 평균을 구하는 reduce 함수이다.

마지막에만 나누기를 위해서 index와 arr를 불러왔다.

헷갈려보이지만 주석에 표시된 순서대로 돌면 된다.

const avg = numbers.reduce((acc, cur, index, arr) => {
	if (index === arr.length - 1) { // index가 마지막일 때
		return (acc + cur) / arr.length; // cur - 4
	}
	return acc + cur; // cur - 1, 2, 3
	}, 0);
ㅤ
console.log("avg", avg);

응용편

각 알파벳의 개수를 구하는 reduce 함수

const alphabets = ["a", "a", "c", "c", "c"];
 ㅤ
const cnt = alphabets.reduce((acc, cur) => {
 if (acc[cur]) {
   acc[cur] += 1;
 } else {
   acc[cur] = 1; // acc.cur이 없으면 선언함
 }
 return acc;
}, {}); // acc는 오브젝트로 선언
 ㅤ
console.log(cnt); // {a: 2, c: 3}

1) 초기값으로 갑자기 빈 오브젝트를 할당하고 2) 오브젝트인데 배열처럼 불러오지 않나 3) if 구문은 어떻게 되는 것인지…

우선, 오브젝트의 프로퍼티(속성)를 불러오는 법을 알아야 한다.
obj["a"]과 obj.a은 동일하다.

// 오브젝트의 프로퍼티를 부르는 2가지 방법
const obj = { a: "hey", b: 0, c: 0 };
console.log(obj["a"]); // 'hey"
console.log(obj.a); // "hey"

if 구문 if (acc[cur])을 이해하려면 오브젝트의 프로퍼티 선언 방법을 봐야 한다.
acc[cur] 이 undefined 인지 아닌지가 중요하다.
처음에는 당연히 빈 오브젝트가 초기값이다보니 undefined 가 된다.
그러면 else 구문에서 처음으로 프로퍼티가 선언되는 것이다.

//  프로퍼티 없을 경우
console.log(obj.j); // undefined
console.log(obj["k"]); // undefined
 ㅤ
//  프로퍼티 선언
obj.j = 1; // 선언
console.log(obj.j); // 1
 ㅤ
obj["k"] = 2; // 선언
console.log(obj["k"]); // 2

문제 풀이

배운 내용(배열 내장함수)을 바탕으로 3가지 방법으로 풀어보기

function countBiggerThanTen(numbers) {
 /** 문제 **/
}
  ㅤ
const count = countBiggerThanTen([1, 2, 3, 5, 10, 20, 30, 40, 50, 60]);
console.log(count); // 5

1) 첫 번째 풀이법

function countBiggerThanTen(numbers) {
 return numbers.reduce((acc, cur) => {
   if (cur > 10) {
     return acc + 1;
   } else {
     return acc;
   }
 }, 0);
}

2) 두 번째 풀이법

function countBiggerThanTen(numbers) {
 return numbers.filter((el) => el > 10).length;
}

3) 세 번째 풀이법

function countBiggerThanTen(numbers) {
 let cnt = 0;
 numbers.forEach((element) => {
   if (element > 10) cnt++;
 });
 return cnt;
}