関数(function)は JavaScript における基本的な構成要素のひとつです。うまく利用すれば処理を目的ごとに分割したり、似たような処理を何度も書かなくて済むようにできる関数は、JavaScript でプログラミングをするにあたって必要不可欠な存在であり、また、他の多くのプログラミング言語においても標準的に備わっている基本的な機能です。全ての処理を関数を使わずに書いた場合と、関数を使って書いた場合とではコードの文量が何倍にも変わります。場合によっては何倍どころか何十倍、何百倍になることもあります。
関数とは、JavaScript での手続き…つまり、タスクや値計算などの複数の処理をひとまとまりにしたものです。メソッドと呼ばれることもあります。前述の通り、JavaScript における基本的な構成要素のひとつであり、Function 型のオブジェクトとして扱われます。関数をオブジェクトとして扱うことが出来るのは JavaScript 特有の特徴です。関数を使うには、呼び出したいスコープ内のどこかでそれを定義する必要があります。
関数を扱うためには、まず関数を定義(関数の宣言や関数定義文(function statement)とも呼ばれます)する必要があります。JavaScript で関数を定義するにはいくつかの方法があります。
もっとも代表的な関数定義の方法として「関数宣言」があります。 関数宣言は次のような記法で関数を定義します。
function 名前 ( 引数 ) {
関数を定義する JavaScript の文
}
実際のコードは次のようになります。
/** 引数で指定した名前に挨拶をする文字列を返す関数 */
function hello1(name) {
var message = "Hello, " + name
return message
}
宣言の中にある「引数」という言葉についてですが、「引数」とは関数に渡して処理の中でその値を使うことができるものです。
ここでは、hello1 関数の引数に変数 name が指定されており、その変数 name は関数の処理の中で「Hello, ◯◯◯(引数で指定した名前)」という文字列を返却するように組み込まれています。
同じような仕組みの処理を何度も必要とするときに引数を利用すれば、引数の値を変えるだけで同じ仕組みで算出された別の値を何個も取得できるようになります。
また、値や文字列などを関数の外に返却(出力)する処理は、上記コード中にもあるように return 返却値 という記法で書きます。return文は書かなくても問題ありませんが、その場合その関数は値を何も返却しない関数になります。
JavaScript において関数は function 型のオブジェクトです。そのため、関数は式として変数に渡すことも出来ます。式として関数を作成する記法を、関数式と呼びます。
関数式で関数を定義する実際のコードは次のようになります。
/** 引数で指定した名前に挨拶をする文字列を返す関数 */
var hello2 = function(name) {
var message = "Hello, " + name
return message
}
このように var 変数名 = function(引数) { 処理 } という記法で変数名の関数を作成できます。上記コードでは、hello2 という名前の変数が関数になっています。
前述の関数式による関数定義を発展させた方法として、アロー関数式を用いた方法があります。
アロー関数式とは、ECMAScript 2015(ES2015)という2015年に公開された JavaScript の新しい標準に含まれる記法です。従来の関数式のいくつかの要素を省略し、その他の細かな挙動を調整した式です。
アロー関数式で関数を定義する実際の方法は次の通りです。
/** 引数で指定した名前に挨拶をする文字列を返す関数 */
var hello3 = name => {
var message = "Hello, " + name
return message
}
関数式では式の右辺は function(引数) { 処理 } という記法で書かれていました。 アロー関数式ではこの記法のうち function や、引数を囲む括弧などが省略されています(ただし引数が複数ある場合にはこの括弧は省略出来ません)。
また、関数の処理を囲んでいる波括弧ですが、これについても『波括弧内の処理が一行である』という条件を満たせば省略が可能になります。
この条件を満たし波括弧を省略した場合、関数が値を返却するreturn文の『return』も省略が可能です。
前項で関数を定義する方法を解説しました。しかし関数は定義しただけでは役に立ちません。定義した関数を呼び出して利用するにはどのように書けばよいのでしょうか。
関数を定義するには様々な方法がありました。しかし定義するときと異なり、関数を使用するときには基本的にひとつの方法しかありません。
// 関数の定義
function hello1(name) {
var message = "Hello, " + name
return message
}
// 関数の呼び出し
var result1 = hello1("yamada")
// コンソールへ結果を出力
console.log(result1)
実行結果
Hello, yamada
このように、関数を呼び出すには 関数名(引数として渡す値) という記法で書きます。
上記コードでは関数を呼び出した式を左辺の変数 result1 に格納していますが、この変数には hello1 関数を呼び出した実行結果が設定されています。実行結果とは、前項で説明した return 文で返却した値のことです。
また、引数の存在しない関数を呼び出す場合ですが、その場合は呼び出す際にも引数を設定する必要はありません。