式(Expression)と文(Statement)

[azu]

基本文法 #17

式(Expression)と文(Statement)についての解説をする。

• 式(Expression)
• 文(Statement)
• ブロック(Block)

について解説する。

式(Expression) は演算子 #32 の説明に必要 https://asciidwango.github.io/js-primer/basic/operator/
文(Statement)とブロックはループ #31 の説明に必要 https://asciidwango.github.io/js-primer/basic/condition/

式はそれ単独では基本的に完結せず、文または式の一部として使用される言語要素です。また、式の最大の特徴として、値を返すという点が挙げられます（文は値を返しません）。
-- 式(Expression)と文(Statement) - よねＫＥＮのプログラミング研究

文は実行されて副作用

手続き型言語の単位は「文」
文は一文一文ごとに「実行」される。実行の結果は「副作用」によってのみ表現できる

• プログラミングにおける式と文とは - 愚鈍人
• Rubyist Magazine - 式と文、評価と実行、そして副作用 ―― プログラムはいかにして動くのか【前編】

こういう関係なのかな

+-------------------------------------+
|                                     |
| Declaration                         |
|                                     |
|                                     |
|          +----------------------+   |
|          |                      |   |
|          |   Statement          |   |
|          |                      |   |
|          |    +--------------+  |   |
|          |    |              |  |   |
|          |    |  Expression  |  |   |
|          |    |              |  |   |
|          |    +--------------+  |   |
|          |                      |   |
|          +----------------------+   |
|                                     |
+-------------------------------------+

http://astexplorer.net/

アウトライン

概要: JavaScriptは式と文で構成されている。

• 文はセミコロンで区切る
  • 序盤で話している
• JavaScriptは文と式の集まりで構成される
• 文は文と式を含む
  • Statement
  • ブロック文
• 式は式を含む
  • FunctionExpressionはbodyが文なので式は文を含むことがある
  • Expression
  • 式が単独で式文となる
  • REPLとかに書いても問題無いよ的な感じ
• 文は値を返さない＊
  • 例 if文
  • statement
• 式は値を返す＊
  • 例 三項演算子
  • expression
• if-elseと条件演算子 これ自体は condition のところで書いた方が良さそう

[azu]

ここで一緒にセミコロンの説明をしておくと関数の所で初めて言及するみたいのを避けられる。
セミコロンは自分で付ける付けないの判断ができるまで付けておくという話にしかならないと思う。

[azu]

• http://www.ecma-international.org/ecma-262/7.0/#prod-Statement

ECMAScriptの構文的には { } ブロックは省略できるというより、ブロックの機能として複数行書けるという言い回しが適切ではありそう。
これはArrow Functionが束縛するか、移譲なのかみたいな言い回しの違いに近い。

• https://twitter.com/azu_re/status/749433911004893184

MDNそういう言い回しになってすごいな( ; empty statementについても言及してるのか)

• if...else - JavaScript | MDN

これ読んでてちょっとおもしろいのは、varとlet、constはやっぱり別ものなんだなという点。
varはただのStatementだけど、letとconstはStatementListにしか定義できないLexicalDeclarationという分類になってる。

// OK
if (condition) var a = 1;
// NG
if (condition) let a = 1;

[azu]

ここで 関数宣言、関数式、Arrow Function #20 と話が繋がると良さそうに見えてきた。

StatementとExpressionの他にDeclarationという、文頭に置かなければいけない構文が存在してる

• import
• export
• function
• class
• var
• Let and Const
• 他にも何かある?

式にも文宣言にもなれるものとして関数がある

• function
• class

一方、Arrow Functionは式にしかなることができない関数である。

[azu]

セミコロン ;は Statement同士を分けるためのもの。
Function DeclaratiopnはStatement終わるわけではないので、 ; が不要。

一方 import a from "module";はStringのliteralが入ってるから
https://astexplorer.net/#/xr50NHkVwj

Semicolons serve to separate statements from each other, and a FunctionDeclaration is not a statement.
-- Why should I use a semicolon after every function in javascript? - Stack Overflow

[azu]

この章がなぜ必要なのかをもう少し明確にしよう。

• function宣言とfunction式の違いについてを意味論的に理解するため
  • function宣言は文 + 先頭におくという条件付き文?
• https://asciidwango.github.io/js-primer/basic/function-method/
• 文 と 式 という用語を意識して書いてることを伝えるため
• 式 は値を返すもの
  • 演算子を使った演算は式なので値を返す
  • functionは式なら値を返し、文は値を返すわけじゃない
• セミコロンで文の区切りをつけている
  • ブロック文にはセミコロンをおかない
  • function式はブロック文ではないからつける

あたりなのかなー

function 文/式の違い
セミコロン
式は値を返す

この3つな気がする

[azu]

開発者ツールのコンソールに入力して、インタプリタが評価して値を生成出来るものを式。
式の例としてリテラルや変数など

[azu]

セミコロンを入れるルールを3行で書きたいけどなにかいいまとめ方ないのかなー

1. セミコロンは文を区切るため、文の末尾にセミコロンを入れる
2. ブロック文にはセミコロンを入れなくて良い
   • while文とdo-while文の違い
3. 式文の末尾にもセミコロンは忘れずに
   • function宣言(文)とfunction式の違い

(式; → 文 一部宣言は、式文にはなることができない。)

ImportDeclarationってなぜ ; が必要なのか未だによく分かってないところがある。

ESLintは結果を使ってLint(EmptyStatementを見てる)してるっぽかった

• Rule semi - ESLint - Pluggable JavaScript linter
• eslint/semi.js at master · eslint/eslint
• Rule no-extra-semi - ESLint - Pluggable JavaScript linter
• eslint/no-extra-semi.js at master · eslint/eslint

[azu]

逆にセミコロンが自動挿入されるルール(Automatic Semicolon Insertion)は、

1. セミコロンが挿入されるのは、} tokenの前、1個以上の改行の後か、プログラムの入力の末尾だけ
2. セミコロンが挿入されるのは、次の入力トークンを字句解析できないときだけ
3. [no LineTerminator here]となっている部分に関しては自動で挿入しない(forなど)

[azu]

Expressions versus statements in JavaScript
Chapter 7. JavaScript’s Syntax

[azu]

ここでのテーマは、"function宣言とfunction式の違いを理解する"ということにする。

Dr. Axelも書いてるけど、やっぱりfunction宣言を文としてみなしたほうが直感的な分かりやすさが得られると思う。

[8] To keep things simple, I’m pretending that declarations are statements.
-- http://speakingjs.com/es5/ch07.html#id548046

なので、

関数と宣言 · JavaScriptの入門書 #jsprimer -> ここ -> 条件分岐 · JavaScriptの入門書 #jsprimerという感じ。

関数と宣言では、特に説明せずに関数宣言と関数式は別だよって話をした。
ここで生まれる疑問としては

• function宣言はセミコロンない
• functionから始まる文ってなに?
• function式ってなに?
• { と } って省略可能じゃないの? ブロックとは違うの?
  • ここではまだブロックは登場してないけど、今後登場するので先に出しておく

これを解決するというテーマを持った章にする。
(実際これを理解しなくても、プログラミングできると思うので、補足という立場を持ちつつ 文と式 という構造的なものについて書く感じ)