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 ) が便利。
式と文と演算子
文は {} を持つものと輸出輸入と宣言
if などの {} を持つフローや関数と反復処理、
import , export,
var, let, const の 宣言
文としてはこれらがある。
これらは全て console.log() で打ち出そうとしても出力できない。
逆にこれら以外のものは全て「式」であり、cll で打ち出せば何かが出る。
代入演算と式の評価と変数宣言
代入演算の 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);
なんとこんな狂ってる文でも返ってきてしまうのだ...
式と文の区分まとめ
よって const や let を使わない 超グローバル変数宣言は「式」であり
const や let を使う 変数宣言のみが「文」である
他には前述したように、スコープ {} を持つものや im, export が cll で打っても結果が帰ってこない「文」であり、そのほかは全て「式」である。
function の 即時関数は式扱いらしい(要検証)
演算子の例
わかりやすいものには
===, !=, >, <,
などの比較演算子
&&, ||,
の論理演算子
( X ? A : B ) で X の条件が true なら A, False なら B を処理する三項演算子
(A , B) を両方処理して右側を返すカンマ演算子がある
カンマ演算子は教材の for ループ以外であまり見ないが
(a, b) (a, b, c)
演算子を使った丸括弧の「式」である
カンマの左側を全て処理してから右側を返す。
だから reduce において (stack + something, stack) が便利。
演算子まとめ
これらは全て値を返すから、「式」!!