[JS] 클로저와 제네레이터 함수 비교 - Closer, Generator Function

클로저와 제네레이터 함수에 대해서 알아 보자.

 

클로저와 제네레이터 함수는 둘 다 함수 내부에 있는 값을 기억하고 있을 수 있다는 공통점이 있다. 하지만 이 둘은 동작과 기능에서 차이가 있는데, 이 둘의 차이를 알아보도록 하자.

 

- 클로저의 경우

function counter(){
	let count = 0;
    
    return () => {
    	return count++;
    }
}

let myCounter = counter();
console.log(myCounter()) // 0
console.log(myCounter()) // 1
console.log(myCounter()) // 2

클로저의 경우 내부 함수를 리턴하는 구조로 이루어진다. 리턴하는 함수나 메서드에 의해서만 외부 함수에 접근할 수 있으며, 실행 컨텍스트의 내부 컨텍스트에서의 외부 컨텍스트에 대한 체이닝에 의해서 참조가 가능하다.

 

- 제네레이터 함수의 경우

function* infiniteCounter() {
  let i = 0;
  while (true) {
    yield i++;
  }
}

const counter = infiniteCounter();
console.log(counter.next().value); // 0
console.log(counter.next().value); // 1
console.log(counter.next().value); // 2

제네레이터 함수는 function*로 선언할 수 있으며, yield에 의해서 값이 리턴된다. yield 키워드가 가장 중요한 요소라고 할 수 있는데, yield 키워드는 컨텍스트의 실행을 멈추고 그 상태로 보존한다. 마치 브레이크 포인트처럼. next() 메서드로 호출했을 때 멈춘 컨텍스트를 복원해 실행하고, value와 진행이 끝났음을 표시하는 done를 객체 형태로 반환한다. {value, done}

 

return 키워드와 yield 키워드의 공통점은 값을 반환한다는 점이고, return 구문은 한번 반환하고 나면 실행이 종료되지만, yield는 그 상태로 컨텍스트가 보존된다는 차이점이 있다. 

 

- 컨텍스트 레벨에서 클로저와 제네레이터 함수의 차이점 정리

컨텍스트 레벨에서 클로저와 제네레이터 함수의 차이점은 클로저는 상위 스코프 함수와의 연결 상태를 통해 GC의 동작을 피하고 값을 유지한다는 점이고, 제네레이터 함수는 실행 중이었던 상태의 컨텍스트를 멈춘 상태로 보존한다. 그로 인해 제네레이터 함수는 좀 더 '순서'를 보장하는 동작을 할 수 있다.