JS_배열의 반복 메서드

반복 메서드의 인수

대부분의 반복 메서드는 다음 인수 세 개가 전달된다.

1. value : 현재 처리하고 있는 요소
2. index : 현재 처리하고 있는 요소의 인덱스
3. arry : 메서드가 적용되는 배열

forEach

for문을 대체할 수 있는 고차함수다. 인수로 받은 콜백 함수를 배열을 순회하며 한 번씩 실행한다. 원본 배열은 변경하지 않으며, 반환값은 언제나 undefined이다.

const numbers = [1, 2, 3];
let sum = 0;
numbers.forEach((number) => sum += number );
console.log(sum); // 6 

map

마찬가지로 인수로 받은 콜백 함수를 순회하며 한 번씩 실행한다. 가장 크게 다른 점은 콜백 함수의 반환값들로 구성된 새로운 배열을 반환한다는 것이다. 배열의 각 요소를 콜백 함수를 통해 mapping하여 새로운 배열을 만들어내는 것이다.

const numbers = [1, 2, 3];
let sum = 0;
const result = numbers.map((number) => console.log(number += 1) );
console.log(result); // [2, 3, 4]

reduce

reduce 역시 순회하며 콜백 함수를 반복 호출한다. 이때, 요소 하나를 처리한 반환값을 다음 순회에서 입력값으로 사용한다. 반환값은 마지막 요소를 처리한 값이다.

첫 번째 인수로는 콜백 함수, 두 번째 인수로 초기값을 받는다.

콜백 함수는 이전 요소의 반환값(or 초기값), 현재 배열 요소의 값, 현재 배열 요소의 인덱스, 메서드를 적용 중인 배열 을 인수로 받는다.

const numbers = [1, 2, 3];
const result = numbers.reduce((prev, value, index)=> prev + value + index,0)
/*
0 + 1 + 0 = 1
1 + 2 + 1 = 4
4 + 3 + 2 = 9
*/
console.log(result) // 9