オブジェクトと配列のループ処理を極める！JavaScriptループ処理の包括的なガイド：For...Inループ、foreachループ、その他の方法も紹介

2024-06-18

JavaScriptにおける「For...Inループ」と「foreach」ループ：詳細解説

JavaScriptでオブジェクトや配列を反復処理するには、様々なループ構文が用意されています。その中でも、「For...Inループ」と「foreachループ」は、オブジェクトのプロパティや配列の要素を効率的に処理する際に役立つループ構文です。

本記事では、それぞれのループ構文の特徴と具体的な使用方法を、分かりやすく詳細に解説していきます。

For...Inループ

1 概要

For...Inループは、オブジェクトのプロパティに対して反復処理を行うループ構文です。オブジェクトのプロパティ名(キー)と、その値を取得することができます。

2 構文

for (キー in オブジェクト) {
  // キーと値を使った処理
}

3 動作

オブジェクト 内の全ての列挙可能なプロパティに対して、ループを繰り返します。
それぞれのプロパティについて、以下の処理を実行します。
- 変数 キー には、現在のプロパティ名(キー)が代入されます。
- オブジェクト[キー] を介して、現在のプロパティの値を取得できます。

4 例

const person = {
  name: '田中 太郎',
  age: 30,
  job: 'エンジニア'
};

for (const key in person) {
  console.log(`${key}: ${person[key]}`);
}

出力結果

name: 田中 太郎
age: 30
job: エンジニア

5 メリット

オブジェクトの全てのプロパティに対して、簡単に反復処理できる。
プロパティ名(キー)を取得できるため、柔軟な処理が可能。

以下の理由により、配列の反復処理には適していない。
- 配列の要素とプロパティ名は区別されないため、インデックスベースの処理に不向き。
- オブジェクトの追加や削除の影響を受け、ループ処理中に予期しない挙動が発生する可能性がある。

foreachループ

foreachループは、配列や配列類似オブジェクトの要素に対して、順番に処理を行うループ構文です。

配列.forEach(要素 => {
  // 要素を使った処理
});

配列 内の全ての要素に対して、ループを繰り返します。
それぞれの要素について、以下の処理を実行します。
- 引数 要素 には、現在の要素が代入されます。

const numbers = [10, 20, 30];

numbers.forEach(number => {
  console.log(number * 2);
});

20
40
60

シンプルで分かりやすい構文。
配列の要素に対して、順番に処理しやすい。

オブジェクトの反復処理には使用できない。
要素のインデックスを取得できない。
ループ処理中に要素を削除することはできない。

適切なループ構文の選択

For...Inループとforeachループは、それぞれ異なる特徴と用途を持っています。

オブジェクトのプロパティに対して反復処理を行う場合は、For...Inループを使用します。
配列の要素に対して、順番に処理を行う場合は、foreachループを使用します。

それぞれのループ構文の特徴を理解し、状況に応じて適切なものを選択することが重要です。

まとめ

本記事では、JavaScriptにおけるFor...Inループとforeachループについて、詳細に解説しました。それぞれのループ構文の特徴と使用方法を理解し、状況に応じて適切なものを選択することで、より効率的かつ分かりやすいコードを書くことができます。

For...Inループ

// オブジェクトの例
const person = {
  name: '田中 太郎',
  age: 30,
  job: 'エンジニア'
};

// For...Inループを使って、オブジェクトのプロパティと値を出力
for (const key in person) {
  console.log(`${key}: ${person[key]}`);
}

name: 田中 太郎
age: 30
job: エンジニア

foreachループ

// 配列の例
const numbers = [1, 2, 3, 4, 5];

// foreachループを使って、配列の要素を2倍して出力
numbers.forEach(number => {
  console.log(number * 2);
});

上記のサンプルコードは、あくまでも一例です。それぞれのループ構文を理解し、状況に応じて様々な処理に応用することができます。

JavaScriptでオブジェクトや配列をループ処理する方法：その他の方法

従来のforループ

従来のforループは、最も基本的なループ構文の一つです。数値のインデックスを使用して、配列の要素に対して反復処理を行うことができます。

for (let i = 0; i < 配列.length; i++) {
  // 要素を使った処理
}

i 変数に、0から 配列.length - 1 までの値を順次代入します。

const numbers = [10, 20, 30];

for (let i = 0; i < numbers.length; i++) {
  console.log(numbers[i] * 2);
}

20
40
60

ループ処理中に要素の追加や削除が可能。

インデックスベースの処理であるため、プロパティ名(キー)を取得できない。

Object.keys() + forループ

Object.keys() メソッドは、オブジェクトのプロパティ名を配列として取得します。この配列を従来のforループで反復処理することで、オブジェクトのプロパティに対して処理を行うことができます。

const obj = {
  key1: 'value1',
  key2: 'value2',
  key3: 'value3'
};

const keys = Object.keys(obj);

for (const key of keys) {
  console.log(`${key}: ${obj[key]}`);
}

key1: value1
key2: value2
key3: value3

ループ処理中にプロパティの追加や削除の影響を受けない。

従来のforループと組み合わせる必要があるため、構文が少し複雑になる。
オブジェクトのプロパティに対してのみ有効。

const obj = {
  key1: 'value1',
  key2: 'value2',
  key3: 'value3'
};

const values = Object.values(obj);

for (const value of values) {
  console.log(value);
}