JavaScript 関数(function)の基礎を学ぶ

実務経験1ヶ月、エディターの若栁です。
JavaScriptの関数(function)について、実務の中で学んだことを書いていきます。

関数とは?

関数は、任意の処理を実行するコードをまとめ、名前をつけたもの。
関数を使うことで、

  • 複数の処理をまとめられる
  • 同じ処理であれば、関数を再利用できる
  • 同じコードを何度も書かなくていいので、結果、コードもすっきりする

というメリットがあります。

関数の宣言方法について

関数は、自分で名前をつけられます。名前をつける時は、ローワーキャメルケースで書くのが一般的です。
JavaScriptで名前をつける時のルールを知りたい方は、以前の「JavaScript編命名規則」を読んでください!

関数は、次のように宣言します。

こう書いても「関数を作りました!」と宣言するだけなので、その場で実行はされません。
この関数を使って処理をしたい時には、

と呼び出して実行します。

引数とは?

引数は、関数の呼び出し元が与える値のこと。
以下は、aとbという2つの引数を与えて、コンソールにaとbの和を出力する処理を宣言したコードです。

関数を呼び出し、引数にa=5,b=7を与えると、5と7の和=12がコンソールに出力されます。

引数は省略もできます。

return文の使い方

関数の中でreturn文を使うことで、その関数によって返される値(=戻り値)も指定できます。
下のコード例だと、returnの後ろにある「’こんにちは、’ + name + ‘さん。’」が戻り値です。
nameは引数なので、指定された引数の文字列が結合されて、「こんにちは、●●さん。」と表示されます。
戻り値の指定は、return文でしかできません。

関数を変数に入れて、その変数を呼び出しても戻り値を取得できます。

無名関数と即時関数

その他、関数にもパターンがあるのでさらっと紹介します。

無名関数(匿名関数)とは?

無名関数は、関数名が省略された関数のこと。
変数の中に関数の処理を定義すると、関数名を省略できます。

変数hello()を使えば関数を呼び出せるので、関数名は省略できます。これが無名関数です。

関数を使うメリットとして「同じ処理であれば、関数を再利用できる」という点を最初に挙げましたが、
再利用しない関数であれば、その場で宣言して実行されればよい、とも言えます。
その点では、無名関数は再利用しない関数向きだとも言えます。

即時関数とは?

即時関数は、関数の宣言と実行が同時に行われる関数のこと。
関数名を省略できるので、無名関数の仲間とも言えます。

無名関数の書き方から、さらに変数名を省略していくと即時関数の形式になります。
ですが、単に変数定義のvar helloや、変数名helloを省略しただけではエラーが出ます。

そのエラーを回避するために、関数宣言部分全体を()で囲みます。

宣言と同時に実行される、即時関数ができました。

この場合の()は、グループ化演算子という名前で、()で囲うことで関数の宣言と処理がグループ化されて、エラーなく実行されます。
先に挙げた方法に比べると、関数名を定義しないのでコードが煩雑にならない、というメリットがあります。

以上で、JavaScript 関数(function)の基礎を学ぶ、の回を終わります。

お世話になったURL
Google JavaScript Style Guide 和訳
関数-JavaScript(MDN)
JavaScript Function Definitions(w3school.com)
グループ化演算子-JavaScript(MDN)