プログラミングを書いていくと、処理をまとめて管理したい時や、再利用したい時があります。このような場面で活躍するのが関数です。
関数は、プログラミングの主役とも言えるほど頻繁に使われており、効率化や可読性を高めるうえで欠かせません。
そこで今回は、JavaScriptにおける関数の基本的な使い方について解説します。
関数にはさまざまな書き方があり、初心者が理解しにくい側面もありますが、まずは基本構文を理解することで、今後のコーディングに生かせるようになります。
本記事を通してしっかりおさえていきましょう。
関数とは
「関数」とは、処理をまとめて定義し、再度利用できるように管理しているものです。英語では、「function」と呼ばれています。
プログラムが大きくなってくると、同じ内容の処理を複数の箇所で使いたい場面があります。その際に同じ処理を繰り返し記述することは可能です。
しかし、コードが長くなってしまい、可読性が低くなるデメリットがあります。
また、処理内容を変更したい場合に、すべての処理の箇所で変更が必要となり、非常に非効率です。
そのような煩雑な管理を防ぐために、処理を関数という形でまとめて定義し、必要な箇所でその関数を呼び出します。そうすることで、あらゆる箇所で同じ処理を使うことが可能になり、変更点が生じた際にも変更の手間が掛からなくなります。
関数の構文
JavaScriptの関数には、複数の書き方があります。
一般的な関数は、「関数宣言」「関数式」「関数コンストラクタ」の3種類です。
順番にみていきましょう。
関数宣言
以下のような構文を使って関数を定義することを、「関数宣言」と言います。
この方法は幅広く使用されるため、見たことがある人も多いかもしれません。
冒頭の「function」は、関数であることを示すための予約語となるため、必ず記述が必要です。関数名は、関数の役割を表す名前を付けると良いでしょう。
また、ブロック{}の外に「関数名();」を記述することで、関数を呼び出すことができます。
実際に関数宣言を書いてみると以下のように書くことができます。
関数式
次のような構文を「関数式」と言い、変数に格納するような形で関数を定義します。
「function」の隣には、関数名を記述する必要がないため、無名関数や匿名関数とも呼ばれています。関数式で定義した関数を呼び出す時は、関数式で宣言された変数名を使って呼び出します。
実際に関数式を書き換えてみると以下のように書くことができます。
関数コンストラクタ
次のように、「関数コンストラクタ」という方法で関数を定義することができます。
「new」を使用してFunctionクラスのオブジェクトを生成することが特徴です。
しかし、関数コンストラクタは動作が遅く、わかりにくい記述になるため、前述の関数宣言や関数式よりもメリットは見えにくいです。最低限の知識として知っておけば良いでしょう。
実際に、関数コンストラクタは以下のように書くことができます。
関数宣言と関数式の違い
では、一般的に良く使われている関数宣言と関数式、どのような違いがあるのでしょうか。
それは、関数が生成されるタイミングに注目すると良いでしょう。
まず、関数宣言の場合をみてみましょう。
一方で、関数式の場合はこのようになります。
関数宣言は、JavaScriptがスクリプトやコードブロックを実行するまでに、関数オブジェクトを生成します。つまり、関数宣言が処理されてから実行が続けられるということです。結果として、定義された関数の前で関数を呼び出すことが可能になります。
一方、関数式は、その式が実行されるときに関数オブジェクトを生成するため、定義された関数の前で関数を呼び出すとエラーを起こします。
そのため、関数式の定義の後に、関数を呼び出す必要があるということです。
複雑な関数の場合には、関数宣言と関数式のパフォーマンスに違いが出てくる場合があります。
しかし、普段使用するうえでは気にする必要はないため、書きやすいと感じる方を選ぶと良いでしょう。
ここまで基本的な関数の書き方をみていきました。
関数は、戻り値や引数と合わせて使われることも多いため、ここからは戻り値と引数について解説していきます。
戻り値を持つ関数
関数は、関数内で処理した何らかのデータを返すことが可能です。その返されたデータのことを「戻り値」と言います。また、戻り値を設定する際には、「return」を使用します。
実行結果
このようにreturnを用いることで、変数numberに8を足した値を返すことが可能です。
return文は、関数処理の最後に記述する必要があります。また、console.log()の中で関数の呼び出しを行うと、戻り値がそのままconsole.logに格納されます。
引数を持つ関数
関数は、関数の呼び出し時に特定の値を渡すことができます。その際に使用されるのが「引数」です。以下のように任意の数の引数を記述することができます。
つぎのサンプルをみてみましょう。
実行結果
さいごの関数の呼び出しに注目してください。
「multiply(2, 4)」と記述することで、「num1, num2」の引数へ値が格納されます。そのため、「num1 * num2」の計算結果が「8」になります。
値が渡される側の引数を「仮引数」と言い、関数を呼び出す際の引数のことを「実引数」と言います。上記の例では、num1, num2は「仮引数」、2, 4が「実引数」です。
仮引数は、このように初期値を保持することもできます。
実行結果
「age = 20」と第二引数に仮引数に初期値を与えています。そのため、関数の呼び出しの際に実引数を記述しなくても、初期値の20が与えられた状態で処理が実行されています。
ちなみに、実引数を与えると上書きされます。
実行結果
関数呼び出しの際に、実引数「30」を記述しているため、このような結果となります。
まとめ
関数には、さまざまな書き方があり、戻り値や引数なども存在します。
まずは、以下のポイントを意識しながら、関数の基礎をおさえていきましょう。
- 「関数宣言」「関数式」「関数コンストラクタ」の3種類の書き方がある
- 戻り値を用いることで何らかのデータの結果を返すことができる
- 引数を設定することで関数の呼び出し時に値を渡すことができる
これらを踏まえて関数の理解を深めていくと、今後の関数の応用にも役立てることができます。
Javascript関連記事
