JavaScriptのfor文の書き方は？breakとcontinueの違いも解説

「JavaScript」のfor文は、同じ処理を決めた回数分繰り返す際に使用します。本記事では、「JavaScript」のfor文の使い方や注意点について解説します。

JavaScriptのfor文とは？

「JavaScript」のfor文は、リストの生成や一覧の取得など、複数回同じ処理を繰り返したいときに使用します。

for文を使うことによって、同じ処理のコードを数行以上記述する必要がなくなり、視覚的にも分かりやすく可読性の高いプログラムを記述できます。

似た構文としてwhile文もありますが、回数ではなく条件で処理を繰り返す際に使用します。

JavaScriptのfor文の基本的な書き方

「JavaScript」のfor文の基本的な書き方は、以下の通りです。

• for文の基本書式（回数指定の方法）
• for文で配列を処理する方法
• ループ処理の途中で処理を抜ける方法
• 特定のループ処理を実行させない方法

ここからは、これらの方法について解説します。

for文の基本書式（回数指定の方法）

for文の基本的な書式は、以下の通りです。

for(初期化式;条件式;加算式){
	繰り返したい処理
}

実際にコードを書いてみると、以下のようになります。

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

この処理は、「変数iの初期値を0として、変数iの値が10未満の間、iを1増やしながら繰り返す」という意味です。上記のコードを実行すると、「Hello!」と10回出力されます。

for文で配列を処理する方法

for文を使用して、配列内の要素を順番に取得できます。

const fruits = ['apple','grape','orange','melon','pineapple'];
for(let i = 0;i < fruits.length;i++){
	console.log(fruits[i]);
}

上記のコードを実行することで、「apple,grape,orange…」と、配列に格納されている順番で配列の内容がすべて出力されます。

fruits.lengthのlengthは、配列内にある要素の数を取得する「JavaScript」のプロパティです。上記の例ですと、fruits.lengthは5と同じ意味になり、配列の要素数である5回分処理が繰り返される仕組みです。

ループ処理の途中で処理を抜ける方法

ループ処理を途中で停止して処理を抜けるには、break文を使用します。

以下は、break文の使用例です。

const fruits = ['apple','grape','orange','melon','pineapple'];
for(let i = 0;i < fruits.length;i++){
	if(fruits[i] === 'orange'){
		break;
	}
	console.log(fruits[i]);
}

上記コードを見るとif文の中にbreakが記載されおり、繰り返し処理でorangeが出力されたら処理を停止してfor文の次処理をおこないます。ここでは「apple」と「grape」だけが出力され、あとの要素は出力されません。

特定のループ処理を実行させない方法

繰り返し処理の中で特定の処理だけ実行させたくない場合は、continue文を使用します。
以下は、continue文の使用例です。

for(let i = 1;i <= 10;){
	if(i % 2 !== 0){
		continue;
	}
	console.log(i);
}

continue文を使用すると、繰り返し処理内の他の処理をスキップし、次の繰り返し処理に進みます。上記のコードを実行すると、if文にて変数iが奇数であると判断された時点で処理がスキップされ、「2,4,6…」といった偶数のみ出力されます。

JavaScriptのfor文を応用した書き方

「JavaScript」のfor文には、以下のような応用した書き方があります。

• カンマ演算子で複数の変数・変化式
• カウンタの更新値を減らす処理
• カウンタをひとつ飛ばして更新
• breakを2重ループで使う
• continueを2重ループで使う

ここからは、for文の応用について解説していきます。

カンマ演算子で複数の変数・変化式

「JavaScript」のfor文では、カンマ演算子を使用することで複数の変数・変化式を扱えます。

カンマ演算子を使う基本的な構文は、以下の通りです。

for(初期化式1,初期化式2; 条件式; 変化式1,変化式2){
	繰り返したい処理
}

初期化式と変化式を2つ定義し、カンマ区切りで指定することによって、扱う変数・変化式を複数にできます。

注意点として、初期化式は異なる変数を定義します。

以下は、具体的な使用例です。

for(let i = 0,j = 5;i < 5;i++,j--){
	console.log(`i:${i} j:${j}`);
}

上記コードを実行すると、i:0 j:5、i:1 j:4、…、i:4 j:1のように、iは1ずつ加算された値、jは1ずつ減算された値が出力されます。

カウンタの更新値を減らす処理

「JavaScript」のfor文で使用するカウンタは、+を使用して増やすだけでなく-を使用して減らすこともできます。

for(let i = 10; i > 0; i--){
	console.log(i);
}

i++は「i = i + 1」と同じ処理で、++のことは「インクリメント演算子」と呼ばれます。同様にi–は–は「デクリメント演算子」と呼ばれ、「i = i – 1」の処理と同じ、上記は、10,9,8,7…というように値が1ずつ減算されながら出力されます。

カウンタをひとつ飛ばして更新

「JavaScript」のfor文でカウンタをひとつ飛ばしで更新する方法には、continueを使うよりも、以下のようなシンプルな方法が適切です。

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

このように、加算式を「i = i + 2」とすることでループ度にカウンタの値を2ずつプラスすることができます。
上記のコードを実行すると、0,2,4…というように値がひとつ飛ばしで出力されます。

breakを2重ループで使う

「JavaScript」のfor文は、for文の中にfor文を入れることで入れ子構造を作れます。その中でbreak文を使うと、現在のループから1つ外側のループに移動します。

for(let i = 0; i < 10; i ++){
	console.log(`i:${i}`);
	for(let j = 0; j < 10; j++){
		if(j === 3){
			break;
		} 
	console.log(`j:${j}`);
	}
}

上記コードを実行すると、内側のループ(j)が3のときに次の外側のループ(i)に移動が可能です。break文は実行された時点で残りの処理もスキップするため、i:0,j:0,j:1,j:2,i:1,j:0,j:1…というような出力結果になります。

ただしfor分のループ処理を3重・4重…と使用するのは、コードの可読性および保守性を悪くします。コードを書くときはfor文の入れ子構造は最小に抑えるか、使用しない方法を模索することを心がけましょう。

continueを2重ループで使う

for文の2重ループの中でcontinueを使用すると、breakのときと違った動きをします。

for(let i = 0; i < 10; i ++){
	console.log(`i:${i}`);
	for(let j = 0; j < 10; j++){
		if(j === 3){
			continue;
		} 
	console.log(`j:${j}`);
	}
}

上記コードを実行すると、内側のループ(j)は「j:1,j:2,j:4,j:5…」というように、jが3のときだけ処理をスキップし、その後外側のループ(i)に戻ります。
breakでは4以降の内側ループ(j)を完全にスキップするのに対し、continueでは4以降も出力され、内側(j)1回分のループのみをスキップするということがわかるでしょう。

for…in文でオブジェクトの中身を繰り返す方法

オブジェクトの中身を取り出す際に使われる方法として、「for…in文」があり{キー : 値}の形で定義されます。for…in文では、オブジェクトから取得したプロパティを順番に変数に代入し、プロパティの数だけ処理を繰り返します。

詳細な例は以下の通りで、const appleがオブジェクトです。

const apple = {
	price:100,
	color:'red',
	shape:'round'
}

for(let key in apple){
	console.log(`プロパティ:${key}`);
	console.log(`値:${apple[key]}`);
}

上記コードを実行すると、「プロパティ:price」「値:100」をプロパティの数だけ実行します。また、「オブジェクト名[変数名]」と指定することで、値の出力も可能で、以下のように出力されます。

プロパティ:price
値:100

プロパティ:coler
値:red

プロパティ:shape
値:round

for…in文が非推奨と言われる理由

for…in文は、「JavaScript」の多くのガイドラインで非推奨とされています。

class Fruits{
	constructor(price,color,shape){
		this.price = price;
		this.color = color;
		this.shape = shape;
	}
}

Fruits.prototype.helloWorld = function(){
	console.log('Hello World!');
}

const apple = new Fruits(100,'red','round');

for(let key in apple){
	console.log(`プロパティ:${key}`);
	console.log(`値:${apple[key]}`);
}

上記コードのように、prototypeでクラスにメソッドを追加しfor…in文を実行すると、以下のように追加されたhelloWorldメソッドも合わせて取得してします。その結果、意図しない不具合の発生に繋がってしまうでしょう。

プロパティ:helloWorld
値:function() {
	console.log('Hello World!');
}

これを回避するには、for文内にhasOwnPropertyメソッドを以下のように使用します。

for(let key in apple){
	if(apple.hasOwnProperty(key)){
		console.log(`プロパティ:${key}`);
		console.log(`値:${apple[key]}`);
	}
}

hasOwnPropertyメソッドは、オブジェクトが指定したプロパティを持っていればtrueを、持っていなければfalseを返すメソッドです。そのため上記コードのように条件分岐を加えて実行すると、helloWorldメソッドはプロパティとなる$keyを持たないため、配列としての取得を回避できます。

for…of文による繰り返し処理の方法

for…of文はES6から導入された新しい構文で、配列・文字列・Map・DOMなどの繰り返し処理に使用できます。

for…of文の使い方は、for…in文とよく似ています。

const fruits = ['apple','grape','orange','melon','pineapple'];

for(let fruit of fruits){
	console.log(fruit);
}

上記コードを実行することで、配列fruitsの値が1つずつ取得され、順番にconsole.logで出力が可能です。

for…of文を使う際の注意点

for…of文はイテラブル・オブジェクトのみ扱え、for…in文のようにオブジェクトを扱おうとするとエラーになります。イテラブルとは反復可能という意味で、文字や数値の列など1つずつ繰り返しの処理で取得できる要素を指します。そのため、{ キー: 値 }で表現されるオブジェクトとは異なります。

const apples = {
	price:100,
	color:'red',
	shape:'round'
}

for(let apple of apples){
	console.log(apple);
}

for…of文で上記コードを使うことは基本的にはできません。イテラブル・オブジェクトを自身で作成する必要があります。

forEach文で配列の中身を取り出す方法

配列の中身を取り出すためのメソッドとして、forEachメソッドがあります。

const fruits = ['apple','grape','orange','melon','pineapple'];

fruits.forEach((fruit)=>{
  console.log(fruit);
});

上記のコードを実行すると、配列fruitsの値が1つずつ順番に出力されます。
またforEachメソッドは、第2引数でインデックス番号、第3引数で処理している配列を取得可能です。

const fruits = ['apple','grape','orange'];

fruits.forEach((value, index, array)=>{
  console.log(value);
  console.log(index);
  console.log(array);
});

上記コードを実行することで、「apple」「0」「(3)[‘apple’,’grape’,’orange’]」…という形式で、インデックス番号と配列の情報を順番に出力できます。

forEach文を使う際の注意点

forEachメソッド内でbreakを使用するとエラーがでるので、注意が必要です。
もしbreakで処理を抜けたい場合は、forEachメソッドと似た機能を持つsomeメソッドを使います。

const fruits = ['apple','grape','orange','melon','pineapple'];

fruits.some(value => {
    if (value === 'orange') {
        return true;
    }
    console.log(value);
});

上記のコードを実行すると、valueがorangeだと判定された時点で処理が中断されます。そのため、「apple」「grape」までしか出力されません。

JavaScriptのfor文を使った繰り返し処理をマスターしよう

「JavaScript」のfor文は、同じ処理を複数回繰り返す際に使用できます。for文とbreak文やcontinue文を組み合わせれば、処理を途中で中断したり、特定条件でスキップしたりできます。

また、似たような働きをするものにfor…in文、for…of文、forEachメソッドなど異なる手法があり、これらにはオブジェクトに適用できる手法もあります。

繰り返し処理は、プログラミングのあらゆる場面で使用される重要な処理です。ぜひ、「JavaScript」のfor文を使った繰り返し処理をマスターしてください。