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番号ごとに呼び出され、戻り値を使用するか、番号を保持するか破棄するtruefalseを決定します。

関数を返す

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

add2つのパラメーターが必要ですが、一度にすべてではありません。これxは、justを要求する関数であり、justを要求する関数を返しますy

繰り返しになりますが、これが可能なのは、JavaScriptでは、文字列、数値、ブール値などのように、関数を戻り値にすることができるためです。

あなたはまだ供給することができますxし、yあなたが望むならば、二重起動して、すぐに

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

またはx現在およびy後で:

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

最後の例を巻き戻しましょう。1つのパラメータadd10で呼び出した結果ですadd。コンソールにログインしてみてください。

add10を取り、yを返す関数ですx + y。あなたが供給した後y、あなたの最終結果を計算して返すことは急いでいます。

再利用性の向上

おそらく、HOFの最大の利点は、再利用性が高いことです。それらがなければ、JavaScriptののプレミアアレイ法- 、  mapfilterとはreduce -存在しなかったでしょう!

Here’s a list of users. We’re going to do some calculations with their information.

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

Map

Without higher-order functions, we’d always need loops to mimic map's functionality.

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"] 

Or we could do this!

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

Filter

In a HOF-less world, we’d still need loops to recreate filter's functionality too.

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 }] 

Or we could do this!

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

Reduce

Yup, reduce too… Can’t do much cool stuff without higher-order functions!! ?

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

How’s this?

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

Summary

  • Strings, numbers, bools, arrays, and objects can be stored as variables, arrays, and properties or methods.
  • JavaScript treats functions the same way.
  • This allows for functions that operate on other functions: higher-order functions.
  • Map, filter, and reduce are prime examples — and make common patterns like transforming, searching, and summing lists much easier!

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

Take care,

Yazeed Bzadough

yazeedb.com