【JavaScript入門】これだけは覚えておけ!foreach / for-in / for-of

どうも、カメ助(@kamesuke_blog)です。

JavaScriptで、繰り返し処理を行う場合にはよく「for-in」、「for-of」、「forEach」を使用すると思います。ただし、処理内容が似ているため、何となく使用していると意図しない不具合が起こる可能性があります。

そのため、「for-in」、「for-of」、「forEach」文の特徴と注意点についてまとめましたので共有します。

javascriptの繰り返し処理を行う際にの参考になれば幸いです。

目次

はじめに

for文(繰り返し処理)の仲間には、Javaの拡張for文に近いものがあります。まとめるとは次の通りです。

拡張for文
  • for…in:オブジェクトの列挙可能なプロパティに対して順不同で繰り返し処理を行う
  • for…of:iterableオブジェクトの個々のプロパティに対して繰り返し処理を行う
  • forEach:配列に用意されているメソッドで、配列の各要素に対して一度ずつ処理を行う

それぞれについて解説していきます。

「for…in」文

「for…in」文の基本書式

「for…in」文の基本書式は次の通りです。

「for…in」文は、オブジェクトの列挙可能なプロパティに対して順不同で繰り返し処理をします。「for…in」文の一般的な動作として、「オブジェクトのプロパティを1つずつ変数に代入→処理実行」を繰り返します。そして、取得できるプロパティが無くなれば自動的に処理を終了します。

通常の「for」文との違いは、カウンタ変数が不要でオブジェクトの全プロパティの数だけループ処理を実行します。

「for…in」文の注意点

「for…in」文の注意点として、以下の2つがあります。

「for…in」文の注意点

①:データ量が多いとすごく遅い(多すぎるとエラーが出る危険性もある) 

②:順不同に処理が実行されるので、ループする順番は保障されない

②について簡単に説明します。例として「1, 2, 3」の順序で処理を行うことを想定します。しかし、「for…in」文では、「3, 2, 1」といった処理の順序になる場合もあれば、「2, 3, 1」になる場合もあります。

上記①、②の注意点が繰り返し処理をする場合に、不具合の温床になることがあるので、基本的に「for…in」を使用しないようにしましょう。

カメ助

特別な事情がない限り、「for…in」文を使用しない方がいいです。

「for…in」文でオブジェクトのプロパティを取得

「for…in」文の基本的な使用例である、オブジェクトの全プロパティを出力します。

実行結果

この例では、「userData」というオブジェクトを作り、そのプロパティを全て出力しています。「for-in」文の繰り返し処理を行うことで、とても簡単にオブジェクトの全プロパティを列挙できています。

カメ助

プロパティ値を出力する場合は、console.logの「item」→「userData [ item ]」に変更してください。

「for…of」文

「for…of」文の基本書式

「for…of」文を書くときの書式は次の通りです。

「for…of」文は、「iterableオブジェクト」の各値を1つずつ順番に変数へ代入して処理を実行します。

ここで『「iterableオブジェクト」って何ですか?』と思われる方も多いと思いますので、簡単に説明しておきます。

iterableオブジェクトとは

反復処理可能なプロパティをもつオブジェクト

(例)配列、文字列、Map、DOMコレクション

「for…of」文の注意点

「for…in」文の注意点として、以下の2つがあります。

「for…in」文の注意点

①:Iterable(イテラブル)オブジェクトしか使用できない

②:ECMASCript2015から導入された新しい構文のため、IEなどの古いブラウザは対応していません

配列やMapなど、繰り返し処理を行いたいオブジェクトはiterableオブジェクトなので、①についてはあまり気にしないでいいです。②については、IEなどの古いブラウザを対象にする場合は、「for…of」文は使用できないので注意しましょう。

カメ助

古いブラウザが対象でなければ、積極的に「for…of」文を使用しよう!

「for…of」文で配列の全要素を取得

「for…of」文の基本的な使用例である、配列の全要素を出力します。

実行結果

カメ助

「for」文でも同じことができますが、「for…of」文は「ループ回数」や「カウンタ変数」などを意識せずに扱えるのでシンプルで使いやすい構文になるよ。

おまけ:「for…of」文と「for…in」文の違いについて

「for…of」文は、先ほどの「for…in」と構文が非常に似ていますよね。それぞれの違いについて押さえておきましょう。

「for…of」文と「for…in」文は、配列を対象にした場合に挙動が異なります。

例として配列[1,3,5]に対してそれぞれ処理することを考えます。

「for…in」文の場合は、以下の通りです。

「for…of」文の場合は、以下の通りです。

出力結果が異なっているのが分かりますね。配列の場合、「for…in」文は【index】が出力され、「for…of」文は【value】が出力されています。

配列を繰り返し処理する際にイメージするのは「for…of」文の方であると思いますので、配列の場合は「for…of」文を使用しましょう。

「forEach」文

「forEach」文の基本書式

「forEach」文の書式は次の通りです。

配列の要素1つずつに対して、コールバック関数に記述した処理を実行します。

「forEach」文で配列の要素を取得

例として、配列を1つ作成し、その「配列の要素」を全て表示させましょう!

実行結果

この例では、コールバック関数内で配列の要素をコンソールに出力しています。

「forEach」文で使える3つの引数

「forEach」文のコールバック関数には、3つの引数を受け取ることが可能です。

それぞれの引数の意味は、次のとおりです。

「forEach」文の引数
  • 「value」:配列の要素
  • 「index」:配列の要素番号
  • 「array」:現在処理している配列

引数の使用方法について見ていきましょう。次の例は、コールバック関数の引数に「value」、「index」を使用するサンプルです。

実行結果

この例では、コールバック関数の引数「value」、「index」を使って、要素の「要素番号」と「要素」をコンソール出力しています。

「forEach」文は途中でbreakできない

「forEach」文を使う上で注意するべき点として、途中でループ処理を抜けられないという点が挙げられます。(例外処理は除く)

例えば次のようなコード例を想定してみましょう!

この例では、配列の要素が「7」の場合にbreakして処理を中断させるように書いていますが、これはエラーになります

「forEach」文ではコールバック関数内でのbreakやcontinueの記述が認められていないので、繰り返し処理の途中で中断や処理をスキップしたい場合には、単純に「for」文を使いましょう。

「for」文で記載した場合は次の通りです。

実行結果

この例では、「for」文を使って要素が「7」の場合にbreakして処理を中断しています。

カメ助

途中でループ処理を抜けることが想定されるのであれば「for」文を使いましょう。

まとめ

各繰り返し処理の特徴は以下の通りです。

「for」文

ループできないものはない

基本的な繰り返し処理

「for…in」文

様々なオブジェクトを少ない記述で繰り返すことができる

データ量が多いとすごく遅い(多すぎるとエラーが出る危険性もある)

順不同に処理を行うため、繰り返し処理が順番通りとは限らない

特別な事情がない限りは、使用しないようにしよう!

「for…of」文

シンプルな記述で繰り返すことができる

break, continueが使える

古いブラウザ(IEなど)では使用できない

古いブラウザが対象でなければ積極的に使用しよう!

「forEach」文

配列の処理におすすめ

break, continueが使えない

古いブラウザ(IEなど)が対象の時に使おう!

これらの特徴をベースに意識して、ぜひ自分なりの活用方法を見つけてfor文をマスターしよう!

こちらはjavascriptのサンプルコードが豊富なのでオススメの1冊です。

この記事が気に入ったら
フォローしてね!

よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!

この記事を書いた人

大阪でITエンジニアしています。(9年目に突入)
趣味でウェブサイトに関することをいろいろと勉強しています。

勉強した内容やプログラミングに関する情報を中心に役立つ情報を発信するべく日々ブログを更新しています。

3度の飯よりも「柿の種」をこよなく愛する関西人。

コメント

コメント一覧 (6件)

【JavaScript入門】do…while文(繰り返し)を徹底解説! | カメ助のブログ へ返信する コメントをキャンセル

目次
閉じる