[JS] Javascript의 배열 변형 메서드 (forEach, map, filter, reduce)

forEach

자바스크립트의 forEach메서드는 배열을 순회하는 여러 방법 중 하나이다. 모든 요소를 순회하면서, 각각의 요소에 특정 동작을 수행시키는 메서드이다.

특징

• 배열 안의 아이템 각각에 대해 함수의 코드를 한 번씩 실행한다.
• for...of가 나온 이후로는 잘 사용되지 않는다.
• 예외를 발생시키는 것 외에는 forEach() 루프를 중지하거나 중단할 수 있는 방법이 없다.

구문

forEach(callbackFn)

forEach는 매개변수로 콜백함수를 전달한다. 이 때 콜백 함수는 배열의 각 요소에 대해 실행된다.

콜백 함수

배열.forEach((currentValue, index, array)=>{
});

콜백 함수의 매개변수로는 세 개가 들어갈 수 있다.

• Current Value (명명된 매개변수): 배열에서 처리할 현재 요소
• Index (선택적 매개변수): 처리할 현재 요소의 인덱스
• Array (선택적 매개변수): forEach 메서드를 호출한 배열

예제

const numbers = [1, 2, 3];

numbers.forEach((item, idx, arr) => {
  console.log({item, idx, arr});
  numCallbackRuns++;
});

// { item: 1, idx: 0, arr: [1, 2, 3] }
// { item: 2, idx: 1, arr: [1, 2, 3] }
// { item: 3, idx: 2, arr: [1, 2, 3] }

item과 idx는 다음 요소의 값과 인덱스로 변하고, arr의 경우 항상 똑같다.

---

Map

자바스크립트의 map메서드는 호출한 배열의 모든 요소에 주어진 함수를 호출한 결과로 채운 새로운 배열을 생성한다.

구문

배열.map(callbackFn);

콜백 함수

배열.map((currentValue, index, array)=>{
});

콜백 함수의 매개변수로는 세 개가 들어갈 수 있다.

• Current Value (명명된 매개변수): 배열에서 처리할 현재 요소
• Index (선택적 매개변수): 처리할 현재 요소의 인덱스
• Array (선택적 매개변수): forEach 메서드를 호출한 배열

반환값

배열의 각 요소에 대해 실행한 callback의 결과, 즉 콜백함수의 리턴값을 모은 새로운 배열을 반환한다.

예제

const array1 = [1, 4, 9, 16];

const map1 = array1.map((x) => x * 2);

console.log(map1);
// Array [2, 8, 18, 32]

---

Filter

filter 함수는 배열의 요소를 순회하면서 콜백 함수를 사용하여 원하는 조건에 따라 필터링하는 함수이다.

구문

filter(callbackFn)

콜백 함수

배열.filter((currentValue, index, array)=>{
  return true/false
});

콜백 함수의 매개변수로는 세 개가 들어갈 수 있다. 콜백 함수의 리턴값이 true이면 요소를 반환할 배열에 추가하고, false이면 추가하지 않는다.

• Current Value (명명된 매개변수): 배열에서 처리 중인 현재 요소
• Index (선택적 매개변수): 처리 중인 현재 요소의 인덱스
• Array (선택적 매개변수): filter 메서드를 호출한 배열

반환 값

필터링된 배열을 반환한다. 이 때 반환하는 배열은 얕은 복사본 배열이다. 필터링된 요소가 없으면 빈 배열을 반환한다.

예제

const score = [10, 35, 43, 75, 88, 90, 92, 95];

// 85점이 넘는 점수만 필터링하기
const goodScore = score.filter(item => (item > 85));

---

reduce

reduce는 단어의 뜻 '줄이다' 에 맞게 배열을 가져다가 점차 줄여가며 마지막에는 하나의 값만 남겨 반환하는 함수이다.
연삽 뿐 아니라 비교에도 사용될 수 있다.

구문

배열.reduce(callbackFunc[,initialValue]);

• callbackFunc: 배열의 각 요소에 대해 실행할 함수인 리듀서 함수를 첫 번째 매개변수로 받는다.
• initialValue: 처음 콜백함수를 호출할 때 첫 번째 인수인 accumulator에 제공하는 값이다. 초기값을 설정하지 않으면 배열의 첫 번째 요소로 초기화된다.

콜백 함수

배열.reduce((accumulator,currentValue, index, array)=>{
    return newAccumulator;
});

reduce()는 빈 요소를 제외하고 배열 내에 존재하는 각 요소에 대해 callback 함수를 한 번씩 실행하는데, 콜백 함수는 다음 네 개의 인수를 받는다

• accumulator: 콜백 함수의 반환값을 누적한다.
• currentValue: 처리 중인 현재 요소이다.
• currentIndex: 처리하고 있는 현재 요소의 인덱스이다.initialValue를 제공한 경우 0, 아니면 1부터 시작한다.
• array: reduce()를 호출한 배열이다.

예제

//initialVaule 값을 안 준 경우
[1,2,3,4].reduce((acc, cur, idx, arr)=>{
  return acc + cur;
});
/*
  순회 과정
  acc = 1, cur = 2 → 1 + 2 = 3
  acc = 3, cur = 3 → 3 + 3 = 6
  acc = 6, cur = 4 → 6 + 4 = 10
*/

//initialVaule 값을 준 경우
[1,2,3,4].reduce((acc, cur, idx, arr)=>{
  return acc + cur;
}, 100); // 10
/*
  순회 과정
  acc = 100, cur = 1 → 100 + 1 = 101
  acc = 101, cur = 2 → 101 + 2 = 103
  acc = 103, cur = 3 → 103 + 3 = 106
  acc = 106, cur = 4 → 106 + 4 = 110
*/