関数とは
関数とは、呼び出すとさまざまな処理を行ってくれるものです。
自分で関数を作ることもでき、よく使う処理や複数の処理をまとめることができます。
関数がオブジェクトの中に入っている場合は、メソッドと呼ばれます。
ウィンドウにアラートを表示できる window.alert()
は、window
オブジェクトの中にある alert()
メソッドを呼び出しているということになります。
|
|
関数宣言
関数の基本の形は、次のとおりです。
|
|
まずは、window.alert()
を実行する関数を作ってみましょう。
関数名には処理を理解しやすい名前をつけるようにします。
今回はアラートを表示する関数ですから、showAlert
という名前をつけます。
なお、パラメーターはこの後説明しますので空欄にしておきます。
|
|
呼び出し
作成した関数の呼び出し方は次のとおりです。
|
|
今回の関数名は showAlert
ですので、次のように呼び出します。
|
|
パラメーター(引数)
パラメーターは、関数に渡す値です。引数(ひきすう)とも呼ばれます。
今回のように特定の処理を行う場合にはパラメーターは不要ですが、実行するごとにアラートへ表示する値を変えたいときは、パラメーターを利用します。
次のようにコードを書き換えてみましょう。
|
|
指定したパラメーター(message
)は、処理内で利用できます。
実行時に値を渡すことで、都度表示する値を変えることができます。
|
|
return
関数の処理部で return
を用いることで、値が返されます。この値を 戻り値
と呼びます。
今回は商品価格を渡すと、割り引き後の価格が返ってくるコードを書いてみましょう。
|
|
パラメーターprice
に 0.8 を乗算した値を return
します。
後は実行時に商品価格を渡してあげるだけです。
|
|
関数式
関数は、関数式を用いた定義もできます。
基本の形は次のとおりです。
|
|
関数名を省略して書くことが多いです。これを無名関数と言います。
|
|
実行時には、変数名で呼び出します。
|
|
関数宣言と関数式には、見た目以外にも違いがあります。
ここで理解しておくべきなのは、関数の巻き上げです。
JavaScript では基本的にコードが書かれた順に実行されるため、定義→実行の順でコードを書きます。
しかし、関数宣言の場合、定義より前に実行しても、関数が前に定義されたと判断されて正常に実行されます。
これが関数の巻き上げです。
|
|
一方、関数式の場合は、巻き上げが起こらずエラーになります。
|
|
不要なエラーを防ぐためにも、定義→実行の順にコードを書いていくようにしましょう。
アロー関数
ES2015 からはアロー関数が使えるようになりました。
アロー関数を使うと従来の書き方よりもシンプルに書くことができますが、一部制限があります。
詳しくは、
MDN Web Docs
を参照してください。
従来の関数式
|
|
アロー関数の関数式
|
|
スコープ
JavaScript では、値や式を参照できる範囲が決まっています。
これをスコープと言います。
次の例では変数 subjects
は関数内で定義されているため、関数外からはアクセスできません。
|
|
次の場合は、関数外で変数 subjects
を定義しているため、subjects
にはアクセスできます。
|
|
まとめ
関数を使うことで、多くのメリットがあります。
同じような処理をまとめることでコードの可読性が向上し、メンテナンスもしやすくなります。
また、どこからでも呼び出せるようになるので、再利用がしやすくなります。
次回は
イベント について学習しましょう。