javascriptにおける関数文と関数式の違いとは何なのでしょうか？

Question

https://jsprimer.net/basic/statement-expression/

上記リンク先でjavascriptの「文と式」について勉強をしています。

上記リンク先の記述より「式」とは「評価値を生成し、変数に代入できるもの」、「文」とは「if(){}の様に変数に代入できないもの」と学んだのですが

上記リンク内「function宣言（文）とfunction式」の所に

// learn関数を宣言する関数宣言文
function learn() {
}
// 関数式をread変数へ代入
const read = function() {
};

とありました。

上記コードで「function learn() {}」が「関数宣言文」、「function() {};」が「関数式」を表していると思うのですが、このコードだと関数宣言「文(function() {
};)」を「変数(read)に代入」していて最初の「文とは変数に代入できない」という定義に反するのではないかと思い悩んでおります

どなたかここらへんの違いを教えて頂けないのでしょうか？

Comments

[Zuishin]

式が変数に代入できないとどこに書いてありますか？

[tanakashouzoux]

すいません！

式と文が逆でした????

質問を訂正させて頂きます！

Answer 1

jsprimerの間違い

前質問で私がjsprimerを勧めた手前恐縮ですが、jsprimerの説明に一部間違いがある事を前置きしておきます。

• 文と式 · JavaScript Primer #jsprimer

function宣言（文）とfunction式

「関数と宣言」の章において、関数を定義する方法を学びました。 functionキーワードから文を開始する関数宣言と、変数へ関数式を代入する方法があります。
関数宣言（文）と関数式は、どちらもfunctionというキーワードを利用しています。

「関数宣言(function宣言)」が文(Statement)の一部とする説明ですが、関数宣言は宣言の一部であって、文の一部では有りません。
これはJavaScriptの根幹仕様「ECMAScript」を読むと分かります。

• JavaScript - 関数と変数の巻き上げの違いとは｜teratail
• PHP - 宣言と定義の違いについて｜teratail

---

翻って、冒頭の文に戻りますが、

• 文と式 · JavaScript Primer #jsprimer

文と式

本格的に基本文法について学ぶ前に、JavaScriptというプログラミング言語がどのような要素からできているかを見ていきましょう。

これも厳密には間違いで「文」と「式」以外にも構成要素があります。
最新のECMAScript2019仕様でも、**文(Statement)と宣言(Declaration)**は明確に区別されています。

• 13 ECMAScript Language: Statements and Declarations - ECMAScript® 2019 Language Specification

Syntax

Statement[Yield, Await, Return]:
  BlockStatement[?Yield, ?Await, ?Return]
  VariableStatement[?Yield, ?Await]
  EmptyStatement
  ExpressionStatement[?Yield, ?Await]
  IfStatement[?Yield, ?Await, ?Return]
  BreakableStatement[?Yield, ?Await, ?Return]
  ContinueStatement[?Yield, ?Await]
  BreakStatement[?Yield, ?Await]
  [+Return]ReturnStatement[?Yield, ?Await]
  WithStatement[?Yield, ?Await, ?Return]
  LabelledStatement[?Yield, ?Await, ?Return]
  ThrowStatement[?Yield, ?Await]
  TryStatement[?Yield, ?Await, ?Return]
  DebuggerStatement
Declaration[Yield, Await]:
  HoistableDeclaration[?Yield, ?Await, ~Default]
  ClassDeclaration[?Yield, ?Await, ~Default]

---

この文と式の違いを見ると、関数宣言文にはセミコロンがなく、関数式にはセミコロンがあります。 このような、違いがなぜ生まれるのかは、ここまでの内容から説明できます。

関数宣言（文）で定義したlearn関数には、セミコロンがありません。 これは、ブロックで終わる文にはセミコロンが不要であるためです。

関数宣言(FunctionDeclaration)の {} はブロック(Block)ではありません。

• 14.1 Function Definitions - ECMAScript® 2019 Language Specification

FunctionDeclaration[Yield, Await, Default]:
  function BindingIdentifier(FormalParameters) { FunctionBody }
    function (FormalParameters){ FunctionBody }

FunctionDeclaration の {}がBlockであるならば、Syntaxは下記のようになっているべきでした。
上述に { FunctionBody } とあるように、この {} は関数宣言独自の特別なSyntaxです。

FunctionDeclaration
  function BindingIdentifier(FormalParameters) Block

宣言(Declaration)と文(Statement)と式(Expression)

まず、大前提ですが、

• 宣言(Declaration)
• 文(Statement)
• 式(Expression)

これらは全て文法(Syntax)の話です。
今まで紹介した ECMAScript2019 上でも全てSyntaxの欄に定義されていました。

• ECMAScript 2019のSyntax上で Declaration とある場所に「宣言」を書くことが出来ます
• ECMAScript 2019のSyntax上で Statement とある場所に「文」を書くことが出来ます
• ECMAScript 2019のSyntax上で Expression とある場所に「式」を書くことが出来ます

そして、重要な違いは

• 宣言と文は単体で動作する
• 式は単体では動作せず、文または宣言の一部としてしか使用できない

という性質にあり、jsprimmer上では、それを

• 文と式 · JavaScript Primer #jsprimer

評価した結果を変数に代入できるものは式であるという理解で問題ありません。

// (中略)

// 式の評価値を変数に代入
const total = 1 + 1;

と説明していますが、これは const 宣言のSyntaxを追いかけていくと、

• 13.3.1 Let and Const Declarations - ECMAScript® 2019 Language Specification

LexicalDeclaration
  LetOrConstBindingList
LetOrConst:
  let
  const

「LexicalDeclaration -> BindingList -> LexicalBinding -> Initializer -> AssignmentExpression」となり、「Expression」の一部である「AssignmentExpression」にたどり着く事を表しています。

• 12.15 Assignment Operators - ECMAScript® 2019 Language Specification

式文(ExpressionStatement)

そうはいっても、式(Expression)を単体で動作させたい状況もあるので、式文(ExpressionStatement)という構文があります。
これは式(Expression)を一つ記述し、; で終わる簡単なSyntaxです。
ただし、文(Statement)と宣言(Declaration)との整合性をとる為に、特別ルールが規定されています。

• 13.5 Expression Statement - ECMAScript® 2019 Language Specification

NOTE: An ExpressionStatement cannot start with a U+007B (LEFT CURLY BRACKET) because that might make it ambiguous with a Block.
An ExpressionStatement cannot start with the function or class keywords because that would make it ambiguous with a FunctionDeclaration, a GeneratorDeclaration, or a ClassDeclaration.
An ExpressionStatement cannot start with async function because that would make it ambiguous with an AsyncFunctionDeclaration or a AsyncGeneratorDeclaration.
An ExpressionStatement cannot start with the two token sequence let [ because that would make it ambiguous with a let LexicalDeclaration whose first LexicalBinding was an ArrayBindingPattern.

Google翻訳結果
「注: ExpressionStatementをU + 007B（LEFT CURLY BRACKET）で開始することはできません。
これは、Blockがあいまいになる可能性があるためです。
ExpressionStatementをfunctionまたはclassキーワードで始めることはできません。
これは、FunctionDeclaration、GeneratorDeclaration、またはClassDeclarationがあいまいになるためです。
AsyncFunctionDeclarationまたはAsyncGeneratorDeclarationがあいまいになるため、ExpressionStatementを非同期関数で始めることはできません。 ExpressionStatementは、2つのトークンシーケンスlet [で始めることはできません。
これは、最初のLexicalBindingがArrayBindingPatternであるlet LexicalDeclarationで曖昧になるためです。」

これがjsprimerで「functionキーワードから文を開始する関数宣言」と説明されている理由ですが、対比の為に「式文はfunctionキーワードで始める事はできない」とあると、分かりやすかったかもしれません。

まとめ

• 式は単体で動作せず、文または宣言の一部として動作する
• 関数宣言は function キーワードで始まらなければならない
• 式文は function キーワードで始める事はできない

更に要約すると、次のようになります。

• function キーワードで始められるのは関数宣言のみ
• 間数式を格納している文または宣言(※関数宣言を除く)は function キーワードで始める事は出来ない

[参考] function キーワードで始まらないコード

「名前のない即時関数」を書く場合を想定すると、function キーワードの違いが分かります。
下記コードはGoogle Chromeで実行した結果ですが、

function(){} // SyntaxError: Function statements require a function name

functionキーワードで始められるのは関数宣言のみの為、JavaScriptエンジンはこのコードを関数宣言として扱おうとしますが、名前がない関数宣言が記述されている為、SyntaxError(文法エラー)を返しています。
(※前述の通り、関数宣言は文ではない為、エラーメッセージ内の "Function statements" は間違いです)

() で括って、functionキーワードで始まらない記述にすれば、エラーは発生しません。

(function(){}); // エラーにならない

(); を末尾につけて、実行すれば、よく見る即時関数の形式になります。

(function(){
  console.log('Hello, World!');
})();

(function(){
  console.log('Hello, JavaScript!');
}());

• function キーワードで始まっていないので、このコードは「関数宣言(FunctionDeclaration)」ではありません
• function キーワードで始まっていないので、このコードは「式文(ExpressionStatement)」です

Re: tanakashouzoux さん

Comments

[think49]

一部、コメントで「名前付き関数式」の優位性、「関数式と関数宣言の機能的な違い」の議論が白熱していますが、本題は「jsprimerの説明文の読み方」と解釈したので、そこには触れませんでした。

過去に回答/質問で言及しているので、気になる方は下記を参考にして頂ければと思います。
https://teratail.com/questions/24115
https://teratail.com/questions/27900#reply-43667

[tanakashouzoux]

think49さん
わざわざご丁寧に２つも回答頂きありがとうございますm(__)m

少し拝読するのに時間がかかっております（私の理解力の無さの為）ので、また改めてコメントさせて頂きたいと思いますm(__)m

Answer 2

MDNの関数式の項に解説はあります。

関数式と関数宣言の主な相違点は、**関数名です。関数式では、無名関数を生成するために、関数名を省略できます。関数式は、定義するとすぐに実行する IIFE (即時実行関数)として使用できます。**詳細については、関数の章を参照してください。

あと

このコードだと関数「式」を「変数に代入」していて最初の「式とは変数に代入できない」という定義に反するのではないかと思い悩んでおります

よく考えようとされていて感心するところではありますが、今回は「関数」「式」と２つの名詞を組み合わせたものではなく**「関数式」という1つの固有名詞**として認識した方が良いと思います。
雑に説明すると「そういうもの」です。

Comments

[tanakashouzoux]

わざわざご丁寧に回答頂きありがとうございますm(__)m

「関数式」という1つの固有名詞として認識すると良いのですね！
ありがとうございます！！！

質問できる人もおらず自分の知識が正しいのか確認する事さえ出来なかったのでご回答頂けて本当にありがたいですm(__)m

ちなみに「関数宣言文」も1つの固有名詞として考えた方がよろしいのでしょうか？

[Zuishin]

https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Statements/function

> 関数は式の中でも宣言できます (関数式をご覧ください)。

ためしに名前をつけた function 宣言を変数に入れてみましたが、問題なく代入できました。関数式という特別なものがあるのではなく、function 宣言は元々式なのではないでしょうか？

[m.ts10806]

仕様が気になるなら日本語解説が充実しているMDNです。

[m.ts10806]

>関数式という特別なものがあるのではなく、function 宣言は元々式なのではないでしょうか？

そんな気がします。結構「式」って意味が広いですね。

[maisumakun]

> 関数式という特別なものがあるのではなく、function 宣言は元々式なのではないでしょうか？

巻き上げの挙動が違います。

function宣言は同じスコープであれば、宣言より前の行でも呼べますが、関数式を変数に代入する場合は、代入が実行されてからでないと呼べません。

[Zuishin]

文しかなかった function 宣言が式に拡張されたという歴史的経緯がありそうな予感がします。

[m.ts10806]

>巻き上げの挙動が違います。

これは1つ勉強になりました。ありがとうございます。

[tanakashouzoux]

Zuishinさん、m.ts10806さん、わざわざ何度もご指導ありがとうございますm(__)m

初心者なもので頭が少し混乱してきたのですが、上記サイトでは「function宣言(文)」と書かれていたのですがこれは本当は「function宣言(式)」ということなのでしょうか？

それとも何か特殊な事情があるのでしょうか...??

[Zuishin]

なるほど、巻き上げの挙動を確かめてみましたが、確かに違いますね。

[tanakashouzoux]

maisumakunさん今回もご指導ありがとうございますm(__)m

前回御指導頂いた時に巻き上げの挙動の違いを教えて頂き、先日上記サイトで巻き上げを目にした時は「これが指導頂いた巻き上げか！知ってる！！！」と感動した所でした！

本当にありがとうございます！
function宣言では巻き上げが行われ、関数式は巻き上げが行われないんですよね♪

[m.ts10806]

tanakashouzouxさん
自身でも短いコード書いてみて挙動確かめてみると理解が深まると思います。
（個人的にはZuishinさんが試したコードが気になってます）

[Zuishin]

m.ts10806 さん、宣言と式の違いを試したというか、変数に入れたらせっかく付けた名前が無かったことになったので、普通の const と function の巻き上げの違いになりました。

[maisumakun]

> 変数に入れたらせっかく付けた名前が無かったことになったので

関数式で「function 名前()」のようにした場合の名前は、その関数の内側でだけ有効です（再帰呼び出ししたい場合に便利です）。

[Zuishin]

maisumakun さんありがとうございます。内側からなら変数に入れる前に使うことができるということですね。おぼえておきます。

[m.ts10806]

Zuishinさん maisumakun さん
ありがとうございます。理解できました。

[tanakashouzoux]

Zuishinさん　maisumakunさん　m.ts10806さん
皆さん本当にありがとうございますm(__)m

それでなんですが、関数宣言文とは名前の付いた関数のことで、関数式とは無名関数ということなのでしょうか...？？？

何が関数式化がいまいちピンと来ておりませんもので・・・

[think49]

@tanakashouzouxさん
名前が付いてないのは、無名関数式
名前が付いているのは、名前付き関数式or関数宣言です。

Answer 3

jsprimer上の間違い

「jsprimer上の間違い」と「質問の回答」が混在して分かりづらくなっていた為、回答を分割しました。
本回答では「質問の回答」を行い、「jsprimer上の間違い」は下記回答で行います。

• JavaScript - javascriptにおける関数文と関数式の違いとは何なのでしょうか？｜teratail

ECMAScriptの文法

本質問はECMAScriptの文法に関わる問題であり、概要を下記リンク先にまとめました。

• ECMAScript 2019の文法をコードで理解する - Qiita

以降の説明は、この内容を理解している前提で進めます。

関数宣言と関数式

• 文と式· JavaScript Primer #jsprimer

jsprimerよりコードを引用します。

// learn関数を宣言する関数宣言文
function learn() {
}

このコードは**関数宣言(文ではありません)**で間違いありません。
前節のqiitaの記事で解説しています。

// 関数式をread変数へ代入
const read = function() {
};

このコードは、**const宣言(Const Declaration)**です。
Syntax上の名前の「レキシカル宣言(LexicalDeclaration)」と呼んでも構いません。

• 13.3.1 Let and Const Declarations - ECMAScript® 2019 Language Specification

Syntaxを追いかけていけば、AssignmentExpressionに辿りつく事が分かります。

• 12.15 Assignment Operators - ECMAScript® 2019 Language Specification

AssignmentExpressionは「式」であり、原則として式の中に宣言を入れる事は出来ません。
つまり、const宣言で代入可能なものは式に限定される為、このコードで代入されている関数は「関数宣言」になりえず、「関数式」が確定します。

※そもそもですが、関数宣言は名前が必須なので、名前を省略している時点で関数宣言になりえません。

Re: tanakashouzoux さん

Comments

[tanakashouzoux]

think49さん

大変貴重なご指導をありがとうございますm(__)m

お陰様で朧気ながらに式と文の違いが分かってきました！
これからも勉強が続けられそうです！！！

本当にありがとうございますm(__)m

Answer 4

「文」とは「評価値を生成し、変数に代入できるもの」、「式」とは「if(){}の様に変数に代入できないもの」と学んだのですが

逆です。

#コメントを受けての追記

無名関数だと関数式、名前が付いている関数は関数宣言文と考えれば良いのでしょうか？？？

名前付きの関数式のサンプルです。

// 階乗計算
let foo = function bar(n) { return n<=1 ? 1 : n*bar(n-1); };

console.log(foo(3)); // これは6と表示
console.log(bar(3)); // これはbarという関数が未定義というエラー

Comments

[tanakashouzoux]

ご回答ありがとうございます！！

仰る通りです????

間違ってしまっていたので質問を修正させて頂きましたm(__)m

[otn]

> このコードだと関数宣言「文」を「変数に代入」していて

してないと思いますが、どの記述のことですか？

[tanakashouzoux]

何度もありがとうございますm(__)m

「const read = function() {
};」の部分です

変数readに関数文「function(){};」を代入している気がするのですが・・・

[otn]

ご自分で
> 「function learn() {}」が「関数宣言文」、「function() {};」が「関数式」を表していると思うのですが、
と書いてますが？

[tanakashouzoux]

otnさん何度もご丁寧にありがとうございますm(__)m

すいません私の日本語力の無さで言いたいことを伝えきれておりませんでした????

著者の方の考えでは「function learn() {}」を「関数宣言文」、「function() {};」を「関数式」と言いたいのだと思うのですが、私には「const read = function() {};」の部分について「function() {};」が「関数宣言文」で、その「文」を変数「read」に代入している気がして、「文が変数に代入できないのであれば、これはどう考えたら良いのだろう・・・」と思って悩んでおりました

[otn]

> これはどう考えたら良いのだろう・・・」と思って悩んでおりました
そのまま、
> 「function learn() {}」が「関数宣言文」、「function() {};」が「関数式」を表していると思うのですが、
と考えればいいです。

[tanakashouzoux]

otnさんわざわざご回答を何度もありがとうございますm(__)m

> 「function learn() {}」が「関数宣言文」、「function() {};」が「関数式」を表していると思うのですが、
と考えればいいです。
とのことですが、無名関数だと関数式、名前が付いている関数は関数宣言文と考えれば良いのでしょうか？？？

[otn]

代入などしてない場合は関数宣言文で、代入するなど式の中で使われていれば関数式です。
名前の有無は本質的では無いです。

名前付きの関数式のサンプルを回答に追記しておきます。

[tanakashouzoux]

わざわざサンプルまで追記頂きありがとうございますm(__)m

追記頂いた名前付き関数式、初めて拝見しました

これはbar(3)がエラーで、foo(3)が6になると言うことは名前付き関数式はbarが存在しない時の計算と同じ様に計算すると言うことなのでしょうか？

[otn]

> 名前付き関数式はbarが存在しない時の計算と同じ様に計算すると言うことなのでしょうか？
意味が取れません。

barという名前はその関数bar内でのみ有効で、外では未定義になります。

[tanakashouzoux]

何度もご丁寧にありがとうございますm(__)m

ご記述頂いた下記関数についてbar()は{}の中では使えるけれどそれ以外の場所からは使えない、foo(3)は下記関数の引数に3を代入した返り値ということで合ってますでしょうか？

let foo = function bar(n) { return n<=1 ? 1 : n*bar(n-1); };

[otn]

はい。

[tanakashouzoux]

otnさん
わざわざご回答いただきありがとうございます！！！
完全独学で勉強しておりまして、書籍やネットで調べてはいるつもりなのですが調べたことが合っているのか間違っているのかの判断が付かず、質問させて頂いておりました

ですので、ご回答頂けて本当にありがたく思っておりますm(__)m