프로그래머스 배열의 평균값 자바스크립트 | Array.prototype.reduce()로 배열 값 더하기

Chaeyeon Lee·2023년 5월 19일
0

🔅 1. 아이디어

처음에는 익숙한 대로 for문을 이용하려고 했는데, 모던자바스크립트 딥다이브를 1회독 한 사람으로써 익숙한 것만 하지 말아야겠다는 심정으로 reduce()라는 것을 어영부영 사용해 보았다.

🧑‍💻 2. 내 코드

function solution(numbers) {
    let sum=numbers.reduce((acc, cur)=>acc+cur);
    return sum/numbers.length;
}

🐣 3. 개념

📌 Array.prototype.reduce()

위 메서드는 '배열'의 각 요소에 대해 주어진 reducer함수를 실행하고, '하나의 결과값'을 반환한다.
reduce()는 네 개의 인자를 갖는다.

1) 누산기 accumulator :

reduce()의 반환값은 acc에 할당된다.

2) 현재의 값 currentValue

3) 현재 인덱스 currentIndex(option) :

initialValue를 설정한 경우 0, 아니면 1부터 시작한다.

4) 원본 배열 array(option) :

reduce()를 호출한 배열

5) initialValue(option) :

콜백 최초 호출에서 첫 번째 인수에 제공하는 값이다. 초기값을 설정하지 않으면 배열의 첫 번째 요소가 초기값이 된다. 빈 배열에서 초기값이 없으면 오류(TypeError)가 발생.

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

// array1의 합을 구해보자
const init = 0; //초기값은 선택이다
const sumWithInitial = array1.reduce((acc, cur) => accumulator + currentValue, init);
//0+1+2+3+4
console.log(sumWithInitial); 
// Expected output: 10

init 을 설정한 경우: 최초의 acc은 init의 값과 같다. cur은 배열의 첫 번째 값이 된다. idx는 0부터 시작한다.
init을 설정하지 않은 경우: acc은 배열의 첫 번째 값과 같다. cur은 두 번째 값이 된다. idx는 1부터 시작한다.
보통은 init을 설정해 주는 게 좋다고 한다.

ex)

[0, 1, 2, 3, 4].reduce(function(accumulator, currentValue, currentIndex, array) {
  return accumulator + currentValue;
});
callbackaccumulatorcurrentValuecurrentIndexarray
1번째 호출011[0, 1, 2, 3, 4]
2번째 호출122[0, 1, 2, 3, 4]
3번째 호출333[0, 1, 2, 3, 4]
4번째 호출644[0, 1, 2, 3, 4]

위 예제는 init을 설정하지 않았기 때문에 currentIndex가 1부터 시작하는 것을 볼 수 있다. 각 호출마다 콜백함수(위 예제에선 acc요소와 cur요소를 더하기)가 실행되고, 총 4번 콜백함수가 호출된다.

객체 배열에서도 합할 수 있다!

var init = 0; //객체배열의 합산에서는 반드시 초기값을 주어야 한다. 
var sum = [{x: 1}, {x:2}, {x:3}].reduce((acc, cur) => acc + cur.x, init);

console.log(sum) // logs 6

단순한 더하기 연산 말고도, reduce로 많은 것들을 하던데, 그건 다른 문제를 기록하면서 차차 추가하도록 한다.

reduce()로 각 배열 요소 두 배로 만들기

https://blog.naver.com/lcyeon46/223087066916

reduce()로 배열 원소의 길이 구하기

https://blog.naver.com/lcyeon46/223087120945

reduce()로 문자 반복 출력하기

https://blog.naver.com/lcyeon46/223087751613

reduce()로 조건식 만들기: 369 게임

https://blog.naver.com/lcyeon46/223087959647


출처
https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Array/reduce

profile
프론트엔드 개발자 지망생

0개의 댓글