[JS] map과 reduce 메소드의 사용

항상 for문을 통해 코드를 짜고나서 다른 사람들이 짠 코드들을 보면 map이나 reduce를 통해 간결하게 코드를 작성된것을 보고 더 알아보고 정리해보고 싶어 작성하게 되었다 !

map()

map() 메소드는 JavaScript 배열의 각 요소에 대해 주어진 함수를 호출하여 새로운 배열을 생성합니다. map() 메소드는 원본 배열을 변경하지 않고 새로운 배열을 반환하기 때문에 함수형 프로그래밍에서 유용하게 사용된다 !

사용 방법

arr.map(callback(element, index, array), thisArg)

arr : map() 메소드를 호출하는 배열.

callback : 각 요소에 대해 실행할 콜백 함수.

element : 현재 처리 중인 요소.

index (optional) : 현재 처리 중인 요소의 인덱스.

array (optional) : map() 메소드가 호출되는 배열.

thisArg (optional) : callback 함수 내에서 this로 사용할 값.
.

map() 메소드는 주어진 배열을 순회하면서 각 요소를 처리하고, 콜백 함수의 반환 값을 새로운 배열에 저장합니다. 이렇게 새로운 배열이 생성되고 반환된다 !

예제 1 : 각 단어의 길이를 계산하여 새로운 배열 생성하기

const words = ["apple", "banana", "cherry", "dragonfruit", "elderberry"];
// 각 단어의 길이를 계산하여 새로운 배열 생성하기
const wordLengths = words.map(function(word) {
  return word.length;
});
console.log(wordLengths); // [5, 6, 6, 11, 9]

예제 2 : 각 숫자의 제곱을 계산하여 새로운 배열 생성하기

const numbers = [1, 2, 3, 4, 5];
// 각 숫자의 제곱을 계산하여 새로운 배열 생성
const squaredNumbers = numbers.map(function(number) {
  return number * number;
});
console.log(squaredNumbers); // [1, 4, 9, 16, 25]

reduce()

reduce() 메소드는 JavaScript 배열의 각 요소를 순회하며 주어진 콜백 함수를 실행하여 하나의 결과 값을 반환합니다. reduce() 메소드는 배열의 요소를 하나씩 누적하여 결과 값을 도출하는 데 사용됩니다.

arr.reduce(callback(accumulator, currentValue, index, array), initialValue)

arr : reduce() 메소드를 호출하는 배열.

callback : 각 요소에 대해 실행할 콜백 함수.

accumulator : 콜백 함수의 반환 값을 누적할 변수이다.

currentValue : 현재 처리 중인 요소.

index (optional) : 현재 처리 중인 요소의 인덱스.

array (optional) : reduce() 메소드가 호출되는 배열.

initialValue (optional) : 누적 변수 accumulator의 초기값.

reduce() 메소드는 배열의 첫 번째 요소부터 마지막 요소까지 순회하며 콜백 함수를 실행한다. 콜백 함수의 반환 값은 다음 순회 때 사용되는 accumulator 값이 된다. 최종적으로 마지막 요소를 처리한 후 콜백 함수의 반환 값이 reduce() 메소드의 최종 결과 값이 된다.

예제 1 : 모든 학생들의 점수 평균 계산하기

const students = [
  { name: "Alice", score: 85 },
  { name: "Bob", score: 70 },
  { name: "Charlie", score: 90 },
  { name: "Dave", score: 65 },
  { name: "Eve", score: 75 }
];
// 모든 학생들의 점수 평균 계산
const averageScore = students.map(function(student) {
  return student.score;
}).reduce(function(accumulator, currentValue) {
  return accumulator + currentValue;
}) / students.length;
console.log(averageScore); // 77

예제 2 : 배열의 모든 요소의 합 구하기

const numbers = [1, 2, 3, 4, 5];
// 배열의 모든 요소의 합 구하기
const sum = numbers.reduce(function(accumulator, currentValue) {
  return accumulator + currentValue;
}, 0);
console.log(sum); // 15

예제 3-1 : 배열에서 최댓값 찾기

const numbers = [17, 42, 8, 33, 19];
// 배열에서 최댓값 찾기
const maxNumber = numbers.reduce(function(accumulator, currentValue) {
  return Math.max(accumulator, currentValue);
});
console.log(maxNumber); // 42

예제 3-2 : 배열에서 최댓값 찾기 (for문을 이용한다면?)

const numbers = [17, 42, 8, 33, 19];
let maxNumber = numbers[0];
for (let i = 1; i < numbers.length; i++) {
  if (numbers[i] > maxNumber) {
    maxNumber = numbers[i];
  }
}
console.log(maxNumber); // 42

이처럼 가독성도 좋아지고 코드를 짤때도 더욱 간편해지는걸 확인할 수 있다 !

아직 미숙하더라도 앞으로 코드를 짤땐 메소드들을 복습할겸 잘 사용해봐야겠다 !