Javascript에는 여러가지 반복문이 있다
어떤 상황에서 어떻게 반복문을 사용해야 하는지 알아보자

🚩 for loop

for (int i = 0; i < 10; i++) {
  console.log(arr[i]);
};

• 가장 빠르고 단순하기 때문에 효율적이다
• 모든 자료형에 대해 사용 가능
• 중간에 loop 건너뛰기나 종료 가능 (continue or break)
• 반복범위 컨트롤 가능 (i++, i-, i+=2*i 등)
• 변수 활용 가능 (var i 값을 사용할 수 있다)

---

🚩 forEach

arr.forEach(function(v, i, arr) {
  console.log(v);
});

for (var i = 0; i <arr.length; i++) {
  console.log('element', i, arr[i]);
  console.log(arr[i].property1 + arr[i].property2);
  console.log(arr[i].property2);
};

arr.forEach (function (v, i) {
  console.log('element', i, v);
  console.log(v.property1 + v.property2);
  console.log(v.property2);
});

for문과 forEach를 비교해보았다 forEach는 복잡한 객체를 처리하는데 있어서
유리하고 for문 보다 가독성이 좋지만 구문 밖으로 return값을 받지 못한다
아래의 예를 참고해보자

var arr = [1,2,3,4,5];
var newArr = arr.forEach(function(e, i) {
  return e;
});
// undefined

• 빠른편이다
• Array 객체에서 사용 가능
• 일반 for문보다 가독성이 좋고 객체형을 다루기 쉽다
• for문과 다르게 중간에 끊을 방법이 있다 (return으로 skip 가능)
• return 값을 받지 못한다

---

🚩 filter

var newArr = arr.filter(function(v, i, arr) {
  return condition;
});

var arr = [1, 2, 3, 4, 5];
var newArr = arr.filter(function(v) {
  return v % 2 == 0;
});
// 2, 4

var distances = [
  {from: 'Seoul', to: 'Jejudo', distance: 23451},
  {from: 'Busan', to: 'Daegu', distance: 6457},
  {from: 'Daejeon', to: 'Incheon', distance: 233}
];
var filteredDistances = distances.filter(item => item.distance < 10000);
console.log(filteredDistances);

filter의 가장 큰 특징은 boolean 형태의 return 값을 갖는다
return 값이 false(기본값)일 경우 반환하지 않고 true일 경우 그 요소를 반환한다
위의 두가지 예를 보면 깔끔하게 원하는 요소들만 필터링할 수 있는 유용한 메서드다
또 다른 특징은 빈 요소를 반환하지 않는다는 것

var arr = [0, , , 1, , , , , 2, , , , 3];
var newArr = arr.filter(function() { return true; });
var newArr = arr.filter(function(el) { return el; });
// 0, 1, 2, 3

• 빠른편이다
• Array 객체에서 사용 가능
• 빈 배열 요소를 반환하지 않는다
• 대용량 배열 처리시 메모리 overflow 가능성이 있다
• return 값은 true/false이며 요소를 반환한다

---

🚩 map

var newArr = arr.map(function(v, i, arr) {
  return condition;
});

map은 filter와 문법이 똑같다 다른점이라고 하면
filter는 return 값으로 true/false만 쓸 수 있으며 요소를 반환하지만
map의 경우 요소가 아닌 새로운 값을 만들어서 return할 수 있다

var arr = [1, 2, 3, 4, 5];
var newArr = arr.map(function(v, i, arr) {
  return v + 1;
});
// 2, 3, 4, 5, 6

• 빠른편이다
• Array 객체에서 사용 가능
• 대용량 배열 처리시 메모리 overflow 가능성이 있다
• return 값 자체를 반환한다

---

🚩 reduce

var arr = [1, 2, 3, 4, 5];
var newArr = arr.reduce(function(acc, v, i, arr) {
  return acc + v;
});
// 15

reduce는 위에 나왔단 반복문들과는 개념과 사용법이 약간 다르다
가장 큰 특징으로는 첫번째 인자인 accumulator이다
return 값을 누적하는데 계속 전달받아 사용할 수도 있다

두번째 특징은 accumulator의 초기값을 설정할 수 있다는 점이다
optional하며 생략시에는 첫번째 return 값이 된다

var arr = [1,2,3,4,5]
var newArr = arr.reduce(function(acc, v, i, arr) {
  return acc + v;
}, 100);
// 115

첫번째 예시와 다르게 초기값 때문에 115라는 값이 나오게 됐다
어떻게 활용하느냐에 따라 reduce는 강력하고 확장성이 높다
accumulator의 값은 배열이 될 수도, object가 될 수도 있다

---

💡 성능비교