for in vs for of

LeetCode 문제를 풀다가 for of가 쓰이는 것을 봤는데 of랑 in 의 차이점이 궁금해졌다

---

forEach 반복문

• forEach 반복문은 Array 객체에서만 사용가능
  (ES6부터는 Map, Set 등에서도 지원)
• 배열의 요소들을 반복해 작업 수행가능
• forEach 구문 인자로 콜백함수를 등록해 배열 요소들이 반복될 때 콜백함수가 호출되며, 콜백함수에서 요소들의 인덱스와 값에 접근 가능

ex)

var items = ['item1', 'item2', 'item3'];

items.forEach(function(item) {
    console.log(item);
});
// 출력 결과: item, item2, item3

---

for...in 반복문

• for in 반복문은 객체의 속성들을 반복해 작업 수행 가능
• 모든 객체에서 사용 가능
• for in 구문은 객체의 key값에 접근할 수 있지만 value값에 접근 할 수 없다

ex)

var obj = {
    a: 1, 
    b: 2, 
    c: 3
};

for (var prop in obj) {
    console.log(prop, obj[prop]); // a 1, b 2, c 3
}

---

for...of 반복문

• for of 반복문은 ES6에 추가된 컬렉션 전용 반복 구문
• for of 구문을 사용하기 위해선 컬렉션 객체가 [Symbol.iterator] 속성을 가지고 있어야 한다

ex)

var iterable = [10, 20, 30];

for (var value of iterable) {
  console.log(value); // 10, 20, 30
}

---

for...in 과 for...of 의 차이점

• for...in : 객체의 모든 열거 가능한 속성에 대해 반복
• for...of : [Symbol.iterator] 속성 가지는 컬렉션에 적용(배열 뿐만 아니라, 문자, arguments, NodeList(getElementByClassName,querySelectorAll),Map, Set과 같은 자료형에도 사용이 가능)