Functionとfunction Function(){};の違い

Question

タイトル通りFunctionとfunction Function(){};は一体何が違うのでしょうか?

console.log(Function, function Function(){});

Answer 1

何だか重要なことが書かれていないので，補足しておきます。

・function文
もっとも一般的な関数定義です。functionというキーワードを用いたfunction文を使用することによって定義します。「文」とはJavaScriptに何か動作をさせるものです。後述する「式」は（副作用を除けば）基本的にそれ自体は何もしません。
function plus(x, y) {
return x+y;
}

・関数リテラル（関数式ともいう）
「式」として関数を定義するもの。「式」とはJavaScriptインタプリタが評価して値を生成できるものです。リテラルも式の一種です。リテラル式の値は、そのリテラルが表す値と同じです。リテラルには数値（100）や文字列（"hoge"）のような当たり前のものから，論理値（true）やオプジェクト（{x:2}）や配列（[1,2]）や正規表現（/foge/）のようなものまであります。
関数リテラルは関数定義をリテラル（式）として記述できるものです。リテラルなので，JavaScriptの式の中に記述することができます。関数リテラルもfunctionというキーワードを使用します。
function文との違いは，function文は「文」なので関数名が必要なのに対し，関数リテラルは「式」なので関数名が不要です（ただし書式上は関数名を記述しても構わない。そのため再帰関数も作れる）。
var plus = function(x, y){ return x+y; };

・Function()コンストラクタ
組み込みの関数コンストラクタです。new演算子を使用して "文字列" から関数を定義することができます。そのため，Function()コンストラクタを使用すると，実行時に動的に生成してコンパイルできます。また，Function()コンストラクタは生成した関数に名前をつけることはできません。常に匿名関数を生成します。
ただし，使い方が難しかったり，効率が悪いのであまり使用されません。Function()コンストラクタを使用するたびに関数本体が解釈されて新しい関数オブジェクトが生成されるので，頻繁に呼び出されると実行の効率が非常に悪くなります。
var plus = new Function("x", "y", "return x+y;");

さて，ここまで書いておいて，次に違いを述べます。
まずfunction文と関数リテラルの違いですが，定義する場所と使用できる（呼び出せる）箇所の条件が違います。以下のコードを見てください。

var result_plus = plus(1, 4);
//var result_sub = sub(5, 2);

var sub = function(x, y){ return x-y; };

var result_sub = sub(5, 2);

function plus(x, y) {
return x+y;
}

まず，function文はif文やwhile文の中で使用することはできません。関数の中で関数を定義する所謂入れ子型の関数の場合でも入れ子にする関数のトップレベルで定義しなければなりません。
それに対し，関数リテラルは式なので，式が書ける場所ならどこでも使用できます。したがってif文の中や，while文の中でも使用できます。
そして，上記のコードのコメント部分を外すとエラーとなります。JavaScriptのコードは上から順に実行されていくため，コメント部分が実行されるとき，変数subにはまだ何も代入されていません。そのため，関数呼び出しとして使用するとエラーとなるのです。
しかし，plus関数はfunction文によって一番下で定義されているのにもかかわらず，一番上の関数呼び出しはエラーとなりません。これによってfunction文は定義する箇所と呼び出す箇所は関係なく使用できることがわかります。
続いてFunction()コンストラクタで生成される関数とそれ以外の関数との違いですが，スコープの違いがあります。以下のコードを見てください。

var hoge = "global";
function createFunc() {
var hoge = "local";
return new Function("return hoge;");
}
alert(createFunc()()); // show "global"

上記のコードを実行すると何が表示されるかというと，「global」が表示されます。関数のスコープを知っている人なら，ここで「おや？」と思うはずです。本来ならグローバル変数であるcreateFunc()の外側のhogeは，ローカル変数であるcreateFunc()内のhogeに隠蔽されて，createFunc()によって生成される関数はローカル変数のhogeを参照すると考えます。事実，Function()コンストラクタで関数を生成する部分を関数リテラルに置き換えると上記のコードは「local」を表示します。しかし，Function()コンストラクタで関数を生成する場合は違います。Function()コンストラクタが生成する関数は所謂静的スコープを使用しません。常にトップレベルの関数としてコンパイルされるのです。

最後に，関数リテラル（関数式）で使用されるfunctionキーワードが演算子かどうかなんですが，
私は演算子ではないと考えています。例えば，演算子でよく話題にでるのが優先順位ですが，この優先順位を示す表にfunctionキーワードが列挙されているところを見たことがありません。下記のページでもfunctionキーワードについては言及されていません。
https://developer.mozilla.org/ja/docs/Web/JavaScript/Guide/Expressions_and_Operators#Operator_precedence
以下のページは翻訳ミスなのではないかと思っています。
https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Operators/function
「式と演算子」という章に式と演算子が混ざって説明されているため，翻訳した人がfunctionキーワードを演算子と勘違いしたのではないかと（しかもURLがReference/Operators/functionだし）。その証拠に上記のページの英語版（https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/function）を見てみると，説明として「The function keyword can be used to define a function inside an expression.」とあり，どこにも演算子（function operators）という記述は見当たりません。
また，上位のページ（https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Operators）を見てみると，「式と演算子（カテゴリ別）」となっており，functionキーワードは「基本式」に含まれています。
以下のECMAScript仕様書も読んでみましたが，function operatorsという項目は見つかりませんでした。
以上より，私は関数リテラル（関数式）で使用されるfunctionキーワードは演算子ではないと考えています。

Comments

[think49]

ECMAScript に言及されていますが、その括りで説明するなら、「FunctionDeclaration (関数宣言)」と「FunctionExpression (関数式)」です。
関数宣言は文ではありませんし、間数式はリテラル(定数)でもありません。
http://www.ecma-international.org/ecma-262/6.0/#sec-function-definitions
if 文内での関数宣言は ES6 で許容されるように仕様変更が加えられました。後方互換性の面(IE10- が未サポート)では使用すべきではありませんが、実装を制限して良い環境では利用できます。
http://qiita.com/Tomo_Yanagi/items/fcde8a73dfdb2786066f

[Lightfox]

コメントありがとうございます。

>関数宣言は文ではありませんし、間数式はリテラル(定数)でもありません。
そのとおりですね。本などの文献で説明されていることと，実際の仕様書では定義や表現が異なっていて，いざ説明する場合どちらに寄せるか迷ってしまいます。今回は本などの文献で得た知識にfunction演算子というものがなかったので，「あれ，じゃあECMAの仕様書にはそう書いてあるのかな？」と考えて，ECMAの仕様書を読んでfunction演算子を探してみた次第です。

>if 文内での関数宣言は ES6 で許容されるように仕様変更が加えられました。
そうなんですか。もう私の知識も古くなってきていますね・・・。しかし，需要あるのかこの仕様ｗ
補足していただき，ありがとうございました。

Answer 2

Functionはオブジェクト。
functionは無名関数を定義する式の演算子、または、関数宣言を行う文のキーワードです。

// オブジェクト
var f = new Function('return');

// 式
var f = function() {};
var o = {f:function f() {}};

// 文
function f() {}

Comments

[think49]

説明が誤解を生みそうなので補足します。
- 関数式/関数宣言もオブジェクトです。
- "function" は演算子ではありません(演算子なら対象を演算して演算結果を返さなければなりません)。
- 関数式には名前付き関数式もあるので「無名関数を定義する」では御幣があります。
- 関数宣言は「文」ではありません。

[kagi_shippo]

最初のthink49さんの回答が間違いだという指摘じゃなくて、ただの補足です。

例の意図は、

Function と function が「何であるか」が理解できれば
Function と function Function(){}; の違いがわかるはず

です。

とくに小文字の function については、使われる場所で２種類があることを示すために、例を３つのケースに分けました。

・Function　―「オブジェクト」そのものなので newでコンストラクト。

・function　―「式」で使われている場合は、演算子。

・function　―「文」で使われている場合は、キーワード。

あと、やりあいたくはないんですが、これを読む方の手前、間違った指摘は見過ごせないので、逆に指摘させてください。

> - "function" は演算子ではありません(演算子なら対象を演算して演算結果を返さなければなりません)。

無名関数の定義において functionは「演算子」です。
式の演算子なので、typeof 等と同様、演算結果を返します。
https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Operators/function

> - 関数式/関数宣言もオブジェクトです。
> - 関数宣言は「文」ではありません。

function文は、関数宣言「文」だと認識しています。
本当に「文」じゃないんですか？（function statement が文でないなら何・・・）

Answer 3

Function は built-in object ですが、function Function(){} は通常のユーザ定義関数です。

• Function - JavaScript | MDN

Re: SmithTarou さん