![株式会社デジナーレ[designare]](https://designare.jp/wp-content/themes/designare_new/img/logo.svg){kind=logo}
Writer： tokuyasu 更新日：2023/08/21
こんにちは、デジナーレ福岡オフィスの徳安です。
この記事では、JavaScriptの関数についてについて説明いたします。
関数とは
関数とは、あるデータ（インプット）を受け取り、
何らかの処理を行ってその結果を返す（アウトプット）、
一連の処理のまとまりのこと。
メソッドとは
オブジェクトのプロパティとして関数を持つことが可能となっており、
このような関数のことをメソッドと呼ぶ。
オブジェクトやメソッドには、
ユーザーが独自で定義するもの以外に、
JavaScriptエンジンによってあらかじめ用意されている
「標準組み込みオブジェクト」が存在する。
＊オブジェクト キーと値を対で格納する入れ物
関数の主な定義方法
JavaScripでは、
＊関数宣言による関数の定義する方法と
＊関数式によって定義する方法
の2種類があり基本的にはどちらの方法でも同じように
関数を定義することができる。
「 関数宣言」による関数の定義
関数宣言で関数を宣言する場合、
functionのキーワードに続けて関数を記述する。
関数に渡すインプットのことを引数、
関数の処理の結果（アウトプット）は戻り値とよび、
returnに続けて値を設定する。
※ 引数、return 戻り値 は省略可
【例】
実行結果
このように関数を用いて処理をまとめることで、
同じ処理を何度も書く必要がなくなり、
コードの再利用性や保守性を高めることができる。
■戻り値
return文は複数記述できるが、
初めのreturn文が呼び出された時点で
関数の処理は終了する。
また、return文が関数内に存在しない場合は、
関数の最後まで処理が実行され、
実行元にundefinedが返される。
「関数式」による関数の定義
関数の定義は、代入演算子( = )を使用して、
変数に関数式を代入することができる。
※ 引数、return 戻り値 は省略可
【例】
実行結果
「関数宣言」と「関数式」の違い
＊ 関数宣言 ＊
関数宣言では宣言された関数は
重複してもエラーにならず、
後から宣言された関数によって上書きされる。
実行結果
また、関数宣言で関数定義を行った場合は、
関数の宣言文より前に実行文を記述できる。
実行結果
※ES6で追加されたES Modulesという機能を有効化することで、
重複した関数名が使用された際に、エラーを発生させることができる。
( scriptタグ内に「type="module"」を記述することで有効化することが可能。 )
＊ 関数式 ＊
関数式で関数名が重複している場合は、エラーが発生する。
上記でエラーが発生するのは、
関数宣言の重複によるエラーではなく
「const」や「let」で変数を再宣言した際に
発生するエラーと同様。
関数式で定義された関数はfunctionの後に
関数名の記述の必要がない。
関数名の定義がされていない関数のことを無名関数と呼ぶ。
実行結果
関数宣言では関数の宣言前に実行文を記述できたが、
関数式で定義前に実行分を記述するとエラーが発生する。
実行結果
引数にオブジェクトを渡したときの挙動
関数の引数としてオブジェクトを使用する場合は、注意が必要。
この場合のobjとobj2は同じオブジェクトを参照を保持している。
変数が参照している、
オブジェクト自体が別のものに変わるため、
コンソールで出力した結果が変わっている。
上記例は、新しいオブジェクトとして定義しているため、
コンソールで出力した際の結果は関数外で定義した「1」となる。
★引数でオブジェクトを渡した場合、
オブジェクトの中身を変更すると、
『関数外のオブジェクトにも影響』する。
しかし、新しいオブジェクトを設定した場合は、
関数外のオブジェクトには影響しない。
コールバック関数
コールバック関数とは、ほかの関数に引数として渡す関数のこと。
※ 引数、return 戻り値 は省略可
【例】
実行結果
上記の例では、fnに渡されたhello関数、morning関数がコールバック関数。
fn関数内では、渡されたコールバック関数をcallbackという引数で扱う。
無名関数を使ったコールバック関数
名前付き関数とは複数回呼び出されることを想定しているが、
無名関数は基本的に一度しか呼び出されないケースで使用される。
※ 引数、return 戻り値 は省略可
上記の例だと3秒後 Hello!! というメッセージが、
コンソールに出力される。
アロー関数
アロー関数とは、無名関数の省略記法のこと。
先ほど記述した通り、
関数式は名前がなくても記述が可能で、
名前がない関数のことを無名関数と呼ぶ。
その無名関数をアロー関数で省略して記述することが可能。
アロー関数は英語で「Arrow Function」
「Arrow」は「矢、矢印」と言う意味。
コールバック関数に使う無名関数を
アロー関数に置き換えることもできる。
【引数がない場合】
引数がない場合は、アロー関数の先頭の()は省略できない。
【引数が一つの場合】
引数が一つの場合、アロー関数の先頭の()は省略可能。
【引数が複数の場合】
引数が複数の場合、アロー関数の先頭の()は省略できない。
【関数の本文が一行の場合】
関数の本文が一行の場合、{}を省略できる。
関数の本文はそのまま戻り値となる。
【関数の本文が複数行の場合】
関数の本文が複数行の場合、{}は省略できない。
戻り値を返す場合には、return文を明記する必要がある。
【関数の本文が一行かつ戻り値がオブジェクトの場合】
関数の本文が一行で戻り値がオブジェクトの場合は、
アロー関数の{}と区別するため、
オブジェクトリテラルを()で囲む。
アロー関数と無名関数の違い
今回は、JavaScriptの関数についての内容でした。
ここまで、読み進めていただきありがとうございます。
