JavaScript Visualized: 💡🎁 Generators and Iterators

reference: https://dev.to/lydiahallie/javascript-visualized-generators-and-iterators-e36

ES6에 아주 멋있는 게 추가됐습니다. 그 이름은 제너레이터 함수입니다. 🎉 제가 사람들에게 제너레이터 함수에 대해 물으면 보통 돌아오는 대답은: “그걸 한 번 본 적은 있지만 좀 헷갈려서 그냥 안 봄”, “제너레이터에 대한 블로그 글을 수도 없이 읽었는데 아직도 이해가 안 돼”, “그걸 알지만 누가 그걸 쓸까” 🤔 또는 이런 것들이 아마 오랜 시간 동안 생각하며 나 자신과 나 대화겠죠. 하지만 이건 아주 좋은 기능입니다.

그럼, 제너레이터 함수가 뭘까요? 먼저 일반적이고 전통적인 함수를 보도록 하죠. 👵🏼

네 뭐 별 거 없죠! 로그를 4번 남기는 평범한 함수입니다. 호출을 해볼까요!

“근데 리디아, 왜 이 뻔한 함수를 보게 해서 내 인생의 5초란 시간을 허비했지?” 아주 좋은 질문입니다. 보통의 함수는 run-to-completion 모델을 따릅니다: 함수를 호출하면, 함수는 완료가 될 때까지 실행된다 (음, 어딘가에 에러가 없다면요.) 우린 임의로 중간에 우리가 원하는 시점에서 함수를 멈출 수가 없습니다.

이제 아주 멋진 부분입니다: 제너레이터 함수는 run-to-completion 모델을 따르지 않습니다! 🤯 이 말은 제너레이터 함수를 실행 중간에 임의로 중지 시킬 수 있다는 뜻일까요? 음, 비슷합니다! 이제 제너레이터 함수가 뭔지, 어떻게 사용하는지 보도록 하겠습니다.

우린 function 키워드 뒤에 * 기호를 사용하여 제너레이터 함수를 만들 수 있습니다.

하지만 이것이 제너레이터 함수를 사용하기 위해 해야하는 전부는 아닙니다! 제너레이터 함수는 실제로 일반적인 함수와 완전히 다른 방식으로 동작합니다:

• 제너레이터 함수의 호출은 제너레이터 객체를 반환하는데, 이는 이터레이터입니다.
• 제너레이터 함수 내에서 yield 키워드를 통해 실행을 중지 시킬 수 있습니다.

그런데 이것이 뭘 의미할까요!?

먼저 첫 번째로 가보죠: *제너레이터 함수의 호출은 제너레이터 객체를 반환합니다.* 일반적인 함수를 호출 할 때, 함수의 바디 영역이 실행되고 마지막으로 값을 반환합니다. 하지만 제너레이터 함수를 실행할 때는, 제너레이터 객체가 반환됩니다! 그럼 반환된 값을 로그로 남겼을 때 어떻게 생겼는지 보도록 하죠.

이제, 아주 복잡해보이는 것들 때문에 내적 비명을 (혹은 현실로 🙃) 지르실 거예요. 하지만 걱정 마세요. 여기 로그로 남겨진 속성들을 실제로 사용할 필요는 없습니다. 그렇다면 제너레이터 객체는 뭐가 좋은 걸까요?

먼저 잠깐 뒤로 가서 일반 함수와 제너레이터 함수의 두 번째 차이에 대해 답을 구해야 합니다: *yield 키워드를 통해 제너레이터 함수의 실행을 중지시킬 수 있습니다.*

제너레이터 함수로 우린 이렇게 쓸 수 있습니다. (genFunc는 generatorFunction의 줄임말입니다): 저기에서 yield 키워드가 하는 일은 뭐죠? yield 키워드를 만날 때마다 제너레이터의 실행이 정지됩니다. 그리고 가장 좋은 점은 다음에 함수를 실행하면, 이전에 멈춘 곳을 기억하고 그 곳에서부터 실행된다는 점이죠! 😃기본적인 동작들입니다. (나중에 애니메이션으로 보여드릴테니 걱정마세요):

1. 맨 처음 실행되면, 첫 번째 라인에서 멈추고 문자열 값  '✨' 을 줍니다.
2. 두 번째 실행에서는 이전에 yield 키워드가 있는 곳에서 시작을 합니다. 두 번째 yield 키워드가 나오기 전까지 내려가며 '💕' 값을 줍니다.
3. 세 번째 실행에서는 이전 yield 키워드에서부터 시작하며, return 키워드를 만날 때까지 실행되고 'Done!'을 반환합니다.

그런데..제너레이터 함수의 호출에서 반환한 것이 제너레이터 객체인데 어떻게 함수를 호출할 수 있을까요? 🤔여기에서 제너레이터 객체가 동작합니다!

제너레이터 객체는 next라는 메소드를 포함합니다(프로토타입 체인에서요). 이 메소드는 제너레이터 객체를 반복하는데 사용되는 것입니다. 하지만, yield로 값을 넘겨준 상태를 기억하기 위해 우린 제너레이터 객체를 변수에 할당해줘야 합니다. 전 그걸 genObj라고 부를건데 generatorObject를 줄였어요.

네, 우리가 이전에 봤던 복잡하게 생긴 녀석입니다. 그럼 genObj라는 제너레이터 객체에서 next메소드를 호출할 때 무슨 일이 일어나는지 보도록 하죠!

제너레이터는 첫 번째 라인에 있는 첫 번째 yield 키워드를 만날 때까지 실행됐습니다. 이것이 주는 객체는 value 속성과 done 속성을 포함하고 있습니다.

{ value: ... , done: ... }

value 속성은 우리가 넘겨줬던 값이랑 같습니다. done 속성은 Boolean 값으로, 제너레이터 함수가 반환될 때만 true가 됩니다. (yield가 아니예요! 😊).

제너레이터에서 반복하는 걸 멈췄는데, 마치 함수가 정지한 것처럼 보이죠! 이게 정말 멋진 겁니다. 그럼 next 메소드를 다시 호출해보죠! 😃

먼저, 문자열 First log!가 콘솔에 로그로 남겨집니다. 이건 yield나 return 키워드가 아니라 계속 진행됩니다! 그런 뒤에 '💕' 값이 있는 yield 키워드를 만나죠. 넘겨진 객체엔 value 속성의 값으로 '💕' 가 있고, done 속성이 있습니다. done 속성은 제너레이터가 아직 반환된 것이 아니기 때문에 false 입니다.

거의 다 왔어요! next를 마지막으로 호출해보죠.

문자열 Second log!가 콘솔에 로그로 남겨집니다. 그 뒤 return 키워드에 값으로 Done!을 만납니다. 반환된 객체의 value 속성엔 Done!이 있습니다. 이번엔 실제로 반환한 것이기 때문에 done 에는 true가 할당되었습니다!

done 속성은 실제로 아주 중요합니다. 우린 제너레이터 객체를 딱 한 번만 순회할 수 있습니다. 뭐라구요?! 그럼 next 메소드를 한 번 더 호출하면 무슨 일이 일어나죠?

그냥 계속 undefined가 반환됩니다. 만약 한 번 더 순회하고 싶다면, 새로운 제너레이터 객체를 생성하시면 됩니다!

---

방금 보셨던 것처럼, 제너레이터 함수는 이터레이터 (제너레이터 객체)를 반환합니다. 그런데, 이터레이터를 기다린다는 건? 우리가 for of 루프를 쓸 수 있다는 거고, spread 연산자를 반환된 개게에 쓸 수 있다는 걸까요? 그럼요! 🤩

한 번 [... ] 문법을 사용하여 넘겨진 값들을 spread 연산자로 넣어보죠.

또는 for of 루프를 사용하는 것도?!

엄청나게 가능성 있죠!

그런데 무엇이 이터레이터를 이터레이터로 만드나요? 우린 for-of 루프와 배열에 spread 문법, 문자열, Map, Set 또한 쓸 수 있기 때문입니다. 이것들은 실제로 이터레이터 프로토콜로 구현되어 있습니다: [Symbol.iterator]. 다음과 같은 값을 갖고 있다고 해보죠. (아주 장황합니다 💁🏼‍♀️):

array, string, generatorObject는 모두 이터레이터입니다! 한 번 [Symbol.iterator] 속성 값을 보도록 하죠.

그럼 반복할 수 없는 값들의 [Symbol.iterator]값은 어떨까요?

네. 그냥 없죠. 그럼..수동으로 [Symbol.iterator] 속성을 추가하고, 순회할 수 없는 것을 순회할 수 있도록 만들 수 있나요? 네 가능하죠! 😃

[Symbol.iterator]는 이터레이터를 반환해야 하고, 이전에 봤던 것 같은 객체에 next 메소드를 포함해야합니다: { value: '...', done: false/true }.

간단하게 유지하기 위해 (제가 좀 게을러서) 우린 기본적으로 이터레이터를 반환하는 것으로써 [Symbol.iterator]의 값을 제너레이터 함수로 할당할 수 있습니다. 객체를 순회할 수 있도록 만들어보고, 전체 객체를 넘겨줘보도록 하겠습니다:

우리 object 객체에 for-of 루프나 spread 문법을 사용할 때 어떻게 되는지 보시죠!

또는 객체의 키만 얻고 싶다면요. “너무 쉽죠. 그냥 this 대신 Object.keys(this)만 넘기면 됩니다!”

흠 한 번 해보죠.

오 이런. Object.keys(this)는 배열이예요, 그럼 넘겨지는 값은 배열이죠. 그리고나서 이 배열을 다른 배열에 spread 문법을 사용하면 결과는 배열을 포함하는 배열이 됩니다. 이걸 원하는 건 아니죠, 우린 각각의 키만 넘기고 싶으니까요!

좋은 소식이 있습니다! 🥳yield키워드를 사용하여 제너레이터 내에서 이터레이터를 각각 넘길 수 있어요, 그럼을 붙여서yield를 해보죠! 첫 번째 yield가 아보카도인 제너레이터 함수가 있다고 해보죠. 그리고 다음 yield에서 다른 반복자의 값들을 각각 넘겨주고 싶다고 합시다 (이번 경우엔 배열입니다). 여기에yield` 키워드를 쓸 수 있습니다. 그러 다음 다른 제너레이터에 *위임합니다!

genObj 이터레이터에서 순회되어 지기 전에, 위임된 제너레이터의 각각의 값들이 넘겨집니다.

이것이 객체의 모든 키를 각각 얻기 위해 우리가 해야하는 일들입니다.

---

제너레이터 함수의 다른 사용법은 우리가 (일종의) 옵저버 함수로 쓸 수 있다는 겁니다. 제너레이터는 데이터가 들어올 때까지 기다렸다가, 데이터가 전달 되어야 처리되게 됩니다. 예시입니다:

이 부분의 큰 차이점은 이전 예제처럼 yield [value] 형태로 작성하지 않았다는 거죠. 그 대신 second라는 변수에 값을 할당하고 yield의 값은 문자열 First!가 됩니다. 이것은 next 메소드가 처음 호출되면 넘겨받을 값이겠죠.

next 메소드를 처음 호출 했을 때 어떤 일이 일어나는지 보시죠.

첫 번째 라인에서 yield를 만나고, First! 값을 넘겨 받습니다. 그러면, 변수 second의 값은 뭘까요?

실제로 그 값은 우리가 다음 번에 호출할 next 메소드에 전달하는 값입니다! 이번 회차에 문자열 'I like JavaScript'를 전달해보겠습니다.

여기에서 next 메소드의 첫 번째 호출이 아직 입력값을 기억하지 않고 있다는 부분이 중요합니다. 첫 번째 회차의 호출을 통해 간단하게 옵저버를 시작할 수 있게 됩니다. 제너레이터는 계속 진행하기 전에 입력을 기다렸다가, next 메소드로 전달되는 값을 처리합니다.

---

그럼 왜 제너레이터 함수를 사용하려고 하나요?

제너레이터의 가장 큰 이점 중 하나는 지연 평가(lazily evaluate)가 된다는 점입니다. 이 말은 next 메소드의 호출 이후 반환받는 값이 사용자의 특정한 요청 이후에만 연산이 된다는 겁니다! 일반적인 함수는 이렇지 않죠: 나중에 값이 사용되어야 할 경우에 대비하여 모든 값들이 생성됩니다.

몇 가지 다른 사용 예시들이 있지만, 저는 보통 아주 큰 데이터셋을 순회할 때 더 많은 제어 방법을 얻기 위해 이걸 사용합니다!

북클럽의 목록이 있다고 가정해보죠! 📚 예제를 간단하게 하기 위해 하나의 거대한 코드 블럭이 아니라 각 북클럽은 하나의 멤버만 갖는다고 하겠습니다. 멤버는 현재 몇 가지의 책을 읽고 있고 그 책들은 books 배열에서 표현됩니다!

이제 id가 ev812인 책을 찾습니다. 그걸 찾기 위해 우리는 머리속으로 중첩된 for-loop나 forEach 같은 헬퍼를 떠올리겠지만, 그 말은 우리가 찾는 팀의 멤버를 찾은 뒤에도 데이터를 계속 반복한다는 것을 의미합니다!

제너레이터의 놀라운 점은 우리가 지시하지 않는 한 계속 실행되지 않는다는 점이죠. 이 말은 우리가 반환된 요소를 평가할 수 있고 만약 그것이 우리가 찾는 요소라면, 우린 next를 호출하지 않으면 되는겁니다! 코드를 보도록 하겠습니다.

먼저, 각 팀 멤버의 books 배열을 반복하는 제너레이터를 만들도록 하겠습니다. 팀 멤버의 books 배열을 함수에 전달하고, 그 배열을 순회하고 각각의 책을 넘겨줍니다!

완벽하네요! 이제 clubMembers 배열을 순회하는 제너레이터를 만들어야 합니다. 우린 클럽 멤버 그 자체에 대해 신경쓸 필요가 없고, 그들의 책들만 순회하면 됩니다. iterateMembers란 제너레이터에서 그들의 책을 넘겨받기 위해 iterateBooks 이터레이터를 위임합시다!

거의 끝났어요! 마지막 단계는 북클럽을 순회하는 것입니다. 이전 에제와 같이 북클럽 자체에 대해 신경쓸 건 없고, 클럽 멤버만(특히 그들의 책을) 확인하면 됩니다. 이제 iterateClubMembers 이터레이터를 위임하고 clubMembers 배열을 전달합시다.

이런 모든 것들을 순회하기 위하여 bookClub 배열을 iterateBookClubs 제너레이터에 전달함으로써 순회할 수 있는 제너레이터 객체를 얻어야 합니다. 이번에는 이터레이터라는 의미로 제너레이터 객체를 it 라고 하겠습니다.

id가 ev812인 책을 찾을 때까지 next 메소드를 호출해보죠.

됐네요! 우리는 우리가 찾는 책을 찾기 위하여 모든 데이터를 순회하지 않아도 됩니다. 그 대신 우리의 요청에 따라 데이터를 찾는거죠! 수동으로 매번 next 메소드를 호출하는 것은 효율적이지가 않으니…그 대신 함수를 만들어보죠!

함수에 우리가 찾을 책에 대한 id를 id에 전달하도록 합니다. 만약 value.id가 우리가 찾는 것이라면 간단하게 전체 value를(책에 대한 객체)를 반환하면 되고, 그게 아니라 id가 맞지 않을 시 next를 계속 호출하면 됩니다!

물론 이건 아주 작은 데이터셋이지만, 굉장히 많은 양의 데이터를 다룬다고 생각해보세요. 혹은 딱 하나의 값만 찾기 위해 우리가 분석해야할 스트림이 있다거나요. 보통 우리는 분석을 시작하기 위해 데이터셋 전체가 준비될 때까지 기다려야하죠. 제너레이터 함수라면 우린 간단하게 데이터의 작은 덩어리만 요청하고, 데이터를 확인하고, next 메소드를 호출할 때만 값이 생성되게 할 수 있습니다!

---

“도대체 이게 뭐야” 라고 생각이 되더라도 걱정마세요. 제너레이터 함수는 여러분들 스스로가 확실한 사용 예제를 갖고 사용해볼 때까지 꽤 헷갈릴거예요! 약간이나마 이해가 가셨길 바라고 늘 그렇듯: 질문이 있으시면 언제든 연락주세요! 😃