JavaScript

In JavaScript, a function is a piece of code that groups a specific set of operations into a single unit, making it easy to call and reuse.

function

　function（関数）は、あるまとまった処理をひとつにまとめ、再利用可能にするための仕組みです。

関数の基本

なぜ関数を使うのか？

再利用性
繰り返し使う処理をひとまとめにしておくことで、コードの重複を減らし、保守性を高めます。
可読性
名前付きの関数に処理をまとめることで、プログラムの構造をより分かりやすくします。
分割統治
大きな問題を小さい機能ごとに分割することで、複雑なプログラムを整理しやすくなります。

関数の基本構文

　JavaScriptでは、もっともベーシックな宣言方法として以下のような構文があります。

JavaScript

function 関数名(引数1, 引数2, ...) {
	// 関数が実行したい処理
	return 戻り値; // 必要に応じて戻り値を返す
}
関数名
呼び出しの際に使用する名前。
引数
外部から受け取る値（0個以上指定可能）。
return文
呼び出し元に値を返す。何も指定しない場合は undefined が返る。

Sample

JavaScript

function greet(name) {
	return "Hello, " + name + "!";
}

console.log(greet("Taro")); // "Hello, Taro!"

Sample

HTML

<p id="smp1"></p>
<script>
	function greet(name) {
		return "Hello, " + name + "!";
	}

	document.getElementById('smp1').textContent = greet("Taro");
</script>

関数を定義する

　関数を扱うためには、まず関数を定義（関数の宣言や関数定義文（function statement）とも呼ばれます）する必要があります。JavaScript で関数を定義するにはいくつかの方法があります。

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

　もっとも代表的な関数定義の方法として「関数宣言」があります。 関数宣言は次のような記法で関数を定義します。

JavaScript

function 名前 ( 引数 ) {
	関数を定義する JavaScript の文
}

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

JavaScript

/** 引数で指定した名前に挨拶をする文字列を返す関数 */
function hello1(name) {
	var message = "Hello, " + name
	return message
}

　宣言の中にある「引数」という言葉についてですが、「引数」とは関数に渡して処理の中でその値を使うことができるものです。

　ここでは、hello1 関数の引数に変数 name が指定されており、その変数 name は関数の処理の中で「Hello, ◯◯◯（引数で指定した名前）」という文字列を返却するように組み込まれています。

　同じような仕組みの処理を何度も必要とするときに引数を利用すれば、引数の値を変えるだけで同じ仕組みで算出された別の値を何個も取得できるようになります。

　また、値や文字列などを関数の外に返却（出力）する処理は、上記コード中にもあるように return 返却値 という記法で書きます。return文は書かなくても問題ありませんが、その場合その関数は値を何も返却しない関数になります。

関数式で関数を定義する

　JavaScript において関数は function 型のオブジェクトです。そのため、関数は式として変数に渡すことも出来ます。式として関数を作成する記法を、関数式と呼びます。

　関数式で関数を定義する実際のコードは次のようになります。

JavaScript

/** 引数で指定した名前に挨拶をする文字列を返す関数 */
var hello2 = function(name) {
	var message = "Hello, " + name
	return message
}

　このように var 変数名 = function(引数) { 処理 } という記法で変数名の関数を作成できます。上記コードでは、hello2 という名前の変数が関数になっています。

アロー関数式で関数を定義する

　前述の関数式による関数定義を発展させた方法として、アロー関数式を用いた方法があります。

　アロー関数式とは、ECMAScript 2015（ES2015）という2015年に公開された JavaScript の新しい標準に含まれる記法です。従来の関数式のいくつかの要素を省略し、その他の細かな挙動を調整した式です。

　アロー関数式で関数を定義する実際の方法は次の通りです。

JavaScript

/** 引数で指定した名前に挨拶をする文字列を返す関数 */
var hello3 = name => {
	var message = "Hello, " + name
	return message
}

　関数式では式の右辺は function(引数) { 処理 } という記法で書かれていました。 アロー関数式ではこの記法のうち function や、引数を囲む括弧などが省略されています（ただし引数が複数ある場合にはこの括弧は省略出来ません）。

　また、関数の処理を囲んでいる波括弧ですが、これについても『波括弧内の処理が一行である』という条件を満たせば省略が可能になります。

　この条件を満たし波括弧を省略した場合、関数が値を返却するreturn文の『return』も省略が可能です。

関数を呼び出す

　前項で関数を定義する方法を解説しました。しかし関数は定義しただけでは役に立ちません。定義した関数を呼び出して利用するにはどのように書けばよいのでしょうか。

関数の呼び出し方

　関数を定義するには様々な方法がありました。しかし定義するときと異なり、関数を使用するときには基本的にひとつの方法しかありません。

JavaScript

// 関数の定義
function hello1(name) {
	var message = "Hello, " + name
	return message
}
// 関数の呼び出し
var result1 = hello1("yamada")

// コンソールへ結果を出力
console.log(result1)

実行結果

Hello, yamada

　このように、関数を呼び出すには 関数名(引数として渡す値) という記法で書きます。

　上記コードでは関数を呼び出した式を左辺の変数 result1 に格納していますが、この変数には hello1 関数を呼び出した実行結果が設定されています。実行結果とは、前項で説明した return 文で返却した値のことです。

　また、引数の存在しない関数を呼び出す場合ですが、その場合は呼び出す際にも引数を設定する必要はありません。