JavaScriptでの関数定義には2つあるみたいですが、違いや使い分けがわからないので教えて下さい。
パターン1
function hoge(a, b) {
...
}
パターン2
var hoge = function(a, b) {
...
}
どちらも実行するときはhoge(a, b);
でよいのでしょうか。
スタック・オーバーフローはプログラマーとプログラミングに熱心な人のためのQ&Aサイトです。すぐ登録できます。
登録してこのコミュニティに参加する両者の本質的な違いは、「式(Expression
)」か「文(Statement
)」かだと考えます。
パターン2の書き方は関数定義式と呼びます。
var hoge = function(a, b) {
...
}
JavaScriptには巻上げという特異な仕様があり、実際には上の記述は以下のように分解されます。
// varの宣言はスクリプトまたは関数の行頭で行われる(巻上げ)
var hoge;
// この時点でhogeへアクセスするとundefined
hoge = function(a, b) {
...
}
また、ここで行われている処理は、匿名関数を変数hoge
へ代入する処理です。hoge()
で実行することはできますが、この関数自体がhoge
という名前は持っていません。
名前を持たせるためには、以下のように宣言する必要があります。
var hoge = function fuga(a, b) {
// この中ではfuga()で再帰処理を書くことができる
...
}
// 外側ではhogeはfugaの名前を持つが、呼び出すときはhoge()を用いる
hoge.name // => "fuga"
対して、パターン1の書き方は関数宣言文と呼ばれます。
function hoge(a, b) {
...
}
文の巻上げは関数定義そのものに発生するという特徴があり、その結果、スコープ内であればどこからでも呼び出すことができます。
また、関数宣言文で定義した関数は、必ず名前を持つという特徴があります。
定義されるタイミングの違いについてmozillaに説明がありました。
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/function
これは実行されますが:
hoisted(); // logs "foo"
function hoisted() {
console.log("foo");
}
これは実行されません:
notHoisted(); // TypeError: notHoisted is not a function
var notHoisted = function() {
console.log("bar");
};
また、再帰したい場合などではパターン2の場合でも名前をつける場合があります:
var math = {
'factorial': function factorial(n) {
if (n <= 1)
return 1;
return n * factorial(n - 1);
}
};
違いはいつ定義されるかという点です。以下の例でfunctionOne
は実行時に定義されますが、functionTwo
は構文解析時に定義されます。
<script>
// Error
functionOne();
var functionOne = function() {
};
</script>
<script>
// No error
functionTwo();
function functionTwo() {
}
</script>
また、functionTwo
の定義方法では、strictモードの場合、条件節と共に使用することができなくなります。
<script>
"use strict";
if (test) {
// Error
function functionThree() { doSomething(); }
}
</script>
この例でもし"use strict"
がなければエラーにはならず、functionThree
はtest
の値に関係なく、定義されることになります。
この回答は、英語版にある同様の質問に対する@Gregさんの正解回答を簡易的に訳したものです。
javascript - var functionName = function() {} vs function functionName() {} - Stack Overflow
パターン2の使い道は、主にコールバックです。
関数を数値や文字列同様、変数に代入できます、ということは、関数に引数として渡すことも可能です。
非同期処理などで何か行い、完了時に知らせて欲しい場合は、次のようにコールバックすることができます。
var hoge = function(a, b) {
alert( "Completed." );
};
call( hoge );
function call( callback ){
// 何かいろいろを非同期などで…
callback( 100 , 200 ); // コールバックする
}
実行するときは hoge() でかまいません。どちらも同じ関数として扱うことができます。
違いは、「その行の実行時に関数が定義される」か、それとも「ファイルの読み込み時(パース時)に関数が定義されるか」です。
function hoge(a, b) {
// この関数は Javascript が読み込まれたときに定義される
}
var hoge = function(a, b) {
// この関数は変数 hoge の文が実行されるときに始めて定義される
}
この質問にありますが、「ループの中で関数を定義するな」というのが、Javascript の書き方で推奨されていたりします。
その理由の一つもこれです。ループの中で、
for (i = 0; i < 100; i++) {
var hoge = function(a, b) {
...
}
}
と定義してしまうと、実行時に始めて関数が100回定義されてしまうため、パターン1よりも負荷が高くなってしまいがちです。
参考: var functionName = function() {} vs function functionName() {}
3100さんのに同英語版の別解答から付け足すと、パターン1はhogeという名の関数を宣言してますが、パターン2では無名関数を宣言し、それを変数hogeに入れていることになります。これが実用上で起こせる違いとしては、
var hoge = function(){};
とするとスコープはローカルですが、
hoge = function(){};
とすることでグローバルに定義できます。
変数を使うことでeval()内で使ってもスコープが何処だかはっきりするので、デバッグが楽であり、ブラウザ間での互換性を保つことが出来ます(eval内で関数宣言するとブラウザごとに宣言される位置が違うらしい…)。
またパターン2は無名関数なので、Function.name(非標準、IEはサポートしてません)が以下のように空文字になります。
function hoge1(){};
var hoge2 = function(){};
console.log(hoge1.name);//"hoge1"
console.log(hoge2.name);//""
挙動の違いは少なくて実質交換可能でも、意味としての違いがあります。
例えばオブジェクトにいろいろ入れて返すような場合、つまり関数を値として生成したい場合はパターン2で書かれると思います。
一方、その関数を関数内で使いたい場合、つまり関数を関数として設置したい場合はパターン1で書かれると思います。
まあ挙動の差があまりないので、気分で変えたり、なるべくどちらかに統一しているような人も多いかもしれません。
因みに挙動の差としては巻き上げの他に、パターン1ではブロックスコープになるということがあります。
(function () {
"use strict"
var fn = function () { return 1 }
{
function fn() { return 2 }
console.log( fn() ) // 2
}
console.log( fn() ) // 1
})()
function fn()
が、変数fn
に上書きされているだけのように見えます。 関数がスコープを持つという点ではパターン1も2も変わらないと思います。擬似ブロックスコープを作るために、無名の即時関数が利用されることはよくありますが。
let
相当になる機能のことですね。ここでの「JavaScript」は前提としてメインストリームであるES5を指しているものと考えておりました、失礼しました。