loop: for/for in/for of/while/do while

[azu]

#31 制御構文からの分離
#31 制御構文 -> iteration(ココ) の順番

• while
  • 原始的なループ処理
  • 使い道が不定の長さの処理を扱う時
  • 無限ループとなる事が多いので慎重になる
  • for(;condition;) と同じ
  • JavaScriptだとbusy loopは基本使わない
  • 無限長のループはGeneratorでできる
• do while
  • whileとの違いは最初の１回が実行されること
• for文
  • 最も使われてる繰り返し文
  • Array#forEach
  • forEachも中身はfor文
  • [ユースケース]値の合計を計算する
• break
  • forループ中に処理を中断する
  • [ユースケース] 配列から要素を探索
  • 先頭一致で探索終了
  • Array#someが実装できそう
• continue
  • forループ中に次のループへ処理を飛ばす
  • [ユースケース] 配列から要素のフィルタリング
  • 要素が見つかった => 次のループへ
  • 要素が見つかった => 回収
  • Array#filterが実装できそう
• for...in
  • [仕組み] for...inはオブジェクトのキーを列挙する構文
  • [Bad] for...inはオブジェクトである配列にも使えるが間違い
  • [Bad] for...inはbadパーツ
    • prototypeの仕組みや細かい罠が多いため理解するまで避ける事を推奨する
    • prototypeについて意識しないと書くことができないもの
  • [仕組み] for文 + in 演算子
  • [仕組み] in 演算子について学ぶ必要がある
  • [仕組み] 詳しくはprototypeチェーンの話が必要
  • [使い方] hasOwnPropertyと組み合わせる必要がある
    • for...in - JavaScript | MDN
  • [使い方] Object.create(null)で作られたものだと簡単に崩壊する
  • [代用] Object.keys()/Object.values()で代用できる
• for...of
• 未使用
  • label
    • breakとcontinueと組み合わせる
    • goto文
    • 深いループから抜ける用途
    • 現代的に使ってたらおかしい
    • 関数で抽象化すればreturnで代用できる
    • 一般に使わないし、目にすることもないので必要な知識
    • http:// がなぜvalidかという豆知識
      • 0-9, JSでラベルがサポートされ続けなければならない理由
  • while
    • whileの変数宣言はwhileの外側
    • パースとかでは使ってる印象がある
    • whileは常に副作用を期待してる
    • 回数未定のループ処理 while文とdo...while文 | JavaScript入門編
    • trueを書いてしてる間ずっと続く
    • 副作用only
    • WebWorkerであってもbusy loopは微妙
    • while(regexp.exec("test")) でマッチング
    • nullを返すのはexecとObject.getPrototypeOfだけ
  • for in
    • 実際に有用な使い道がない気がする
    • すべての他の手段で代用できる
    • 逆にでてきた瞬間マイナスから始まる
    • leobalter/object-enumerables: Object.enumerableKeys / Object.enumerableValues / Object.enumerableEntries
  • for...of
    • Iteratorという概念がJavaScriptにある
    • Arrayはもちろん、 Map, Set, String, TypedArray, 引数オブジェクト
    • さらにDOM NodeListもIterable
    • for...of - JavaScript | MDN
    • forとは違うのは next() を呼ぶことに次の値を得ることができるリンクリストであること
    • 無限リストや遅延評価的なことに利用できる
    • 今後の使い道的にはかなり広大な概念
    • Symbol.iteratorで任意のオブジェクトをiterableにできる
    • Generator、Iterator、Iterable

草案

プログラミングにおいて、同じ処理を繰り返すために同じコードを書くことはありません。
ループや再帰呼び出し、イテレータなどを使い繰り返し処理は抽象化されます。
ここでは、もっとも基本的な繰り返し処理となるループについてを学んでいきます。

[azu]

for...of についてはやっぱりiterableという概念があり、ArrayやStringなど多くのオブジェクトがIterableであるという話だけにするのが良さそう。

Learning JavaScript, 3rd Edition - O'Reilly Mediaではその程度の話にしていて、残りはIterableの章でって感じになっていた

[azu]

• do-while文 - Wikipedia
• Why I favor while loops | Blog | Miller Medeiros
• For, While, and Do...While Loops in JavaScript | kirupa.com
• ループと反復処理 - JavaScript | MDN

ユースケース

• for
  • 数の合計
  • 配列の列挙
• while
  • カウントダウン
  • 副作用 - 正規表現のexec?/配列のpop()?
• do-while
  • コンソール出力
• breakとcontinue
  • break; 多次元配列からの探索
  • continue; ループにおける早期return
• while - 無限ループ
• for...in
  • オブジェクトの列挙
  • だが基本的に代用手段があるのでそちらを使う
  • Badパーツについては深く踏み込むかどうか?
  • Rule guard-for-in - ESLint - Pluggable JavaScript linter
• for...of
  • iterateの概念解説

[azu]

これ先に配列とオブジェクトのデータへのアクセス方法をちゃんと書いた方が良さそう。
(ユースケースにかなり触れにくい)
オブジェクトは データ型とリテラルで書いているので、配列も同じ場所に array[index] でアクセスできるというのを書いたほうがよさそう。

• https://github.com/asciidwango/js-primer/blob/master/source/ch1/data-type/README.md#%E9%85%8D%E5%88%97%E3%83%AA%E3%83%86%E3%83%A9%E3%83%AB

[azu]

MDNでは次のような抽象構文使ってた。

for ([initialExpression]; [condition]; [incrementExpression])
  statement

となっていて incrementExpression が何でこの名前なんだと思ってたら

13.7.4.8Runtime Semantics: ForBodyEvaluation( test, increment, stmt, perIterationBindings, labelSet )#
-- http://www.ecma-international.org/ecma-262/7.0/#sec-forbodyevaluation

仕様でこの3番目のExpressionを increment としてるからかー。
日本語に当てはめるのむずそう。増分式とか謎すぎる言葉になる。

[azu]

普通に書くとforとかはホントMDNのままになってしまうので、もう少し反復処理をArrayメソッドの話によせるのが良さそうな気がする。

• for文 = reduce
• while - これはもっと副作用を期待した反復処理と言えそう
• for...in - Object.keys + Array
• for..of - Iterable と ...iterable + Array
• 君のプログラミング言語で、これ、できる? - The Joel on Software Translation Project

を見ていてそんな事を思った。

これをやるには関数とメソッドについて事前に触れる必要がある(全体的にユースケースを出していくなら関数とかは早めに紹介した方がいい)
後、色々混ざって順番が前後する感じだけど、リファレンス的なものを読みたいならMDNがあるのでそっちを見てもらったほうがいい気がする。
なので、この本だともっと実際のユースケースによった方がよさそうかなと思った。

for文はこういう書き方ができます。
=>
for文はこういう書き方で、ベタに手続き的にfor文を書くことはなくて普通は関数で抽象化するよね。
さらにfor文よりArray#reduceとかで実装するとletとかも不要になっていくよね。
(蛇足: Arrayのメソッドはfor文で実装されていることが多いので、そう考えると速度はどっちが早いかは明らか。でもより安全なコードを書くことができるよ的な)

みたいになっていたほうがいいのかなーと思った。

[azu]

IonMonkey: Evil on your behalf | JavaScript

for ofがfor文より2.5x遅い程度の差で動くのか。
for ofとかforEachとかはどれだけ上手く最適なパスに載っても、for文と同等になる感じ。

function norm1(vec) {
    var sum = 0;
    vec.forEach((x) => { sum += x; });
    return sum;
}

はScalar Replacementによってfor文と同等に展開されるのか。
forEachとかのほうがスコープによる安全性があるので、for文よりArrayメソッドのほうがいいな
(このケースだとreduce使いたいけど)

[azu]

この章は全体的に for と Arrayの対比になる感じがする。

• for <=> forEach
• for + break <=> Array#some
• for + continue <=> Array#filter
• while <=> なし
• for of <=> ... spread operator + Array

になるのかなー。
whileの例が難しいというか、もっとも原始的なループなんだなと思った。
基本シングルスレッドなJavaScriptで重たい処理は避けるから、
whileでbusyループはしないんだよな。今ならGeneratorがあるし。

whileの例があんまりいいものが思いつかない

• Array#pop
• RegExp#exec (nullを返す貴重なもの)

[azu]

for...inの順序 不定なのかな。でも大体決まったりしてるとかそういう感じなのかな

The mechanics and order of enumerating the properties is not specified but must conform to the rules specified below.

• https://tc39.github.io/ecma262/#sec-enumerate-object-properties

[januswel]

for...inの順序 不定なのかな。でも大体決まったりしてるとかそういう感じなのかな

The mechanics and order of enumerating the properties is not specified but must conform to the rules specified below.

https://tc39.github.io/ecma262/#sec-enumerate-object-properties

below の部分で述べられているのは次のことで、列挙される順序については何も書いていないですね。他の言語と同じく不定なのでは。

• iterator の throw と return は null になる
• 返されるキーに Symbol は含まれない
• 列挙中にプロパティを削除してよい
• 列挙中に新しいプロパティを追加しても列挙されることが保証されない
• ひとつのプロパティは一回だけ列挙される
• prototype チェインをさかのぼる

[azu]

長い長い反復処理はひとまずおわり

• https://asciidwango.github.io/js-primer/basic/loop/

ラベルについては今現在は必要ないもの(必要な人は自分で探せるはず)なので書いてない(コラムにしかならない感じ)
reduceのやつは議論の余地があるというか邪魔だったら消して問題ない気がするレベル。。
for...in文は異常なくらい書いてて難しさを感じる…

[azu]

tc39/proposals@d26dd0a leobalter/object-enumerables: Object.enumerableKeys / Object.enumerableValues / Object.enumerableEntriesはrejectされた

[azu]

for vs forEach The for Loop vs. forEach in JavaScript - The JS Guy - David Tang