[드림코딩] 유용한 배열(array) api (3) : reduce, reduceRight, sort, api 다중으로 쓰기

class Coder {
  constructor(name, age, enrolled, score) {
    this.name = name;
    this.age = age;
    this.enrolled = enrolled;
    this.score = score;
  }
}
const coders = [
  new Coder('A', 29, true, 45),
  new Coder('B', 28, false, 80),
  new Coder('C', 30, true, 90),
  new Coder('D', 40, false, 66),
  new Coder('E', 18, true, 88),
]

---

reduce

배열의 각 데이터에 주어진 리듀서(reducer)함수를 실행하고, 하나의 결과값을 반환한다.

리듀서 콜백함수는 네 개의 인자를 가진다.

1. 누산기(acc, accumulator)
2. 현재값(cur, currentValue)
3. 현재 인덱스(idx, currentIndex)
4. 원본 배열(src)

const result = coders.reduce((prev,curr) => {
  console.log('----------');
  console.log(prev);
  console.log(curr);
  return curr;
})

//아래가 나온다.
"----------"
// [object Object] 
{
  "name": "A",
  "age": 29,
  "enrolled": true,
  "score": 45
}
// [object Object] 
{
  "name": "B",
  "age": 28,
  "enrolled": false,
  "score": 80
}
"----------"
// [object Object] 
{
  "name": "B",
  "age": 28,
  "enrolled": false,
  "score": 80
}
// [object Object] 
{
  "name": "C",
  "age": 30,
  "enrolled": true,
  "score": 90
}
"----------"
.
.
.

이처럼 마지막에 return된 값이 prev에 할당된다.

initialValue를 제공하지 않으면, reduce()는 인덱스 1부터 시작해 콜백 함수를 실행하고 첫 번째 인덱스는 건너 뛴다. initialValue를 제공하면 인덱스 0에서 시작한다.

const result = coders.reduce((prev,curr) => {
  console.log('----------');
  console.log(prev);
  console.log(curr);
  return curr;
}, 0); //0으로 initialvalue를 제공했다.

"----------"
0
// [object Object] 
{
  "name": "A",
  "age": 29,
  "enrolled": true,
  "score": 45
}
"----------"
// [object Object] 
{
  "name": "A",
  "age": 29,
  "enrolled": true,
  "score": 45
}
// [object Object] 
{
  "name": "B",
  "age": 28,
  "enrolled": false,
  "score": 80
}
"----------"
.
.
.

0부터 모든 score들을 더해보자.

const result = coders.reduce((prev,curr) => {
  console.log('----------');
  console.log(prev);
  console.log(curr);
  return prev + curr.score;
}, 0);
console.log(result);

"----------"
0
// [object Object] 
{
  "name": "A",
  "age": 29,
  "enrolled": true,
  "score": 45
}
"----------"
45
// [object Object] 
{
  "name": "B",
  "age": 28,
  "enrolled": false,
  "score": 80
}
.
.
.
281
// [object Object] 
{
  "name": "E",
  "age": 18,
  "enrolled": true,
  "score": 88
}
369

위의 함수를 마지막 결과값만 나오도록 간단하게 바꿔보자.

전

const result = coders.reduce((prev,curr) => {
  console.log('----------');
  console.log(prev);
  console.log(curr);
  return prev + curr.score;
}, 0);
console.log(result);

후

const result = coders.reduce((prev,curr) => prev + curr.score, 0);
console.log(result);

위의 함수를 평균값을 구하도록 바꿔보자.

const result = coders.reduce((prev,curr) => prev + curr.score, 0);
console.log(result / students.length);

---

reduceRight

reduce를 거꾸로 (제일 뒤에서부터) 시작한다.

---

Sort

마이너스 값을 리턴하게 되면 첫번째가 두번째보다 작다고 간주되어 정렬한다.

const result = coders
  .map((coder) => coder.score)
  .sort((a, b) => a - b)
  .join();
console.log(result);

//"45,66,80,88,90"

* 이처럼 compareFunction을 사용하지 않으면 그냥 문자열로 받아들여 유니코드순으로 정렬한다.
** 반대로 b-a로 쓰면 숫자 역순 정렬이 된다.

---

api 다중으로 쓰기

함수형 프로그래밍이라고도 한다. 아래처럼 api를 다중으로 쓸 수 있다.

const result = coders
  .map((coder) => coder.score) //score만 모아 새로운 배열 만들기
  .filter((score) => score >= 50) //50보다 큰 score만 솎아내기
  .join(); //배열을 string으로 변환하기
console.log(result);

//"80,90,66,88"

---

출처 : 드림코딩 https://www.youtube.com/@dream-coding / MDN https://developer.mozilla.org/ko