【TypeScript】for文 と for…of文 比較

ご存知でしたか？TypeScriptでは（JavaScriptでも同様）、for文でもいろんな種類があるんです！

今回はその中のfor文とfor…of文の何が違うの？という疑問をスッキリさせるために初学者でも分かるよう比較をまとめました。

それぞれの特性を理解することで、より効率的にコーディングを行うための一歩を進めて行きましょう。

目次
  1. for…ofの誕生背景
  2. for文の説明
  3. for…of文の説明
  4. for文とfor…of文の比較
  5. まとめ

for…ofの誕生背景

for…of文はES6（ECMAScript 2015）で導入された構文であり、その主な目的は、for文がもつ冗長さや複雑さを軽減することです。特に配列や文字列など、イテラブルなオブジェクトに対する繰り返し処理をよりシンプルに、そして直感的に記述することを目指しています。

for文の説明

for文は、定義された条件が真である限り、指定したコードブロックを繰り返し実行する制御フロー文です。以下はその基本的な形式です。

for (初期化式; 条件式; 増分式) {
    // 実行するコード
}

例えば、0から9までの数字をコンソールに出力するfor文は次のように書けます。

for (let i = 0; i < 10; i++) {
    console.log(i);
}

for - JavaScript | MDN
for 文は、括弧で囲みセミコロンで区切った 3 つの引数と、続いてループ内で実行される文（ふつうはブロック文）から成るループを構成します。
developer.mozilla.org

for…of文の説明

次に、for…of文について見てみましょう。for…of文は、イテラブルオブジェクト（例：配列や文字列など）の要素を順に取り出して、それぞれに対して処理を行います。以下はその基本的な形式です。

for (変数 of イテラブルオブジェクト) {
    // 実行するコード
}

例えば、配列の各要素をコンソールに出力するfor…of文は次のように書けます。

let array = [1, 2, 3, 4, 5];
for (let value of array) {
    console.log(value);
}

for - JavaScript | MDN
for 文は、括弧で囲みセミコロンで区切った 3 つの引数と、続いてループ内で実行される文（ふつうはブロック文）から成るループを構成します。
developer.mozilla.org
…of

for文とfor…of文の比較

それでは、for文とfor…of文を比較し、それぞれのメリットとデメリットを見ていきましょう。

for文

  • メリット: 高い自由度と柔軟性。初期化式、条件式、増分式を自由に設定できるため、様々な反復処理を実装できます。
  • デメリット: 設定が複雑で間違いやすい。誤った条件や増分を設定すると無限ループに陥る可能性があります。

for…of文

  • メリット: シンプルで直感的。イテラブルなオブジェクトの要素を順に取り出して処理するのに最適で、冗長なコードを削減できます。
  • デメリット: 柔軟性が少ない。初期化式、条件式、増分式を自由に設定できないため、特定の繰り返しパターンには対応できません。また、オブジェクトのキー（プロパティ名）が必要な場合、for…of文だけでは取得できません。

まとめ

for文とfor…of文はそれぞれ一長一短がありますが、それぞれの特性を理解し、背景を知ることで、場面に応じた適切な選択が可能になります。ニーズに合わせて、これらの構文を使いこなし、より効果的なTypeScriptコーディングを進めていきましょう！

コメント