[자바스크립트] iterable,iterator

안녕하세요. 이번시간에는 iterable과 iterator에 대해 글을 작성해보겠습니다.

iterable의 영단어 뜻은 반복가능한이라는 의미이며 iterator는 반복자라는 의미입니다.

이 영단어 뜻대로 iterable한 요소는 배열같이 반복이 가능한 것들을 나타냅니다.

때문에 for of 같은 배열을 순회하는것은 iterable한것만 순회할 수 있고 iterable하지 않는 것을 순회하면 에러가 발생합니다.

let test = {a:"1",b:"2"};

for(let i of test) {
  //error: Uncaught TypeError: test is not iterable
  console.log(i)
}

좀 더 깊게 들어가면
itrable은 iterator를 리턴하며 Symbol.iterator를 가진값이며
iterator는 value와 done을 리턴하는 next 메서드를 가진 값입니다.

value는 순회할때 발생하는 값이고, done는 순회가 다 끝났는지 아닌지 여부를 나타내는 boolean입니다. 순회가 다 안끝난 상태면 false, 끝났으면 true를 나타냅니다.

---

더 나아가 generator라는 것이 있습니다.
genreator는 iterator를 발생시키는 함수입니다.

구현은 function뒤에 별표 를 붙여 함수를 선언합니다.

function* gen() { 
  yield 1; yield 2; yield 3; return -1; 
  };

const iter = gen(); 
console.log(iter.next())
console.log(iter.next())
console.log(iter.next())
console.log(iter.next())
console.log(iter.next())

gen()이라는 제너레이터를 만들고
그 제너레이터를 이용해서 iter라는 iterator를 만들었습니다.

iterator는 next메서드를 가졌으며 그것으로 순회할 수 있는 것입니다.

{
value:1,
done:false
}
{
value:2,
done:false
}
{
value:3,
done:false
}
{
value:-1,
done:true
}

{
value:undefined,
done:true
}

위 콘솔로 next() 계속 찍으면 위 처럼 값이 나오는데
return 직전에 yield 로 나타낸 value값 까지 done이 false로 나오면서 순회하고 그 이후에는 done이 true로 나오면서 순회가 끝났음을 의미합니다.

generator - iterator를 만들어줌
iterator - next() 메서드를 지니며 메서드를 실행할때마다 순회를함. 순회가 끝나면 done이 true로 바뀜
iterable - 배열과 같이 순회가 가능하다는 의미이며, Symbol.iterator 프로토타입을 가지고 있음

//iterable한 배열
let array = [1,2,3,4,5]
//프로토타입을 실행시켜 iterator로 반환
let it = array[Symbol.iterator](); 
//iterator의 메서드를 실행시켜 value 1 2 3 순차적으로 출력
console.log(it.next())
console.log(it.next())
console.log(it.next())