Iteration

반복 가능한 객체를 순회한다.

• Iterable한 객체란 반복 가능한 객체를 의미
• Iterable한 객체는 for...of, spread 연산자, 구조분해 할당 등을 사용할 수 있음 e.g. Array, String, NodeList, Map, Set

const array = [1, 2, 3];
for (const item of array) {
	console.log(item);
} 
// 1 2 3 이 한줄씩 출력됨

for...of 반복문의 장점

• 어떤 데이터를 가져오려는지 명시적으로 나타낼 수 있어서 단순 for문 보다 가독성이 좋음
• array의 length에 대한 정보 없이 배열만으로 순회가 가능

---

✍ 어떤 객체가 iterable한 객체인걸 정확히 어떻게 알 수 있냐?
⇒ Symbol.iterator를 먼저 알아야 한다.

Symbol.iterator 확인하기

1. in 연산자 사용

const array = [1, 2, 3];
console.log(Symbol.iterator in array); 
// array의 속성 중에서 Symbol.iterator라는 것이 있냐
// true

2. array.values() 사용

const arrIterator= array.values(); 
console.log(arrIterator);
// [Array Iterator] {} => Array Iterator 라는 객체를 반환함

3. array의 property로 찾아보기

const arrIterator = array[Symbol.iterator](); 
// const length = array['length']; 이렇게 array의 property를 찾는거랑 같은 형식
// array[Symbol.iterator]는 function이기 때문에 ()로 실행시켜줌
console.log(arrIterator); 
// [Array Iterator] {} => Array Iterator 라는 객체를 반환함

결론 : Symbol.iterator는 array에 있는 속성 중 하나이다.

---

콘솔에서 확인해보니 Array Iterator 객체에는 next라는 메소드가 있음

"그러면 arrIterator는 어쨌든 객체이고 그 객체가 next라는 메소드를 갖고 있다면 arrIterator.next();로 실행할 수 있다는거지?"

✍ 실행해보자!

console.log(arrIterator.next()); // { value: 1, done: false }
console.log(arrIterator.next()); // { value: 2, done: false }
console.log(arrIterator.next()); // { value: 3, done: false }
console.log(arrIterator.next()); // { value: undefined, done: true }
// value와 done이라는 프로퍼티를 가진 object가 반환됨

• value : 최근 순회한 collection의 요소
• done : 반복할 요소가 더 이상 없는지? 반복이 다 끝났는지?

반복 가능한 객체에서 for… of를 쓰면 이 Iterator를 찾아내서 next 메소드를 계속 호출한다고 보면 된다. 그렇게 계속 실행하면서 value의 값을 받아서 출력해주다가 done 속성값이 true가 되면 break로 빠져나온다.

동작 원리를 풀어서 보면 아래와 같은 식으로 된다고 생각하면 된다.

while (true) {
	const item = iterator.next();
	if (item.done) break;
	console.log(item.value);
}

📌 iterable한 객체란 이 Symbol.iterator라는 속성을 갖고 있어서 반복이 가능한 객체를 뜻한다.
=> 다시 말해, next method에서 { value : , done : }(Iterator 객체)을 return하는 Symbol.iterator를 갖고 있다면 for… of나 spread 연산자, 구조분해할당 등을 사용할 수 있다!

---

📌 values() 메서드는 배열의 각 인덱스에 대한 값을 가지는 새로운 Array Iterator 객체를 반환한다. Array Iterator에는 이미 그 배열에 대한 값들이 next().value 로 들어있다.
따라서 해당 배열을 for…of로 돌릴 수도 있지만 Array Iterator를 for…of로 돌릴 수도 있다.
(MDN 설명)

// 확인해보기
const array1 = ['a', 'b', 'c'];
const arrVal = array1.values(); // iterator 반환
for (const value of array1.values()) {
  if (value === arrVal.next().value) {
    console.log('yes');
  } else {
    console.log('no')
  }
  console.log(value);
}

---

for… in과 for …of의 차이

• for… of는 Symbol.iterator를 갖고 있는 array나 NodeList, Set 등에서만 쓸 수 있다. (iterator의 next().value값을 가져와야하기 때문에) ⇒ 일반 object에서는 사용 못함
• for… in은 object와 array 둘 다에서 쓸 수 있으며 object에서는 key값을 가져오고 array에서는 index값을 가져옴

const object = { a: 1, b: 2, c: 3 };

for (const property in object) {
  console.log(`${property}: ${object[property]}`);
}

// expected output:
// "a: 1"
// "b: 2"
// "c: 3"