JavaScriptのfunctionを基本から解説

JavaScriptにおける基本的な構成要素のひとつに関数（function）があります。
関数を利用することで目的ごとに処理を分割したり、似たような処理を何度も書かなくて済むようにできる関数は、JavaScriptでプログラミングをするにあたって必要不可欠な存在です。

今回はJavaScriptで関数を定義し、実際に呼び出して利用するための方法をコードを交えて解説していきます。

JavaScriptにおける関数（function）とは

関数は、JavaScriptにおける基本的な構成要素のひとつであり、また他の多くのプログラミング言語においても標準的に備わっている基本的な機能です。

関数（function）とはなにか

関数とは、複数の処理をひとまとまりにしたものです。メソッドと呼ばれることもあります。
また、前述の通り、JavaScriptにおける基本的な構成要素のひとつであり、Function型のオブジェクトとして扱われます。関数をオブジェクトとして扱うことが出来るのはJavaScript特有の特徴です。

関数を使うメリット

関数を利用することで目的ごとに処理を分割したり、似たような処理を何度も書かなくて済むようになります。
全ての処理を関数を使わずに書いた場合と、関数を使って書いた場合とではコードの文量が何倍にも変わります。場合によっては何倍どころか何十倍、何百倍になることもあります。

関数を定義する

関数を扱うためには、まず関数を定義（作成）する必要があります。JavaScriptで関数を定義するにはいくつかの方法があります。
ここではそれらの中から代表的な3つの方法について解説していきます。

関数宣言で関数を定義する

もっとも代表的な関数定義の方法として「関数宣言」があります。
関数宣言は function 関数名(引数) { 処理 } という記法で関数を定義します。

実際のコードは次のようになります。

/** 引数で指定した名前に挨拶をする文字列を返す関数 */
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文で返却した値のことです。
また、引数の存在しない関数を呼び出す場合ですが、その場合は呼び出す際にも引数を設定する必要はありません。