JavaScript에서 Map, Filter 및 Reduce를 결합한 기본 배열 작업

안녕하세요 여러분! 오늘 모든 일이 잘 되길 바랍니다. 요즘에는 함수형 프로그래밍 개념을 코드에 적용하지 않고 코딩하기가 어렵습니다. 코드를 더 읽기 쉽고 유지 관리 및 테스트할 수 있습니다.

현대 프로그래밍 세계에서 매우 일반적이고 대중적인 사고방식은 배열 처리 스타일로 프로그래밍하는 것입니다. 이것은 각 항목에 대한 일련의 작업을 처리할 기본 데이터 구조로 배열을 포함한다는 것을 의미합니다.

이는 HTML(JSX)과 함께 이 영역에 콘텐츠를 표시하기 위해 주어진 배열을 반복하기 위해 map() 메서드를 사용할 수 있는 React와 같은 구성 요소 부분을 채울 때 적용할 수 있는 유용한 컨텍스트입니다. filter() 메서드를 사용하여 지도에서 사용하기 전에 관련 없는 데이터를 제거하거나 단순히 숫자 배열 항목 값을 복제하거나 reduce 메서드로 모든 항목의 합계를 가져옵니다.

JavaScript에서 filter(), reduce() 및 map() 메서드를 사용하여 이러한 최신 for 루프 추상화로 솔루션을 찾을 수 있는 몇 가지 사례에 대한 몇 가지 예를 제공하겠습니다. 이 모든 작업은 일반 for 루프로 완벽하게 수행할 수 있지만 이번에는 JavaScript 코드에서 기능적 프로그래밍 사고 방식으로 손을 더럽힐 것입니다.

배열의 모든 항목을 추가하는 예부터 시작하겠습니다. 이를 위해 클래식 for 루프와 축소 방법을 사용합니다.

const arrNumbers = [1,2,3,4,5,6];

// With plain JavaScript
let total = 0;
for (let i = 0; i < arrNumbers.length; i += 1) {
total += arrNumbers[i];
}

console.log(`The sum of all items is: ${total}`) // should be 21

// Using the Reduce Method this goes like this:
const sumAllItems = arrNumbers.reduce((prev, curr) => prev + curr, 0);

console.log(`Reducing all items to a total of: ${sumAllItems}`) 
// this should also be 21

보시다시피, 두 경우 모두 누산기가 있고 주먹은 총계이고 sumAllItems 변수는 루프의 마지막 랩이 완료될 때까지 누적에 다음 항목 값을 계속 추가합니다. , 오른쪽?

좋습니다. 숫자 배열과 단일 숫자를 인수로 사용하는 함수를 빌드하라는 요청이 있는 경우... 그러면 이 단일 숫자가 배열의 각 요소와 합산됩니다. 루프 또는 단순히 맵 방법을 사용하여 이 작은 불량배에서 기능적 프로그래밍 방식으로 이동합니까? 글쎄, 계속해서 둘 다 해보자, 알았지?

// Plain JavaScript Code
function additionWithVanilla(arr, amount) {
  let addNumbers = [];
  for (let i = 0; i < arr.length; i++) {
    addNumbers.push(arr[i] + amount);
  }
  return addNumbers;
}

console.log(additionWithVanilla([1, 2, 3, 4, 5], 8));
// result [ 9, 10, 11, 12, 13 ]

// Same function using EcmaScript 6
const addition = (arr, amount = 0) => arr.map((el) => el + amount);

console.log(addition([1, 2, 3, 4, 5], 8));
// result [ 9, 10, 11, 12, 13 ]

글쎄, 그건 꽤 멋졌어, 어떤 사람들은 말할지도 모르지만, 총계에 홀수만 더하고 싶다면? 그렇다면 함수형 프로그래밍과 고전적인 구조적 프로그래밍의 두 가지 방식으로 해봅시다. 준비되셨나요?

먼저 for 루프를 사용하여 모든 홀수만 합산하는 조건을 사용합니다. 그런 다음 EcmaScript를 사용하여 필터 메서드를 결합하여 홀수 항목만 배열을 반환한 다음 reduce 메서드를 사용하여 이러한 항목을 전체 합계에 추가하여 나중에 인쇄합니다. 너무 많이? 예를 들면 다음과 같습니다.

const arrMixedNumbers = [1, 2, 3, 4, 5, 6];

// With plain JavaScript
let totalOddNumbers = 0;
for (let i = 0; i < arrMixedNumbers.length; i += 1) {
  if (arrMixedNumbers[i] % 2 == 0) {
    totalOddNumbers += arrMixedNumbers[i];
  }
}

console.log(`The sum of all odd numbers: ${totalOddNumbers}`);
// should be 12

// Using the Filter combined with Reduce Method to get the result:
const sumAllOddNumbs = arrMixedNumbers
  .filter((item) => item % 2 == 0)
  .reduce((total, currentValue) => total + currentValue, 0);

console.log(`Filtered Reduction of Odd numbers: ${sumAllOddNumbs}`);
// this should also be 21

보시다시피 이러한 기능적 프로그래밍 사고 방식을 결합하는 데 있어 하늘은 한계가 없습니다. 그러나 아직 믿지 않는 단계에 있다면 마지막 예를 추가하여 설득하겠습니다. :

유명한 FIFA 선수의 이름이 포함된 배열을 검색했고 그들의 이름이 어떻게든 다른 유형의 케이스에 있지만 모두 대문자로 전달하여 모두 멋지게 보이도록 하고 싶다고 가정해 보겠습니다. 어떻게 해야 할까요? 음, 여러분, 다음 방법을 사용하여 어떻게 했는지 말씀드리겠습니다.

const fifaPlayers = [
  "Cristiano Ronaldo",
  "Mohamed salah",
  "robert lewandowski",
  "Leonel MESSI",
  "LUKA Modric",
  "Antoine griezmann",
];
const namesInUppercaseArr = [];

for (let i = 0; i < fifaPlayers.length; i += 1) {
  namesInUppercaseArr.push(fifaPlayers[i].toUpperCase());
}

console.log(namesInUppercaseArr);

// Let's do the same exact thing but using the ES6 map method
console.log(fifaPlayers.map((player) => player.toUpperCase()));

요약:

음, 여러분, 그 목록은 계속해서 확장될 수 있지만 저는 이제 잠자리에 들 시간인 것 같습니다. 이러한 결과를 얻기 위해 이러한 방법을 사용하고 결합하는 방법에 대한 기본 예제를 즐기셨기를 바랍니다.

❤️ 이 글이 즐거우셨다면 글을 더 쓰게 되는 동기가 됩니다!
🦄 진정으로 이 기사가 당신에게 전적으로 도움이 되었다고 생각한다면!
🔖 나중에 이 기사를 다시 확인해야 하는 경우.
🤔 귀하의 의견을 남겨주세요, 귀하의 의견은 매우 중요합니다.