[ES6] iterator, generator, async/await에 대하여

Iterator

배열 순회의 역사

//ES5 이전
for (var index = 0; index < myArray.length; index++) {
  console.log(myArray[index]);
}

//ES5 이후
myArray.forEach(function (value) {
  console.log(value);
});

//ES6 이후
for (var value of myArray) {
  console.log(value);
}

 

iterable 객체란?

Symbol.iterator 심볼을 속성으로 가지고 있고, 이터레이터 객체를 반환하는 객체이다.

 

Iterator 객체란?

next() 메서드를 구현하고 있고, done과 value 속성을 가진 객체를 반환하는 객체이다.

for of 루프는 순회를 시작하기 전, [Symbol.iterator]() 메소드를 호출하여 이터레이터 객체를 얻은 후, 순차적으로 next() 메소드를 호출하면서 하나씩 순회하는 것이다. done 값이 true 이면 순회를 멈춘다.

 

 

Generator

제너레이터(Generator) 함수는 이터러블을 생성하는 함수이다. 

제너레이터 함수를 사용하면 이터레이션 프로토콜을 준수해 이터러블을 생성하는 방식보다 간편하게 이터러블을 구현할 수 있다. 또한 제너레이터 함수는 비동기 처리에 유용하게 사용된다. 제너레이터 함수는 function* 키워드로 선언한다. 그리고 하나 이상의 yield 문을 포함한다.

 

 

제너레이터 함수는 일반 함수와 같이 함수의 코드 블록을 한 번에 실행하지 않고 함수 코드 블록의 실행을 일시 중지했다가 필요한 시점에 재시작할 수 있는 특수한 함수이다.

 

일반 함수를 호출하면 return 문으로 반환값을 리턴하지만 제너레이터 함수를 호출하면 제너레이터를 반환한다. 이 제너레이터는 이터러블(iterable)이면서 동시에 이터레이터(iterator)인 객체이다. 다시 말해 제너레이터 함수가 생성한 제너레이터는 Symbol.iterator 메소드를 소유한 이터러블이다. 그리고 제너레이터는 next 메소드를 소유하며 next 메소드를 호출하면 value, done 프로퍼티를 갖는 이터레이터 리절트 객체를 반환하는 이터레이터이다.

 

 

 

Async/Await

비동기 코드를 작성하는 새로운 방법. 이전에는 callback이나 Promise를 사용해야 했다.

// Promise를 사용하 예
const makeRequest = () =>
  getJSON()
    .then(data => {
      console.log(data)
      return "done"
    })

makeRequest()

// async, await를 사용한 예
const makeRequest = async () => {
  console.log(await getJSON())
  return "done"
}

makeRequest()

 

사용하는 이유?

(1) 간결함과 깔끔함.

(2) 에러 핸들링이 promise보다 편리하다.

(3) promise 체인에서 반환되는 error stack은 어디서 에러가 발생했는지 알 수 없다. 하지만 async/await에서 발생한 error stack은 에러를 포함한 함수를 가리킨다.

(4) 디버깅이 편리하다.

Promise는 return문 안에 실행되는 문장을 디버깅할 수 없다. 하지만 async/await을 사용하면 디버깅이 가능하다.

 

 

 

참고 사이트

https://poiemaweb.com/es6-iteration-for-of

Iteration & for...of | PoiemaWeb

https://poiemaweb.com/es6-generator

Generator | PoiemaWeb