Javascript forEach vs for Loops 차이

1. for loop

for (statement1; statement2; statement3){ 

...

}

를 통해서 반복문을 돌릴때, statement1, statement2, statement3은 의무가 아니다.

statement1은 loop 돌기 전에 실행되고, statement2는 코드가 실행되기 위한 조건이며

statement3는 각 반복 후에 실행된다.

 

예를들어 아래의 예시처럼 foodArray 객체의 각 object를 돌면서 출력하고 싶으면, for loop와 forEach method를 모두 사용할 수 있다.

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

// Using forEach method
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' }

2. forEach method

forEach method는 모든 array에서 존재하며, 위의 경우 foodArray는 Array.prototype으로 부터의 모든 다양한 method들을 상속받는 배열이다. forEach method경우, 각 반복마다 실행되는 function을 넘겨주는 것이다.

 

그럼 이 둘중에 무엇을 사용해야 할까?

 

1. forEach를 사용하면 우발적인 에러의 가능성을 줄일 수 있다.

위 코드에서 statement2의 <를 <=로 바꾸면 3에서 끝나는것이 아니라 한번 더 돌아 4에서 끝나는데, Food Name : undefined가 추가적으로 출력되게 된다.

따라서 forEach를 사용하면 이러한 에러 가능성이 줄어 든다.

 

2. forEach를 사용하는것이 더 읽기쉽다

for loop보다 더 깨끗하다. 아래 예시를 보면 확인할 수 있다.

for loop의 statement에서 사용하는 변수 i같은 경우, 한번 쓰면 그렇게 어지럽게 보이진 않지만, 중첩으로 여러번 사용된다면 복잡해진다.

// for loop
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);
  }
}

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

 

3. for loop를 사용하면 break를 통해서 loop을 빨리 빠져나올 수 있다.

for loop안에 if문을 사용하여 break를 통해서 특정 조건에 부합하면 loop을 다 돌기전에 빠져 나올 수 있다.

예시 )

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

 

결론은 forEach나 for loop를 사용하는것은 상황에 맞게 사용하면 된다.

일단 문제를 해결하고 난 다음에, 리팩토링은 그 이후에 하면 된다.

 

reference : 

https://alligator.io/js/foreach-vs-for-loops/

forEach vs for Loops in JavaScript: What's the Difference?