JSでforeachしたいときはforeachではなくfor ofを使え
公開日時: 2025-02-27 02:18:40更新日時: 2025-02-28 17:20:40いきなり本題です。「Javascript foreach」などと検索してこの記事に辿り着いた方、あなたがやりたいのは、例えば、PHPで
foreach ($list as $item) {
って書くやつのJavascript版だったりしませんか？
だとしたら、使うべきなのは、foreach文ではなくfor of文です。
「Javascript foreach」で検索すると、for of文ではなく後述の(悪名高い)foreach文のほうばかりがヒットしてしまうので、独学で勉強しているJSビギナーにとってはなかなか凶悪なトラップになってるんですよね……
for of文の書き方
と、いうことで、まずは(みなさんが求めているであろう)for of文の書き方を軽く紹介しておきます。サンプルを載せるなら、
var list = ["hoge", "fuga", "piyo"];// 任意の配列等
for (var item of list) {
console.log(item);
}
ざっとこんな感じです。(もちろん、varでの宣言ではなく最近流行りのletでも動作します)
これを実行すると、コンソールにはhoge、fuga、piyoが順に出力される(はず)。
PHPとは配列と代入先変数の位置関係が逆なので少しややこしいですが、C#やPythonを使い慣れている方からすると、「in」が「of」に変わっただけの見慣れた構文だと思います。
じゃあforeach文って何よ
では、JSビギナーを惑わせるforeach文とは何かといえば、あれは単に「for of文の中で単一の関数を実行する処理を1行で書けるようにしたもの」という認識で構わないと思います。ループの内側が関数として独立した名前空間になっているので、letが一般的でなかった2010年代までは変数名が重複するリスクを軽減できて便利な存在だったはずですが、関数になっているということはbreakやcontinueは使えませんし、今では欠点ばかりが目立つ存在になりつつあります。
なにより、JSのforeach文はJS以外の言語をメインでやっている人間が見たときの可読性がなかなかによろしくないので、よほどの理由がなければ令和の時代に使うものではないと(少なくとも筆者には)考えられます。
なぜこんなことになったのか
そもそも、foreach文などというトラップが、なぜ今でも検索で大量にヒットするのか。もちろん、最大の原因は「foreach」という悪質なネーミングのせいだとは思いますが、実は、for of文が一般的に用いられるようになったのは2015年以降で、それまではそもそも「for of文」という存在そのものがJavascriptの正式な言語仕様としては存在していなかった様子。
どおりで多くのJSビギナーが苦しめられているわけです。
なら仕方がないか、とも思いつつ、2015年から10年経った今でも多くのJSビギナーが必要もない困難を眼の前にして時間を浪費するのは気の毒なので、筆者がこの記事を書いた次第です。
願わくば、この記事がこれから多くのwebエンジニアの卵たちの目に留まりますように。
この記事のタグ:
Javascript
Javascript