関数は呼び出されたときに実行される再利用可能なコードです。関数はコードを再利用できるので、よりモジュール化され、保守が容易になります。
JavaScriptで関数を作成するにはいくつかの方法があります。ここでは、関数の作成方法とその使用方法を説明します。
関数宣言:わかりやすい方法
JavaScriptで関数を宣言する方法は、関数宣言です。関数宣言とは、以下の構文に従うJavaScriptの関数のことです。
function 関数名(パラメータ) {
// コードをここに記述...
return "これは関数宣言です";
}
上記のコードブロックの構成要素は以下の通りです。
- functionキーワード:このキーワードは関数を宣言します。
- 関数名:これは関数の名前です。実際には、関数の機能を可能な限り説明的に意味のあるものにする必要があります。
- パラメータ:これは関数のパラメータを表します。パラメータは、関数を呼び出すときに渡すことができる変数のオプションのリストです。
- 関数本体:これは関数を呼び出したときに実行されるコードを含みます。これは波括弧{}で囲まれ、有効なJavaScriptコードを含めることができます。
- returnステートメント:このステートメントは関数の実行を停止し、指定された値を返します。上記の例では、関数を呼び出すと文字列「これは関数宣言です」が返されます。
例えば、以下の関数宣言は3つの数値をパラメータとして受け取り、その合計を返します。
function addThreeNumbers(a, b, c) {
return a + b + c;
}
JavaScriptで関数宣言を呼び出すには、関数名の後に括弧()を付けます。関数がパラメータを受け取る場合は、括弧内に引数として渡します。
例えば:
addThreeNumbers(1, 2, 3) // 6
上記のコードブロックはaddThreeNumber関数を呼び出し、1、2、3を引数として関数に渡します。このコードを実行すると、値6が返されます。
JavaScriptは関数宣言をホイストするので、宣言する前に呼び出すことができます。
例えば:
isHoisted(); // 関数はホイストされる
function isHoisted() {
console.log("Function is hoisted");
return true;
}
上記のコードブロックに示すように、isHoistedを定義する前に呼び出してもエラーは発生しません。
関数式:値としての関数
JavaScriptでは、関数を式として定義できます。その後、関数値を変数に代入したり、別の関数の引数として使用したりすることができます。
また、名前がないため匿名関数とも呼ばれ、代入した変数からのみ呼び出すことができます。
以下は関数式の構文です。
const 関数名 = function () {
return "関数式";
};
JavaScriptで関数式を呼び出すには、関数に代入した変数名を書き、その後に括弧()を付けます。関数がパラメータを受け取る場合は、括弧内に引数として渡します。
例えば:
関数名(); // 関数式
関数式は、他の関数内で実行する関数を作成する場合に便利です。典型的な例としては、イベントハンドラとそのコールバックがあります。
例えば:
button.addEventListener("click", function (event) {
console.log("You clicked a button!");
});
上記の例では、addEventListener関数のコールバックとしてevent引数を受け取る関数式を使用しました。関数式をコールバックとして使用する場合、関数を明示的に呼び出す必要はありません。親関数によって自動的に呼び出されます。
上記の例では、イベントリスナーがclickイベントを受け取ると、コールバック関数を呼び出し、eventオブジェクトを引数として渡します。
関数宣言とは異なり、関数式はホイストされないので、定義する前に呼び出すことはできません。定義する前に関数式にアクセスしようとすると、ReferenceErrorが発生します。
例えば:
isHoisted(); // ReferenceError: Cannot access 'isHoisted' before initialization
const isHoisted = function () {
console.log("Function is hoisted");
};
アロー関数:コンパクトで限定的
ES6では、アロー関数と呼ばれるJavaScriptの匿名関数を記述するための省略形が導入されました。簡潔な構文でコードを読みやすくすることができます。特に、短く1行の関数を取り扱う場合に便利です。
他の関数の作成方法とは異なり、アロー関数ではfunctionキーワードは必要ありません。アロー関数式は3つの部分で構成されています。
- パラメータを含む括弧(())。関数がパラメータを1つしか持たない場合は、括弧を省略することができます。
- アロー(=>)は、等号(=)と大なり記号(>)で構成されています。
- 関数本体を含む波括弧。関数が単一の式で構成されている場合は、波括弧を省略することができます。
例えば:
// 単一のパラメータ、暗黙的リターン
const 関数名 = パラメータ => console.log("単一パラメータアロー関数")
// 複数のパラメータ、明示的リターン
const 関数名 = (パラメータ_1、パラメータ_2) => {
return "複数パラメータアロー関数"
};
波括弧を省略すると、アロー関数は単一の式を暗黙的に返すため、returnキーワードは必要ありません。一方、波括弧を省略しない場合は、returnキーワードを使用して明示的に値を返す必要があります。
アロー関数には、通常の関数とは異なるthisバインディングがあります。通常の関数では、thisの値は関数の呼び出し方法によって異なります。アロー関数では、thisは常に周囲のスコープのthis値にバインドされます。
例えば:
const foo = {name: "Dave",greet: function () {setTimeout(() => {console.log(Hello, my name is ${this.name});}, 1000);},};foo.greet(); // 1秒後に「Hello, my name is Dave」とログに出力
上記の例では、greetメソッド内のアロー関数は、setTimeout関数が呼び出しているにもかかわらず、this.nameにアクセスできます。通常の関数は、thisがグローバルオブジェクトにバインドされます。
すぐに呼び出される関数式 (IIFE)
名前が示すように、すぐに呼び出される関数 (IIFE) は、定義されるとすぐに実行される関数です。
IIFEの構造は以下の通りです。
(function () {
// コードをここに記述
})();
(() => {
// コードをここに記述
})();
(function (param_1, param_2) {
console.log(param_1 * param_2);
})(2, 3);
IIFEは、括弧で囲まれた関数式で構成されています。その外側にもう一組の括弧を付けて関数を呼び出します。
IIFEは、スコープを作成したり、実装の詳細を隠したり、複数のスクリプト間でデータを共有したりするために使用することができます。かつてはJavaScriptのモジュールシステムとして使用されていました。
さまざまな方法で関数を作成する
JavaScriptで関数の作成方法を理解することは重要です。これは、単純な計算を行う基本的な関数でも、コードの他の部分と相互作用する洗練された関数でも同じです。
上記で説明したテクニックを使用して、JavaScriptで関数を作成し、コードを構造化して整理することができます。それぞれにさまざまな利点と用途があるので、自分の要求に最適なアプローチを選択してください。
コメントする