🐤 The for loop
아래 array안에 object가 있는 예시를 살펴보자.
const foodArray=[
{name:'Burrito'},
{name:'Pizza'},
{name:'Burger'},
{name:'Pasta'}
];foodArray안 각 object를 iterate하기 위해 for loop를 쓰고자 한다.
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는 모든 array안에 존재한다. 위 예시를 예를 들면 foodArray는 Array.prototype에서 다양한 메서드를 모두 상속하는 array이다.
🐥forEach와 for Loops 중 무엇을 사용해야 하는가?
그건 개발자 마음이다. 그러나, 고려해야할 사항들이 있다. 아래를 봐보자!!
1. forEach는 변수의 스코프를 block으로 유지한다.
forEach의 좋은 점은 그 안에 있는 콜백함수를 사용하여 forEach의 스코프내에서 변수를 유지하게한다는 것이다. 만약 변수를 외부에 할당하고 forEach내에서 재사용하려고 하면 외부에 있는 변수는
그 값을 유지한다.
const num =4;
const arr = [0,1,2];
arr.forEach(num =>{
console.log(num);
});
//Result:
//0
//1
//2
console.log(num);
//Result
//42.forEach를 사용하면 실수로 오류가 발생할 확률이 낮아진다.
forEach메서드를 사용할 때 배열과 관련하여 Array.prototype메서드를 직접호출한다.
반면, 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는 배열에 아무 값이 없기에 undefined를 리턴하게 된다.
이러한 오류는 forEach메서드를 사용하게되면 발생하지 않는다
3. forEach는 읽기 쉽다.
이는 개발자의 재량에 달렸지만, for loop보다 forEach메서드가 더 깔끔하다고 느끼는 이유는 다음과 같다. forEach메서드는 iteration내에 각 food type을 callback으로 전달한다.
for loop의 경우 임시 i 변수를 사용하여 array에 접근한다. 이러한 방법은 처음엔 지저분해 보이지 않지만 더 코드를 추가하게되면 더 복잡해질 수 있다.
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);
});
});위와 같이 작성해주면 임시 변수를 없애주고 code 줄을 줄여줄 수 있다.
4.for loop를 사용하면 더 일찍 for loop에서 벗어날 수 있다.
for loop를 사용하는 가장 큰 이유는 루프에서 더 일찍 빠져나와야할 필요가 있을 때이다.
만약, 배열에서 특정 food를 리턴하길 원한다면, if문을 써서 기준이 일치하는지 확인하고, loop에서 벗어날 수 있다.
forEach메서드는 각 food를 iterate하게되고 성능문제를 줄 수 있다.
for(let i =0; i<foodArray.length; i++){
if(foodArray[i].name ==='Pizza'){
console.log('I Love Pizza');
break;
}
}break키워드를 사용하면, 루프가 계속되는 것을 멈출 수 있다.
위 글은 아래 글을 참고해 번역하였다.
