KAEDE Hack blog

JavaScript 中心に ライブラリなどの使い方を解説する技術ブログ。

JS ES6 の復習 - 複文と単文、式と文、演算子

why

カンマ演算子や式と文など、わかっていないことが多かった

複文と {}

アロー関数で説明すると

{} で括らないで複文を入れた場合

const A = () => console.log('A');
const B1B2 = () => console.log('B1');console.log('B2');

A();

B1B2();

これを実行すると

B2
A
B1

となる。

A の関数は ちゃんと関数の中に入って、呼び出されるようになっているが

B1B2 は 関数の中に入って、その後まとめて順番に実行されていない。

B1 のみが B1B2 の関数に入って、B2 は関数のスコープ内で即時実行されてしまう。

これは 関数が {} で処理部を括らない場合は 単文しか入らないからだ。

この B1B2 の処理部分を {} でくくると両方入るようになる。

{} で括って複文を入れた場合

const A = () => console.log('A');
const B1B2 = () => { console.log('B1');console.log('B2');}
A();

B1B2();

実行すると

A
B1
B2

この挙動をする。

前述の {} を使わない 処理部分に抑えめるには単文で済ませる必要がある

その時に演算子 ( operators ) が便利。


式と文と演算子

文は {} を持つものと輸出輸入と宣言

developer.mozilla.org

if などの {} を持つフローや関数と反復処理、

import , export,

var, let, const の 宣言

文としてはこれらがある。

これらは全て console.log() で打ち出そうとしても出力できない。

逆にこれら以外のものは全て「式」であり、cll で打ち出せば何かが出る。

代入演算と式の評価と変数宣言

developer.mozilla.org

代入演算の x = 3

式の評価の 3 + 4 がある

どちらでも演算子、 operators を使う。

演算子を使って結合されたひとまとまりの単文を式... ではなく

「式は返り値を持っている」ので、評価すると値が帰ってくるのに対して、

変数宣言文は 代入演算のようにそれ自体を console.log とかで出力しても 何も帰ってこない

const や let を用いない グローバルな代入文は 値が実はあった。

console.log (x=3)

結果で

3

3 が帰ってくる...

一方 const や let , var ですら

console.log (const x=3)

実行すると

console.log (const x=3)
             ^^^^^
SyntaxError: Unexpected token 'const'

中身がないエラー... だよな?が帰ってくるn

なので 代入演算は 式で、変数宣言のみが文になる。

また「代入演算の右辺には式しか入らない」

const hoge = const ha  = 'hoge';
             ^^^^^

SyntaxError: Unexpected token 'const'

当たり前すぎるが、これも const を抜くと

const hoge = ha  = 'hoge';
console.log(hoge);

hoge

なんとこんな狂ってる文でも返ってきてしまうのだ...

式と文の区分まとめ

よって const や let を使わない 超グローバル変数宣言は「式」であり

const や let を使う 変数宣言のみが「文」である

他には前述したように、スコープ {} を持つものや im, export が cll で打っても結果が帰ってこない「文」であり、そのほかは全て「式」である。

function の 即時関数は式扱いらしい(要検証)

演算子の例

わかりやすいものには

developer.mozilla.org

===, !=, >, <,

などの比較演算子

developer.mozilla.org

&&, ||,

の論理演算子

developer.mozilla.org

( X ? A : B ) で X の条件が true なら A, False なら B を処理する三項演算子

(A , B) を両方処理して右側を返すカンマ演算子がある

カンマ演算子は教材の for ループ以外であまり見ないが

 (a, b)
 (a, b, c)

演算子を使った丸括弧の「式」である

カンマの左側を全て処理してから右側を返す。

だから reduce において (stack + something, stack) が便利。

演算子まとめ

これらは全て値を返すから、「式」!!