JavaScriptの関数について

最近、JavaScriptを復習し、改めて関数について理解を深めたので、その内容をまとめました。

JavaScriptの関数とは？

JavaScriptの関数は、一連の処理をまとめたブロックです。関数を使うことで、コードの再利用性が高まり可読性も向上します。

関数の基本的な書き方

関数を書くときは、functionキーワードを用いて、関数を記述します。これを関数宣言といいます。

function sayHello() {
    console.log("こんにちは！");
}

この関数 sayHello は、「こんにちは！」と表示するだけの簡単な関数です。

関数を実行するには、次のように記述します。

sayHello();

引数を持つ関数

関数には引数を渡すことができます。引数を渡すことで、引数を使った様々な処理を行うことができます。

function greet(name) {
    console.log(`こんにちは、${name}さん!`);
}

greet("太郎"); // 出力: こんにちは、太郎さん!

1. greet("太郎") が実行されると、関数 greet の引数 name に "太郎" が渡されます。
2. console.log の中でテンプレートリテラル ${name} を使い、nameの値が文字列に埋め込まれます。
3. コンソールには こんにちは、太郎さん! と出力されます。

戻り値を持つ関数

関数は、処理を実行するだけでなく、結果を返すこともできます。

function add(a, b) {
    return a + b;
}

let result = add(3, 5);
console.log(result); // 出力: 8

return を使うことで、計算結果を関数の外で利用できます。

関数内の処理した結果を他の場所でも使用したい場合は、returnを使って結果を返します。たとえば、戻り値を使って、デバックやテストをするときに便利です。

下記のように、処理した内容を画面に出力するだけの場合、returnは必要ありません。

function greet(name) {
    console.log(`こんにちは、${name}さん!`);
}

greet("太郎");

コールバック関数とは？

コールバック関数とは、ある関数の引数に渡された関数のことです。

特定のタイミングで処理を実行するために使用されます。非同期処理やイベント処理で頻繁に活用されます。

function greet(name, callback) {
    console.log(`こんにちは、${name}さん !!`);
    callback();
}

function afterGreet() {
    console.log("挨拶が完了しました。");
}

greet("太郎", afterGreet);

この例では、greet関数が nameとafterGreet関数を引数として受け取り、greetの処理が完了した後にafterGreetを実行しています。

コールバック関数の用途

1. 非同期処理

JavaScriptでは、非同期処理を行うためにコールバック関数がよく使われます。例えば、setTimeoutを使った処理です。

setTimeout(function() {
    console.log("3秒後に実行されました。");
}, 3000);

この例では、3秒後にコールバック関数の中の処理が実行されます。

setTimeout関数は、第二引数に渡した時間 (ミリ秒単位) が経過した後に、第一引数に渡したコールバック関数を実行します。

2. イベント処理

コールバック関数は、イベントリスナーでもよく利用されます。以下のコードは、ボタンがクリックされたときにコールバック関数が実行される仕組みです。

document.getElementById("myButton").addEventListener("click", function() {
    console.log("ボタンがクリックされました！");
});