Короткий вступ до функцій вищого порядку в JavaScript

Функції вищого порядку

Функція, яка приймає та / або повертає іншу функцію, називається функцією вищого порядку .

Це вищого порядку, тому що замість рядків, чисел або булевих значень він вищий, щоб працювати з функціями. Досить мета.

Завдяки функціям у JavaScript ви можете

  • Зберігайте їх як змінні
  • Використовуйте їх у масивах
  • Призначити їх як властивості об'єкта (методи)
  • Передайте їх як аргументи
  • Повернути їх з інших функцій

Як і будь-яка інша частина даних . Це ключове тут.

Функції, що діють на даних

Рядки - це дані

sayHi = (name) => `Hi, ${name}!`; result = sayHi('User'); console.log(result); // 'Hi, User!' 

Числа - це дані

double = (x) => x * 2; result = double(4); console.log(result); // 8 

Логічні дані - це дані

getClearance = (allowed) => (allowed ? 'Access granted' : 'Access denied'); result1 = getClearance(true); result2 = getClearance(false); console.log(result1); // 'Access granted' console.log(result2); // 'Access denied' 

Об'єкти - це дані

getFirstName = (obj) => obj.firstName; result = getFirstName({ firstName: 'Yazeed' }); console.log(result); // 'Yazeed' 

Масиви - це дані

len = (array) => array.length; result = len([1, 2, 3]); console.log(result); // 3 

Ці 5 типів є першокласними громадянами на всіх основних мовах.

Що робить їх першокласними? Ви можете передавати їх, зберігати у змінних та масивах, використовувати як вхідні дані для розрахунків. Ви можете використовувати їх як будь-яку частину даних .

Функціями можуть бути також дані

Функціонує як аргументи

isEven = (num) => num % 2 === 0; result = [1, 2, 3, 4].filter(isEven); console.log(result); // [2, 4] 

Подивіться, як filterвикористовувати, isEvenщоб вирішити, які номери зберігати? isEven, функція , була параметром для іншої функції .

Він викликається filterдля кожного числа і використовує повернене значення trueабо falseвизначає, чи слід зберігати чи відкидати число.

Повернення функцій

add = (x) => (y) => x + y; 

addвимагає двох параметрів, але не всіх одночасно. Це функція, яка запитує справедливість x, яка повертає функцію, яка запитує справедливість y.

Знову ж таки, це можливо лише тому, що JavaScript дозволяє функціям повертати значення - так само, як рядки, числа, булеві значення тощо

Ви все ще можете поставити xі yнегайно, за бажанням, подвійний виклик

result = add(10)(20); 
console.log(result); // 30 

Або xзараз і yпізніше:

add10 = add(10); result = add10(20); console.log(result); // 30 

Давайте перемотаємо цей останній приклад. add10є результатом виклику addз одним параметром. Спробуйте увійти в консоль.

add10- це функція, яка приймає yі повертає x + y. Після поставки yвін поспішає розрахувати і повернути кінцевий результат.

Більша багаторазовість

Ймовірно, найбільшою перевагою HOF є більша багаторазовість. Без них, методи прем'єра масиву в JavaScript -  map, filterі reduce - не існуватиме!

Ось список користувачів. Ми зробимо кілька розрахунків з їх інформацією.

users = [ { name: 'Yazeed', age: 25 }, { name: 'Sam', age: 30 }, { name: 'Bill', age: 20 } ]; 

Карта

Без функцій вищого порядку нам завжди потрібні цикли для імітації mapфункціональності.

getName = (user) => user.name; usernames = []; for (let i = 0; i < users.length; i++) { const name = getName(users[i]); usernames.push(name); } console.log(usernames); // ["Yazeed", "Sam", "Bill"] 

Або ми могли б це зробити!

usernames = users.map(getName); console.log(usernames); // ["Yazeed", "Sam", "Bill"] 

Фільтр

У світі без HOF нам все ще потрібні цикли для відтворення filterфункціональності.

startsWithB = (string) => string.toLowerCase().startsWith('b'); namesStartingWithB = []; for (let i = 0; i < users.length; i++) { if (startsWithB(users[i].name)) { namesStartingWithB.push(users[i]); } } console.log(namesStartingWithB); // [{ "name": "Bill", "age": 20 }] 

Або ми могли б це зробити!

namesStartingWithB = users.filter((user) => startsWithB(user.name)); console.log(namesStartingWithB); // [{ "name": "Bill", "age": 20 }] 

Зменшити

Так, зменшіть теж ... Не можу робити багато цікавих речей без функцій вищого порядку !! ?

total = 0; for (let i = 0; i < users.length; i++) { total += users[i].age; } console.log(total); // 75 

Як це?

totalAge = users.reduce((total, user) => user.age + total, 0); console.log(totalAge); // 75 

Резюме

  • Рядки, числа, bools, масиви та об'єкти можуть зберігатися як змінні, масиви та властивості або методи.
  • JavaScript обробляє функції однаково.
  • Це дозволяє функціям, які працюють з іншими функціями: функціями вищого порядку .
  • Карта, фільтрування та зменшення є головними прикладами - і значно полегшують такі загальні схеми, як перетворення, пошук та підсумовування списків!

I’m on Twitter if you’d like to talk. Until next time!

Take care,

Yazeed Bzadough

yazeedb.com