関数の作成（定義）と実行

関数の作成（定義）

関数を作成（定義）するには、Functionオブジェクトまたは、function文を使用します。
さらにfunction文を使用した関数式（関数リテラル）と、ECMAScript 2015（ES6）で追加されたアロー関数式を使用した定義も行うことができます。

構文

// Functionオブジェクトの場合
var func = new Function(argumentN[, argumentN ...], functionStatements);

// function文の場合
function name([paramN[, paramN ...]]) {
	statements
}

// 関数式（関数リテラル）の場合
var func = function([paramN[, paramN ...]]) {
	statements
};

// アロー関数式
([paramN[, paramN ...]]) => {
	statements
};
// または
var func = ([paramN[, paramN ...]]) => {
	statements
};
引数 argumentN 関数の処理statementsに渡す引数の名前
最終引数 functionStatements 実行する処理
戻り値 func 生成された関数
引数 paramN 関数の処理statementsに渡す引数の名前
関数名 name 関数に付ける名前
付けなくてもよい
処理 statements 実行する処理

サンプルコード

JavaScript

// Functionオブジェクトでの定義の場合
var foo = new Function(a, b, 'return a + b');

// function文での定義の場合
function foo(a, b) {
	return a + b;
}

// function文を使用して関数（無名関数）を変数に代入し定義する場合（関数式）
var foo = function(a, b) {
	return a + b;
};

// アロー関数式での定義の場合
var foo = (a, b) => {
	return a + b;
};

作成（定義）した関数の実行

作成（定義）した関数を実行を行うには、次のように関数名()とすることで実行できます。
丸括弧内には関数に渡したい値（引数）を指定します。

JavaScript

// 引数なし
var result = foo();

// 引数あり
var result = foo(1, 2);

なお、引数の有無のチェックを行わないと、エラーとなる場合があるので注意する必要があります。

アロー関数式について

アロー関数式は、いくつかの特徴があります。

今までより短く書くことができる

冒頭のサンプルコードにもありました通り、function文などよりも短く書くことができます。

// function文
var foo = function(a, b) {
	return a + b;
};

// アロー関数式
var foo = (a, b) => {
	return a + b;
};

引数が1つの場合は丸括弧が省略できる

定義の際に引数が1つしかない場合は丸括弧を省略することができます。
ただし、スプレッド構文...を使用する場合は省略することはできません。

// 省略しない
var foo = (a) => {
	処理
};

// 省略する
var foo = a => {
	処理
};

// 省略するスプレッド構文
var foo = (...args) => {
	処理
};

1行でreturn文やブロック（中括弧）を省略できる

関数内の処理が1行として読めるコードでreturn文で値を返している場合は、return文とブロック（中括弧）を省略することができます。

// 省略しない
var foo = (a, b) => {
	return a + b;
};

// 省略する
var foo = (a, b) => a + b;

thisは親のスコープになる

通常関数は実行するタイミングでthisが定められるため、メソッドなどはその所属するオブジェクトを返したり、bindメソッドなどによって指定したthisを返します。

var foo = {
	bar : function() {
		console.log(this);
	}
};

foo.bar(); // foo

しかしアロー関数式ではthisは定義している関数の親であるthisの値を返します。

var foo = {
	bar : () => {
		console.log(this);
	}
};

foo.bar(); // Window

bar関数の親であるfooオブジェクトはthisがWindowオブジェクトであるためWindowオブジェクトを返します。
なので、bindメソッドなどでthisを強制的に任意の値に指定してもその値を返しません。

// function文
var foo = {
	bar : function() {
		console.log(this);
	}
};

foo.bar = foo.bar.bind(123);

foo.bar(); // 123（正確にはNumberオブジェクトの値）

// アロー関数式
var foo = {
	bar : () => {
		console.log(this);
	}
};

foo.bar = foo.bar.bind(123);

foo.bar(); // Window

newよるインスタンス生成（コンストラクタ呼び出し）ができない

アロー関数式はnewによるインスタンスの生成（コンストラクタの呼び出し）ができません。

// function文
var foo = function() {
	処理
};

new foo(); // Object

// アロー関数式
var foo = () => {
	処理
};

new foo(); // エラー

JavaScript逆引きリファレンス一覧へ戻る