Een eenvoudige handleiding voor het begrijpen van Javascript (ES6) generatoren

Als je de laatste twee tot vijf jaar JavaScript-ontwikkelaar bent geweest, ben je vast wel berichten tegengekomen over Generators en Iterators. Hoewel Generators en Iterators inherent met elkaar verbonden zijn, lijken Generators toch wat intimiderender dan de andere.

Functies in JavaScript, zoals we allemaal weten, “draaien tot terugkeer/einde”. Generatorfuncties daarentegen “draaien tot yield/return/beëindigen”. In tegenstelling tot normale functies geven Generator Functions, zodra ze worden aangeroepen, het Generator Object terug, dat de volledige Generator Iterable bevat die kan worden doorlopen met de methode next() of for…of loop.

Elke aanroep van next() op de generator voert elke regel code uit tot de volgende return die hij tegenkomt en schort de uitvoering tijdelijk op.

Syntactisch worden ze aangeduid met een *, ofwel functie* X of functie *X, – beide betekenen hetzelfde.

Eenmaal gemaakt, retourneert het aanroepen van de generatorfunctie het Generator-object. Dit generator object moet worden toegewezen aan een variabele om bij te houden welke next() methodes daarna op zichzelf worden aangeroepen. Als de generator niet aan een variabele wordt toegewezen, zal deze altijd slechts tot de eerste yield expressie bij elke next().

De generator functies worden normaal gesproken opgebouwd met behulp van yield expressies. Elke yield in de generatorfunctie is een stoppunt voordat de volgende uitvoeringscyclus begint. Elke uitvoeringscyclus wordt getriggerd door middel van de methode next() op de generator.

Bij elke aanroep van next() geeft de yield-expressie zijn waarde terug in de vorm van een object dat de volgende parameters bevat.

{ value: 10, done: false } // assuming that 10 is the value of yield

• Waarde – is alles wat aan de rechterkant van het yield-sleutelwoord staat, het kan een functieaanroep zijn, een object of praktisch alles. Voor lege yields is deze waarde ongedefinieerd.
• Done – geeft de status van de generator aan, of hij verder uitgevoerd kan worden of niet. Als done true teruggeeft, betekent dit dat de functie klaar is met zijn uitvoering.

(Als je het gevoel hebt dat dit een beetje boven je pet gaat, zul je meer duidelijkheid krijgen zodra je het onderstaande voorbeeld ziet…)

Note: In het bovenstaande voorbeeld wordt de generatorfunctie die rechtstreeks zonder wrapper wordt benaderd, altijd alleen uitgevoerd tot de eerste yield. Daarom moet je de generator per definitie toewijzen aan een variabele om er op de juiste manier over te itereren.

Life-cycle van een Generator Functie

Voordat we verder gaan, laten we even een blik werpen op het blokschema van de levenscyclus van de Generator Functie:

Telkens wanneer een yield wordt aangetroffen, retourneert de generator-functie een object dat de waarde van de aangetroffen yield en de done-status bevat. Op dezelfde manier, wanneer een return wordt gevonden, krijgen we de return-waarde en ook de done-status als true. Wanneer de done-status als true wordt geretourneerd, betekent dit in wezen dat de generatorfunctie zijn bewerking heeft voltooid en dat er geen verdere yield mogelijk is.

Alles na de eerste return wordt genegeerd, inclusief andere yield-expressies.

Lees verder om het blokschema beter te begrijpen.

Yield aan een variabele toewijzen

In het vorige codevoorbeeld zagen we een inleiding tot het maken van een basisgenerator met een yield. En we kregen de verwachte output. Laten we nu eens aannemen dat we de volledige yield-uitdrukking toewijzen aan een variabele in de onderstaande code.

Uitleg

1. De eerste next() levert een ongedefinieerde waarde op omdat de yield expressie geen waarde heeft.
2. De tweede volgende() levert “Ik ben nutteloos” op, de waarde die werd doorgegeven. En bereidt het argument voor op de functie-aanroep.
3. De derde next(), roept de functie aan met een ongedefinieerd argument. Zoals hierboven vermeld, betekent de next() methode, aangeroepen zonder argumenten, in wezen dat de hele vorige yield uitdrukking ongedefinieerd is. Dit drukt dus ongedefinieerd af en beëindigt de run.

Yield met een functie-aanroep

Naast het retourneren van waarden kan yield ook functies aanroepen en de waarde retourneren of dezelfde afdrukken. Laten we onderstaande code eens bekijken en het beter begrijpen.

De bovenstaande code retourneert de obj van de functie als de waarde van het rendement.

Yield met beloften

Yield met beloften volgt dezelfde aanpak als de functie-oproep hierboven, maar in plaats van een waarde uit de functie terug te geven, wordt een belofte teruggegeven die verder kan worden geëvalueerd op succes of mislukking. Laten we eens kijken naar de onderstaande code om te begrijpen hoe het werkt.

De apiCall retourneert de beloften als de yield-waarde, wanneer deze na 2 seconden wordt opgelost, drukt deze de waarde af die we nodig hebben.

Yield*

Tot nu toe hebben we gekeken naar de use-cases voor yield expressie, nu gaan we kijken naar een andere expressie genaamd yield*. Wanneer Yield* gebruikt wordt in een generator functie delegeert het een andere generator functie. Simpel gezegd, het voltooit synchroon de generator functie in zijn expressie alvorens verder te gaan naar de volgende regel.

Laten we eens kijken naar de code en de uitleg hieronder om het beter te begrijpen. Deze code is afkomstig van de MDN-webdocs.

Uitleg

1. De eerste aanroep van next() levert een waarde van 1 op.
2. De tweede next() aanroep is echter een yield* expressie, wat inherent betekent dat we een andere generator functie, gespecificeerd in de yield* expressie, gaan voltooien alvorens verder te gaan met de huidige generator functie.
3. In uw gedachten kunt u aannemen dat de bovenstaande code wordt vervangen zoals de onderstaande

function* g2() {
yield 1;
yield 2;
yield 3;
yield 4;
yield 5;
}

Dit zal verder gaan om de generator run te voltooien. Er is echter één eigenschap van de yield* die u in gedachten moet houden bij het gebruik van return, in de volgende sectie.

Yield* met return

Yield* met een return gedraagt zich een beetje anders dan de normale yield*. Wanneer yield* wordt gebruikt met een return-instructie, wordt deze geëvalueerd naar die waarde, wat betekent dat de hele yield*-functie() gelijk wordt aan de waarde die is teruggekeerd van de bijbehorende generatorfunctie.

Laten we eens kijken naar de code en de uitleg hieronder om het beter te begrijpen.

Uitleg

1. In de eerste next() gaan we direct naar de yield 1 en geven de waarde terug.
2. De tweede volgende() geeft 2.
3. De derde volgende(), geeft ‘foo’ terug en gaat verder naar de opbrengst ‘het einde’, onderweg ‘foo’ toewijzend aan het const resultaat.
4. De laatste next() maakt de run af.

Yield* met een ingebouwd Iterable Object

Er is nog een interessante eigenschap van yield* die het vermelden waard is, vergelijkbaar met de return waarde, kan yield* ook itereren over iterable objecten zoals Array, String en Map.

Laten we eens kijken hoe het in real-time werkt.

Hier in de code itereert de yield* over elk mogelijk iterable object dat als expressie wordt doorgegeven. Ik denk dat de code zelf voor zichzelf spreekt.

Best Practices

Overal kan elke iterator/generator worden ge¨ıtereerd over een for…of-lus. Net als onze next() methode die expliciet wordt aangeroepen, gaat een for…of-lus intern door naar de volgende iteratie op basis van het yield sleutelwoord. En hij gaat alleen door tot de laatste yield en verwerkt niet de return statements zoals de next() method.

Je kunt hetzelfde controleren in de code hieronder.

De uiteindelijke terugkeerwaarde wordt niet afgedrukt, omdat de for…of-lus alleen tot de laatste yield itereert. Het is dus een goede gewoonte om return-verklaringen binnen een generatorfunctie te vermijden, omdat dit de herbruikbaarheid van de functie zou beïnvloeden wanneer deze door een for…of-lus wordt ge-erteerd.

Conclusie

Ik hoop dat dit de basisgebruikscases van generatorfuncties heeft behandeld en ik hoop oprecht dat het een beter begrip heeft gegeven van hoe generatoren werken in JavaScript ES6 en hoger. Als je van mijn inhoud laat 1, 2, 3 of zelfs 50 klappen :).

Volg mij op mijn GitHub account voor meer JavaScript en Full-Stack projecten: