[Front end] JavaScript 이터레이블(iterable) for in, for of

 

이터레이블(iterable)은 "반복자" 의미로 iterator를 통해 next()로 순회가 가능한 구조를 말한다. Array, String, Map, Set, Dom 구조가 대표적이다.

for in, for of

객체를 순회할 때 사용되며, iterator.next().done 값이 true가 될 때까지 next()로 순회한다.

// 배열
for (const val of ['a', 'b', 'c']) {
  console.log(val); // "a","b","c"
}
// 문자열
for (const val of 'abc') {
  console.log(val); //"a","b","c"
}

for (let i in 'string') { console.log(i); } // 0, 1, 2, 3, 4, 5
for (let i of 'string') { console.log(i); } // s, t, r, i, n, g

for in과, for of의 차이는 반환 값의 차이가 있다. for in은 index를 반환하고, for of는 값을 반환한다.