JavaScriptには、関数を作るための方法がいくつか存在します。
その一つに、関数を変数に代入して扱う関数式というものがあります。
今回は、関数式とは何か、また使い方について解説していきます。
関数式
関数式とは、関数を変数に代入して値として扱う式のことです。
定義した関数式は、変数を呼び出すことで関数を実行することができます。
関数式の定義は、他の値と同じように変数に代入して行います。
const 変数名 = function() {
実行する処理;
};関数式は以下の要素で構成されています。
- 変数宣言：
let/const＋任意の名前＋代入演算子= functionキーワード：関数宣言に必要な予約語＋括弧()- 関数の中身：ブロック
{}＋実行する処理＋セミコロン;
関数式は、関数宣言と異なり、functionキーワードの後ろに書く関数名は省略できます。
関数名が無くても、変数名を使用して関数を参照することができるからです。
// 関数式は関数名を省略できる
const 変数名 = function(){
};
// 関数宣言は関数名の省略ができない
function 関数名() {
}
このように、名前を持たない関数であることから、無名関数や匿名関数と呼ばれることもあります。
厳密には、関数名を付けて関数式を定義することもできますが、関数名を関数の外から呼び出すことはできません。
関数の中からは呼び出すことができるため、意図的に関数の中で呼び出したい場合に利用されますが、一般的には関数式は関数名を付けずに使われます。
次のコードを見てください。
const sayHi = function() {
console.log('Hello');
};
上記は、関数を作成し、それを変数sayHiに代入したコードです。
関数は、定義されている内容に関わらず、sayHiという変数に格納されている値です。
変数が呼び出されると、そこに代入されている関数が実行され、結果的に'Hello'とコンソールに出力されます。
関数式の呼び出し
関数式で定義した関数は、変数名と括弧()で呼び出すことができます。
変数名();
では、先ほど定義した関数を呼び出してみます。
const sayHi = function() {
console.log('Hello');
};
// 関数の呼び出し
sayHi();
// "Hello!"
このように変数を呼び出すことで、関数の中に記述してあるconsole.log('Hello!')を実行できます。
末尾のセミコロン
通常、文の末尾にはセミコロン;を付けますが、コードブロックを持つ構文構造の末尾にはセミコロン;は必要ありません。
let value = 3; // セミコロン要
if (true) {
console.log('true')
} // セミコロン不要
関数宣言の場合も、コードブロックを持つ文に値するため、末尾のセミコロンは不要です。
function sayHi() {
...
} // セミコロン不要
しかし、関数式は末尾にセミコロンを持ちます。
const sayHi = function() {
..
}; // セミコロン要
一見、コードブロックがあるからセミコロンは不要なのではないかと思うかもしれません。
しかし、関数式で定義された関数は、通常の文の中で使われていることが見えてきます。
const sayHi = ...;
このセミコロンは関数式とは関係なく、文の終わりであることが分かります。
そのため、通常の文と同じように、文末のセミコロンが推奨されるということです。
引数と戻り値のある関数式
関数式には、オプションで引数と戻り値を指定することができます。
関数宣言と同じように任意の値を扱うことが可能です。
const calcTotal = function(x, y) {
let sum = x + y;
return sum;
};
let total = calcTotal(10, 5);
console.log(total); // 15
まとめ
今回は、関数式の使い方を解説しました。
// ポイント
* 関数式は、関数を変数に代入して値として扱う式
* 変数名()で関数を呼び出せる
* 関数式の場合、関数名は通常不要
* 関数式で関数宣言を行う場合、文末のセミコロンを付ける
まずは構文をしっかり身に付けて、使い慣れていきましょう。
合わせて読みたい関数入門シリーズ
第1回：関数と宣言
第2回：関数と引数
第3回：関数と戻り値
第4回：関数式（当記事）
第5回：関数オブジェクト
第6回：argumentsオブジェクト
第7回：アロー関数
第8回：コールバック関数
第9回：関数とメソッド
コメント