Javascript
 Computer >> コンピューター >  >> プログラミング >> Javascript

JavaScriptの高階関数：ガイド

開発者として、あなたはおそらく通常のJavaScript関数を使用したことがあります。一次関数と呼ばれ、関数をパラメーターとして取り込んだり、関数を返したりすることはありません。 

function hello(name) {
   return "Hello," + " " +  name
}
 
console.log(hello("Career Karma")); // Hello, Career Karma

この記事では、高階関数（HOF）について説明します。これらは、開発者がコードを整理して、関数を引数として渡すか、関数を返すことによって、コードを読みやすくするのに役立つ関数です。いくつかの基本的な例を見て、HOFと関数型プログラミングを紹介し、高階関数構造を利用して機能する2つの一般的な高度な配列メソッドについて説明します。

基本的な高階関数の例

JavaScriptで高階関数を使用する方法はいくつかあります。

電卓

コールバック関数を引数として受け取り、そのコールバックをいくつかの引数とともに返す基本的なHOFから始めましょう。 

//higher order function
function higherOrderFunction(num1, num2, cb) {
   return cb(num1, num2); //this invokes our cb function and passes in our arguments to the callback. 
}
 
//callbacks
function add(num1, num2) {
   return num1 + num2;
}
function multiply(num1, num2) {
   return num1 * num2;
}
function divide(num1, num2) {
   return num1/num2;
}
function subtract(num1, num2) {
   return num1 - num2;
}
function modulo(num1, num2) {
   return num1 % num2;
}
 
console.log(higherOrderFunction(43, 13, add));

ここでは、2種類の関数があります。コールバックを返す高階関数と、2つの数値に対して演算を実行する一次関数のセットです。スニペットの最後で、higherOrderFunction()への関数呼び出しを行います。 。この関数は、指定されたパラメーターで渡されたcbの呼び出しの結果を返します。可能なすべての算術演算子のコールバック関数を作成した場合は、higherOrderFunctionを使用して、必要な操作を呼び出すことができます。

イベントリスナー

高階関数のもう1つの例は、DOM（ドキュメントオブジェクトモデル）の要素にイベントリスナーを追加したときに発生するものです。この例を見てください： 

<!DOCTYPE html>
<html>
   <head>
       <meta charset="utf-8">
       <meta http-equiv="X-UA-Compatible" content="IE=edge">
       <title></title>
       <meta name="description" content="">
       <meta name="viewport" content="width=device-width, initial-scale=1">
       <link rel="stylesheet" href="">
   </head>
   <body>
       <!--[if lt IE 7]>
           <p class="browsehappy">You are using an <strong>outdated</strong> browser. Please <a href="#">upgrade your browser</a> to improve your experience.</p>
       <![endif]-->
       <button>Click Me!</button>
       <script async defer>
           const button = document.querySelector("button");
           button.addEventListener("click", (e) => {
               alert("The button has been clicked!");
           })
 
       </script>
   </body>
</html>

この例では、HTMLでボタンを作成し、JavaScriptを使用してボタンを選択し、それにイベントリスナーを追加しました。イベントリスナーの構造は、単純な高階関数の構造です。2番目の引数として無名関数を取ります。

JavaScriptの高階関数：ガイド

強調表示されているセクションは高階関数です。

参加者の81％は、ブートキャンプに参加した後、自分たちの技術的な仕事の見通しについてより自信を持っていると述べました。今日のブートキャンプにマッチしましょう。

平均的なブートキャンプの卒業生は、ブートキャンプの開始から最初の仕事を見つけるまで、キャリアの移行に6か月も費やしませんでした。

高度な配列メソッド

JavaScriptの組み込み配列メソッドは、ES6に新しく追加された特別な高階関数であり、配列を反復処理して操作するか、値が操作されたまったく新しい配列を返すために使用できます。

JavaScriptでより複雑な問題解決に取り掛かるにつれて、配列を反復処理するときに作成するロジックの一部を抽象化することを考え始めます。これらの高階関数配列メソッドを使用すると、より優れたJS開発者になるのに役立ちます。

たとえば、教授がたくさんいるとしましょう。

JavaScriptの高階関数：ガイド

forEach

ES6を使用する前に配列を反復処理して各アイテムを操作する場合は、次のようにする必要があります。 

function forEachES5(arr){
   for(let i = 0; i < arr.length; i++) {
       arr[i] = "Professor " + arr[i];
   }
   return arr;
}
 
console.log(forEachES5(professors));

ES6構文を使用すると、forEachメソッドを使用してコードを削減できます。

function forEachES6(arr) {
   arr.forEach((professor, index, origArr) => {
       origArr[index] = "Professor " + professor;
   });
   return arr;
 
}

このforEachメソッドは、コールバック関数を最初のパラメーターとして取り込んで、高階関数にします。このコールバック関数は、基本的に、配列内の各アイテムに対して実行される「アクション」です。さらに、forEachメソッドは、オプションの2番目と3番目のパラメーターとしてインデックスと配列も受け取ります。

forEachメソッド（および他の組み込み配列メソッド）のこれらのパラメーターの順序は重要です。 1つ目は常にコールバック関数であり、2つ目は常に配列内のアイテムのインデックスであり、3つ目は常に配列自体のコピーです。

forEachメソッドは、JavaScriptでforループを表示するもう1つの方法です。何も返されません。このメソッドは、すでに存在するものを操作し、操作する配列を指定した場合は、操作している配列に保存します。

地図

forEachメソッドに最も近いメソッドはmapメソッドです。このメソッドが新しい配列を返すことを除いて、これはほとんど同じように機能します。コールバック関数で操作するものは、元の配列には影響しません。

ES6以前の地図を見てみましょう：

function mapES5(arr){
   let newArr = [];
   for(let i = 0; i < arr.length; i++) {
       newArr.push("Professor " + arr[i]);
   }
   return newArr;
}

ご覧のとおり、私たちがしなければならなかったのは、forループの外側に新しい配列をインスタンス化して、それに新しい値をプッシュできるようにすることでした。次に、実際に新しい配列を返して、他の場所で実際に使用できるようにする必要があります。

ES6とmapメソッドを使用すると、そのロジックの一部を抽象化して読みやすくすることができます。

function mapWithES6(arr) {
   const mapped = arr.map(professor => {
       return "Professor " + professor;
   })
   return mapped;
}

mapメソッド、およびそのような他の配列メソッド、特にreduceおよびfilter関数に関する特別な機能は、それを変数に割り当てて返すか、関数全体を返すことができることです。新しいアレイにプッシュする必要はありません。これは、このマップメソッドを使用して行われます。マップメソッドのコールバック関数内のロジックに戻り値があることを忘れないでください！

結論：

高階関数は、JavaScriptで非常に重要な概念であり、より優れた開発者になるのに役立ちます。コードを読みやすくし、場合によってはパフォーマンスを向上させるために、ロジックを抽象化すると役立ちます。

このチュートリアルでは、基本的な計算機メソッドからイベントリスナーや高度な配列関数まで、高階関数を記述できるさまざまな方法のいくつかを探りました。これをマスターしたら、問題に対するより複雑な解決策に取り組む準備が整います！


  1. JavaScriptの高階関数を説明します。

    JavaScriptは関数をオブジェクトとして扱い、関数をパラメーターとして別の関数に渡したり、他の関数から関数を返したりすることもできます。 JavaScriptでは、関数はファーストクラスの関数です。つまり、変数、オブジェクト、配列に格納できます。高階関数は、関数を取得するか、関数を返すか、またはその両方を実行できます。 以下は、JavaScriptの高階関数のコードです。 例 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /&g

  2. JavaScriptのファーストクラス関数

    JavaScriptは関数をオブジェクトとして扱い、関数をパラメーターとして別の関数に渡したり、他の関数から関数を返したりすることもできます。 JavaScriptでは、関数はファーストクラスの関数です。つまり、変数、オブジェクト、配列に格納できます。高階関数は、関数を取得するか、関数を返すか、またはその両方を実行できます。 以下は、JavaScriptでファーストクラス関数を実装するためのコードです- 例 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UT