고차 함수 :보다 유지 보수가 쉬운 코드를 위해 필터, 맵 및 축소 사용

출처 : Unsplash

고차 함수는 코드를보다 선언적으로 만들어 JavaScript 게임을 강화하는 데 도움이 될 수 있습니다. 즉, 짧고 간단하며 읽을 수 있습니다.

이러한 기능을 언제 어떻게 사용하는지 아는 것이 중요합니다. 코드를 이해하고 유지하기 쉽게 만듭니다. 또한 기능을 서로 쉽게 결합 할 수 있습니다. 이것을 작곡이라고하며 여기서는 자세히 설명하지 않겠습니다. 이 기사에서는 JavaScript에서 가장 많이 사용되는 3 가지 고차 함수를 다룰 것입니다. 이들은 .filter (), .map () 및 .reduce ()입니다.

필터

18 세 이상인 사람을 걸러 내려는 사람의 목록을 허용하는 코드를 작성한다고 상상해보십시오.

우리의 목록은 다음과 같습니다.

const people = [
 {이름 :‘John ​​Doe’, 나이 : 16},
 {이름 :‘Thomas Calls’, 나이 : 19},
 {이름 :‘리암 스미스’, 나이 : 20},
 {이름 :‘Jessy Pinkman’, 나이 : 18},
];

18 세 이상인 사람을 선택하는 1 차 함수의 예를 살펴 보겠습니다. ECMAScript 표준 또는 ES6의 일부인 화살표 기능을 짧게 사용하고 있습니다. 함수를 정의하는 짧은 방법 일 뿐이므로 괄호, 중괄호 및 세미콜론뿐만 아니라 입력 함수 및 리턴을 건너 뛸 수 있습니다.

const peopleAbove18 = (컬렉션) => {
  const 결과 = [];
 
  for (let i = 0; i  = 18) {
      results.push (person);
    }
  }
  결과 반환;
};

이제 18 세에서 20 세 사이의 모든 사람들을 선택하려면 어떻게해야합니까? 다른 함수를 만들 수 있습니다.

const peopleBetween18And20 = (컬렉션) => {
  const 결과 = [];
 
  for (let i = 0; i  = 18 && person.age <= 20) {
      results.push (person);
    }
  }
  결과 반환;
};

이미 많은 반복 코드를 알고있을 것입니다. 이것은보다 일반적인 솔루션으로 추상화 될 수 있습니다. 이 두 기능에는 공통점이 있습니다. 그들은 목록을 반복하고 주어진 조건에서 필터링합니다.

"고차 함수는 하나 이상의 함수를 인수로 취하는 함수입니다."— Closurebridge

보다 선언적인 접근 방식 인 .filter ()를 사용하여 이전 함수를 개선 할 수 있습니다.

const peopleAbove18 = (컬렉션) => {
  반품 수집
    .filter ((person) => person.age> = 18);
}

그게 다야! 이 고차 함수를 사용하면 많은 추가 코드를 줄일 수 있습니다. 또한 코드를 더 잘 읽을 수있게합니다. 필터링되는 방식은 중요하지 않으며 필터링 만하면됩니다. 이 기사의 뒷부분에서 함수를 결합하는 방법에 대해 살펴 보겠습니다.

지도

커피를 마시는 것을 좋아하는지 알려주는 이름과 이름이 같은 목록을 봅시다.

const coffeeLovers = [‘John ​​Doe’,‘Liam Smith’,‘Jessy Pinkman’];

명령 방식은 다음과 같습니다.

const addCoffeeLoverValue = (컬렉션) => {
  const 결과 = [];
 
  for (let i = 0; i 
    if (coffeeLovers.includes (person.name)) {
      person.coffeeLover = true;
    } else {
      person.coffeeLover = 거짓;
    }
 
    results.push (person);
  }
 
  결과 반환;
};

.map ()을 사용하여 더 선언적으로 만들 수 있습니다.

const incrementAge = (컬렉션) => {
  return collection.map ((person) => {
    person.coffeeLover = coffeeLovers.includes (person.name);
 
    귀국 자;
  });
};

.map ()은 고차 함수입니다. 함수가 인수로 전달 될 수 있습니다.

줄이다

언제, 어떻게 사용하는지 알 때이 기능을 좋아할 것입니다.
.reduce ()의 멋진 점은 위의 대부분의 함수를 사용하여 만들 수 있다는 것입니다.

먼저 간단한 예를 들어 보겠습니다. 우리는 모든 사람들의 나이를 요약하고 싶습니다. 다시 한 번, 명령 방식을 사용하여이 작업을 수행하는 방법을 살펴 보겠습니다. 기본적으로 컬렉션을 반복하고 연령에 따라 변수를 증가시킵니다.

const sumAge = (컬렉션) => {
  num = 0으로하자;
 
  collection.forEach ((person) => {
    숫자 + = person.age;
  });
 
  숫자 반환;
}

그리고 .reduce ()를 사용하는 선언적 접근 방식.

const sumAge = (수집) => collection.reduce ((sum, person) => {
 반환 합계 + person.age;
}, 0);

.reduce ()를 사용하여 자체 .map () 및 .filter () 구현을 만들 수도 있습니다.

const map = (컬렉션, fn) => {
  return collection.reduce ((acc, item) => {
    반품 acc.concat (fn (항목));
  }, []);
}
const 필터 = (컬렉션, fn) => {
  return collection.reduce ((acc, item) => {
    if (fn (item)) {
      반품 acc.concat (항목);
    }
 
    반품 acc;
  }, []);
}

처음에는 이해하기 어려울 수 있습니다. 그러나 .reduce ()는 기본적으로 컬렉션과 초기 값을 가진 변수로 시작합니다. 그런 다음 컬렉션을 반복하고 값을 변수에 추가 (또는 추가)합니다.

지도 결합, 필터링 및 축소

이러한 기능이 존재한다는 점은 훌륭합니다. 그러나 좋은 점은 JavaScript의 Array 프로토 타입에 존재한다는 것입니다. 즉,이 기능들을 함께 사용할 수 있습니다! 이를 통해 재사용 가능한 기능을 쉽게 만들고 특정 기능을 작성하는 데 필요한 코드의 양을 줄일 수 있습니다.

그래서 우리는 18 세 이하의 사람들을 걸러 내기 위해 .filter ()를 사용하는 것에 대해 이야기했습니다. .
실제로이 세 단계를 결합한 코드를 작성해 봅시다.

const people = [
 {이름 :‘John ​​Doe’, 나이 : 16},
 {이름 :‘Thomas Calls’, 나이 : 19},
 {이름 :‘리암 스미스’, 나이 : 20},
 {이름 :‘Jessy Pinkman’, 나이 : 18},
];
const coffeeLovers = [‘John ​​Doe’,‘Liam Smith’,‘Jessy Pinkman’];
const ageAbove18 = (사람) => person.age> = 18;
const addCoffeeLoverProperty = (사람) => {
 person.coffeeLover = coffeeLovers.includes (person.name);
 
 귀국 자;
}
const ageReducer = (합계, 사람) => {
 반환 합계 + person.age;
}, 0);
const coffeeLoversAbove18 = 사람들
 .filter (ageAbove18)
 .map (addCoffeeLoverProperty);
const totalAgeOfCoffeeLoversAbove18 = coffeeLoversAbove18
 .reduce (ageReducer);
const totalAge = 사람들
 .reduce (ageReducer);

필수적인 방식으로 수행하면 많은 반복 코드를 작성하게됩니다.

.map () ..reduce () 및 .filter ()를 사용하여 함수를 작성한다는 사고 방식은 작성하는 코드의 품질을 향상시킵니다. 그러나 또한 많은 가독성을 추가합니다. 함수 내부에서 무슨 일이 일어나고 있는지 생각할 필요가 없습니다. 이해하기 쉽습니다.

다음에 갈 곳?

고차 함수에 대해 배웠으므로 아래 기사가 흥미로울 수 있습니다.

읽어 주셔서 감사합니다! :)

이 기사를 즐겼다면 ❤ 아래의 하트 버튼을 누르십시오. 그것은 나에게 많은 의미가 있으며 다른 사람들이 이야기를 볼 수 있도록 도와줍니다.

트위터에 인사