🤩 forEachとfor Loopsの違い

🐤 The for loop
次の配列にはobjectの例があります.

const foodArray=[
  {name:'Burrito'},
  {name:'Pizza'},
  {name:'Burger'},
  {name:'Pasta'}
  ];

foodArrayの各オブジェクトを反復するには、forループを使用します.

for(let i=0; i<foodArray.length; i++){
  console.log(`i value: ${i} | Food Name:`, foodArray[i]);
}
//Result:
//i value:0 | Food Name :{name:'Burrito'}
//i value:1 | Food Name :{name:'Pizza'}
//i value:2 | Food Name :{name:'Burger'}
//i value:3 | Food Name : {name:'Pasta'}

🐤 forEach
forEachを使用すると、for loopと同じ結果が得られます.

foodArray.forEach((food,index)=>{
 console.log(`i value: ${index} | Food Name:`, food);
});
// Result:
// i value: 0 | Food Name: { name: 'Burrito' }
// i value: 1 | Food Name: { name: 'Pizza' }
// i value: 2 | Food Name: { name: 'Burger' }
// i value: 3 | Food Name: { name: 'Pasta' }

どうして同じ結果が得られるの?
foreachはすべての配列に存在します.例えば、上記の例では、foodArrayはArrayである.Prototypeから様々なメソッドの配列を継承します.
🐥forEachとfor Loops?
それは開発者の心です.しかし、いくつかの事項を考慮する必要があります.下を見て!!
1.foreachは変数のスキャンをblockに保持します.forEachの利点は、そのコールバック関数を使用してforeachのscope内で変数を維持することである.変数を外部に割り当ててforEachで再使用する場合は、外部変数
その価値を維持する.

const num =4;
const arr = [0,1,2];
arr.forEach(num =>{
  console.log(num);
});
//Result:
//0
//1
//2
console.log(num);
//Result
//4

2.foreachを使用すると、エラーの確率を低減できます.forEach메서드を使用する場合、アレイは関連付けられます.プロトタイプメソッドを直接呼び出します.
逆に、for루프を使用する場合、実際の成長自体、従うべき条件、および増加する変数(i)を設定する必要があります.

for (let i = 0; i <= foodArray.length; i++) {
  console.log(`i value: ${i} | Food Name:`, foodArray[i]);
}

// Result:
// i value: 0 | Food Name: { name: 'Burrito' }
// i value: 1 | Food Name: { name: 'Pizza' }
// i value: 2 | Food Name: { name: 'Burger' }
// i value: 3 | Food Name: { name: 'Pasta' }
// i value: 4 | Food Name: undefined

条件は<から<=に変更された.既存の配列の長さより小さく、3から4までです.
ただしindex 4は、配列に値がないため、定義されていない配列を返します.
forEachメソッドを使用すると、このエラーは発生しません.
3.foreachは読みやすい.
これは開発者の裁量に依存するが、for loopに比べてforeachメソッドが簡潔である理由は以下の通りである.forEach메서드は、各foodタイプを反復的にコールバックする.for loopの場合、一時i変数を使用して配列にアクセスします.この方法は最初は汚れていないように見えますが、より多くのコードを追加すると、より複雑になる可能性があります.

for(let i =0; i<foodArray.length; i++){
  let food = foodArray[i];
  console.log(food);
  for(let j=0; j<food.ingredients.length; j++){
    let ingredient = food.ingredients[j];
    console.log(ingredient);
  }
}

以上のように,一時変数i,jを置くとコードが混乱する.逆にforeachを使用することができます.以下に示します.

foodArray.forEach((food)=>{
  console.log(food);
  food.ingredients.forEach((ingredient)=>{
    console.log(ingredient);
  });
});

前述したように、一時変数を除去し、コード行を減らすことができる.
4.for loopを使用すると、for loopからより早く離れることができます.
for loopを使用する最大の理由は、ループをより早く終了する必要があることです.
配列に特定のfoodを返す場合は、if文を使用して基準が一致しているかどうかを確認し、loopから終了します.
forEachメソッドは各foodを反復し、パフォーマンスの問題を引き起こす可能性があります.

for(let i =0; i<foodArray.length; i++){
  if(foodArray[i].name ==='Pizza'){
    console.log('I Love Pizza');
    break;
  }
}

break키워드を使用すると、ループの継続を停止することができる.
上記は以下を参考にして翻訳します.
注意:https://alligator.io/js/foreach-vs-for-loops/