JavaScriptコールバック関数–JSのコールバックとは何ですか。

プログラミングに精通している場合は、関数の機能とその使用方法をすでに知っています。しかし、コールバック関数とは何ですか?コールバック関数はJavaScriptの重要な部分であり、コールバックがどのように機能するかを理解すると、JavaScriptがはるかに上手になります。

そのため、この投稿では、いくつかの例を使用して、コールバック関数とは何か、JavaScriptでそれらを使用する方法を理解できるように支援したいと思います。

コールバック関数とは何ですか?

JavaScriptでは、関数はオブジェクトです。オブジェクトをパラメーターとして関数に渡すことはできますか?はい。

したがって、関数をパラメーターとして他の関数に渡し、それらを外部関数内で呼び出すこともできます。複雑に聞こえますか?以下の例でそれを示しましょう:

function print(callback) { callback(); }

print()関数は、別の関数をパラメーターとして受け取り、それを内部で呼び出します。これはJavaScriptで有効であり、「コールバック」と呼ばれます。したがって、パラメータとして別の関数に渡される関数は、コールバック関数です。しかし、それだけではありません。

以下のコールバック関数のビデオバージョンもご覧いただけます。

なぜコールバック関数が必要なのですか?

JavaScriptは、コードをトップダウンの順序で順番に実行します。ただし、他の何かが発生した後にコードが実行される(または実行する必要がある)場合があります。これは非同期プログラミングと呼ばれます。

コールバックは、タスクが完了する前に関数が実行されるのではなく、タスクが完了した直後に実行されることを確認します。非同期JavaScriptコードの開発に役立ち、問題やエラーからの安全を確保します。

JavaScriptでは、コールバック関数を作成する方法は、それをパラメーターとして別の関数に渡し、何かが発生した後、または何らかのタスクが完了した直後にコールバック関数を呼び出すことです。方法を見てみましょう…

コールバックを作成する方法

上で説明したことを理解するために、簡単な例から始めましょう。コンソールにメッセージを記録したいのですが、3秒後にメッセージが表示されるはずです。

const message = function() { console.log("This message is shown after 3 seconds"); } setTimeout(message, 3000);

JavaScriptには、「setTimeout」と呼ばれる組み込みメソッドがあります。このメソッドは、関数を呼び出すか、指定された期間(ミリ秒単位)後に式を評価します。したがって、ここでは、3秒が経過した後に「メッセージ」関数が呼び出されています。(1秒= 1000ミリ秒)

つまり、メッセージ関数は、何かが発生した後(この例では3秒が経過した後)に呼び出されていますが、前には呼び出されていません。したがって、メッセージ関数はコールバック関数の例です。

匿名関数とは何ですか?

または、関数を呼び出す代わりに、別の関数内に直接関数を定義することもできます。次のようになります。

setTimeout(function() { console.log("This message is shown after 3 seconds"); }, 3000);

ご覧のとおり、ここでのコールバック関数には名前がなく、JavaScriptで名前のない関数定義は「無名関数」と呼ばれます。これは、上記の例とまったく同じタスクを実行します。

矢印関数としてのコールバック

必要に応じて、JavaScriptの新しいタイプの関数であるES6矢印関数と同じコールバック関数を作成することもできます。

setTimeout(() => { console.log("This message is shown after 3 seconds"); }, 3000);

イベントはどうですか?

JavaScriptはイベント駆動型プログラミング言語です。また、イベント宣言にはコールバック関数を使用します。たとえば、ユーザーにボタンをクリックしてもらいたいとします。

Click here

今回は、ユーザーがボタンをクリックしたときにのみコンソールにメッセージが表示されます。

document.queryselector("#callback-btn") .addEventListener("click", function() { console.log("User has clicked on the button!"); });

したがって、ここでは、最初にそのIDでボタンを選択し、次にaddEventListenerメソッドを使用してイベントリスナーを追加します。2つのパラメータを取ります。1つ目はそのタイプ「クリック」で、2つ目のパラメーターはコールバック関数で、ボタンがクリックされたときにメッセージをログに記録します。

ご覧のとおり、コールバック関数はJavaScriptのイベント宣言にも使用されます。

要約

コールバックはJavaScriptで頻繁に使用されます。この投稿が、コールバックが実際に何をしているのか、そしてコールバックをより簡単に操作する方法を理解するのに役立つことを願っています。次に、新しい投稿で説明したのと同様のトピックであるJavaScriptPromisesについて学習できます。

Web開発について詳しく知りたい場合は、Youtubeで私フォローしてください

読んでくれてありがとう!