반복문 (loop)

---

반복문은 특정 로직을 반복할 때 사용하는 문법.
프로그래밍 언어에서 가장 흔하게 활용한다,

for (var i = 0; i < 10; i++) {
  console.log(i); // 0부터 9까지 출력
}

자바스크립트에도 위와 같은 반복문을 많이 사용하나?
정답은 NO
최적의 성능 튜닝을 위해서 고의로 일반 for문을 사용하는 경우를 제외하고는 다음과 같은 반복문을 주로 사용한다.

---

1.forEach()

forEach 반복문은 배열에 사용하기 좋은 반복문.

var arr = [10, 20, 30];
arr.forEach(function(value, index) {
  console.log('array index: ' + index + ' value : ' + value);
});

위코드의 결과
array index: 0 value : 10
array index: 1 value : 20
array index: 2 value : 30

---

2.for in

for in 반복문은 배열과 객체에 모두 사용할 수 있는 반복문.

var arr = [10, 20, 30];
var obj = {
  num: 10,
  str: 'hi',
  arr: [],
};

위 배열과 객체를 for in 반복문으로 순회하면

// 배열의 인덱스를 1개씩 접근하여 순차적으로 순회하는 경우
for (var key in arr) {
  console.log(arr[key]);
}

// 객체의 키를 1개씩 접근하여 순차적으로 순회하는 경우
for (var key in obj) {
  console.log(obj[key]);
}

결과
// 배열 반복문의 콘솔
10
20
30

// 객체 반복문의 콘솔
10
hi
[]

---

3.for of

for of 반복문은반복 가능한(iterable) 속성을 가지는 컬렉션에 사용하기 좋은 반복문.

TIP

반복 가능한(iterable) 속성은 아래의 두 조건을 만족합니다.

객체가 [Symbol.iterator] 메서드를 가지고 있어야 합니다.
[Symbol.iterator] 메서드는 iterator 객체를 반환해야 합니다.

var obj = {
    num: 10,
    str: 'hi',
    arr: [],
}

for (var prop of obj) {
    console.log(prop, obj[prop]); 
}

위와 같이 반복 가능하지 않은 객체에 대한 for of 반복문 사용은 에러남.

---

4. for of vs for in

TIP

for in VS for of

for in : 객체의 열거 가능한 속성에 대해 반복.
for of : 반복 가능한 속성을 가지는 컬렉션(Arrays, Objects, Map, ...)에 대해 반복.

var arr = [10,20,30]

// 배열을 각각 순회하는 경우
for (var num of arr) {
    console.log(num); 
}
for (var num in arr) {
    console.log(num); 
}

// 배열을 각각 순회하는 경우
// for of 반복문의 콘솔
10 20 30 

// for in 반복문의 콘솔
0 1 2

위의 코드를 통해 for in 이 배열의 인덱스에 접근하는 반면,
for of는 배열의 값 자체에 접근하는 것을 알 수 있다.
for in은 객체의 속성을 순회하기 때문에, 배열의 속성이자 key에 해당하는 index를 반환하며 순회
반면 for of는 반복 가능한(iterable) 배열의 요소를 순회하기 때문에, data를 직접 순회 !!