배열을 순차적으로 순회하고 싶을 때 우리는 기본적으로 for문을 사용합니다. 단순한 구조에서는 for문을 사용해도 문제가 없지만 복잡한 것을 구현할때에 for문만 이용하면 이중 for문이 되어 무한 로딩에 걸릴 수 있습니다. 이번 포스팅에서는 for문 대신 더 간단하며 배열을 순회할 때 자바스크립트에서 자주 쓰이는 함수인 map, filter, reduce 함수에 대해서 알아보도록 하겠습니다.

✔️ map

• 배열에 사용됩니다.
• 결과를 모아서 새로운 배열을 반환합니다.

let arrOne = [32, 45, 63, 36, 24, 11];
const multFive = (num) => {
return num * 5;
}
let arrTwo = arrOne.map(multFive);
console.log(arrTwo);

여기서 중요한 점은 map()을 사용하면 배열에서 계산된 값으로 새로운 배열을 반환할 수 있다는 점 입니다.

✔️ filter

• 새 배열을 만듭니다.
• 대신 제공된 조건에 따라 필터링을 하면서 새 배열을 만듭니다.

let arrNum = [15, 39, 20, 32, 30, 45, 22];
function divByFive(num) {
  return num % 3 == 0;
}
let arrNewNum = arrNum.filter(divByFive);
console.log(arrNewNum);

✔️ reduce

• 배열의 모든 요소의 합을 구할 수 있습니다.

let arrNum = [15, 39, 20, 32, 30, 45, 22];
function sumOfEle(num, ind) {
  return num + ind;
}
let arrNum2 = arrNum.reduce(sumOfEle);
console.log(arrNum2);

물론 for문이나 forEach 매서드를 사용해서 구할 수도 있지만 합을 구할때에는 주로 reduce를 사용합니다.

const total = [1, 2, 3, 4, 5].reduce(function (previous, current) {
    return previous + current;
}, 0);
console.log(total); // 15

앞서 소개해드렸던 map과 filter와 달리 reduce매서드는 내부에서 작동합니다. reduce() 메서드는 배열을 반복하고, 콜백 함수를 각 요소에 대해 한 번씩 호출합니다. 첫 번째 반복의 경우 초기값이 사용되며, 다음 반복의 경우 콜백 함수의 반환값이 사용됩니다. 위 코드에서 0은 초기값입니다.

간략하게 map, filter, reduce에 대해서 소개해 봤습니다.
이것으로 이번 포스팅은 마치겠습니다.