Transform Streams
Wijzig gegevens terwijl ze door een pipeline stromen.
Transform Streams is een gratis JavaScript Academy-les op CoddyKit. Dit is les 3 van 4. Je kunt 3 lessen uit dit leerpad gratis volledig lezen — daarna ontgrendelt CoddyKit PRO alle lessen, plus praktische oefeningen met een ingebouwde code-editor en een AI-tutor die 24/7 beschikbaar is. Deze les maakt deel uit van het leertraject JavaScript Academy. Je voortgang wordt gesynchroniseerd op het web en in de CoddyKit-app. De cursus JavaScript Academy bevat in totaal 4 lessen.
Wat is een TransformStream?
Een TransformStream bevindt zich tussen een leesbare en een schrijfbare kant. Ingeschreven brokken worden getransformeerd en uitgevoerd — een pijplijnstap die gegevens direct toewijst, filtert of van vorm verandert.
Opbouw
De stream heeft twee uiteinden: writable (waar gegevens binnenkomen) en readable (waar getransformeerde gegevens naar buiten komen).
const ts = new TransformStream();
console.log(ts.writable, ts.readable);De methode transform
Definieer het gedrag met een functie transform(chunk, controller). Roep controller.enqueue() aan om uitvoer door te geven.
const upper = new TransformStream({
transform(chunk, controller) {
controller.enqueue(chunk.toUpperCase());
}
});Eén erin, veel eruit
Een transformatie kan per invoer nul, één of meerdere brokken uitvoeren — ideaal om gegevens op te splitsen of uit te breiden.
const splitter = new TransformStream({
transform(line, controller) {
for (const word of line.split(" ")) controller.enqueue(word);
}
});Filteren met transformaties
Plaats brokken die je wilt verwijderen eenvoudigweg niet in de wachtrij.
const onlyEven = new TransformStream({
transform(n, controller) {
if (n % 2 === 0) controller.enqueue(n);
}
});De methode flush
flush(controller) wordt één keer uitgevoerd wanneer de invoer eindigt — ideaal om gebufferde restanten of een laatste brok uit te voeren.
const ts = new TransformStream({
transform(c, ctrl) { ctrl.enqueue(c); },
flush(ctrl) { ctrl.enqueue("[END]"); }
});Bufferen over meerdere brokken
Bewaar de status in de closure om gedeeltelijke brokken samen te voegen, bijvoorbeeld om volledige regels te vormen uit willekeurige bytegrenzen.
let buffer = "";
new TransformStream({
transform(chunk, ctrl) {
buffer += chunk;
const parts = buffer.split("\n");
buffer = parts.pop();
for (const line of parts) ctrl.enqueue(line);
},
flush(ctrl) { if (buffer) ctrl.enqueue(buffer); }
});Ingebouwde transformatiestreams
Het platform levert TextDecoderStream, TextEncoderStream en CompressionStream/DecompressionStream — kant-en-klare transformaties.
const gzip = new CompressionStream("gzip");
const compressed = inputStream.pipeThrough(gzip);Verbinden met pipeThrough
readable.pipeThrough(transform) verbindt een bron met een transformatie en geeft de leesbare uitvoer van de transformatie terug, klaar voor de volgende stap.
const out = sourceStream
.pipeThrough(new TextDecoderStream())
.pipeThrough(upper);Asynchrone transformaties
transform kan asynchroon zijn — gebruik er await in om API's aan te roepen of per brok asynchroon werk uit te voeren. De stream wacht op de promise.
new TransformStream({
async transform(chunk, ctrl) {
const result = await process(chunk);
ctrl.enqueue(result);
}
});Fouten doorgeven
Als je binnen transform een fout gooit, raakt de stream in een fouttoestand; verbruikers verderop zien de fout en de pijplijn wordt afgebroken.
new TransformStream({
transform(chunk, ctrl) {
if (!valid(chunk)) throw new Error("bad chunk");
ctrl.enqueue(chunk);
}
});Korte controle
Test transformaties.
Samenvatting: transformaties bij streams
Je hebt transformaties gebouwd met transform en flush, delen toegewezen, gefilterd en uitgebreid, gegevens over de grenzen van delen heen gebufferd, ingebouwde functies zoals CompressionStream gebruikt en fasen gekoppeld met pipeThrough. Hierna: backpressure en doorsturen.
Leer JavaScript met een AI-tutor — gratis
Schrijf echte code en voer die uit in je browser, krijg direct hulp van een AI-tutor die 24/7 beschikbaar is en ga verder waar je gebleven bent op het web of in de app.
- Cursussen
- 59
- Lessen
- 200
Veelgestelde vragen
Is de les “Transform Streams” gratis?
Ja — je kunt hier op het web alle 3 lessen van het leerpad JavaScript Academy, waaronder “Transform Streams”, gratis volledig lezen. Daarna ontgrendelt CoddyKit PRO alle lessen, plus interactieve oefeningen met een ingebouwde code-editor en een AI-tutor die 24/7 beschikbaar is. De cursus JavaScript Academy bevat in totaal 4 lessen.
Wat leer ik in “Transform Streams”?
Wijzig gegevens terwijl ze door een pipeline stromen. Je oefent met JavaScript Academy door code rechtstreeks in de browser uit te voeren. Een AI-begeleider die 24/7 beschikbaar is beantwoordt je vragen terwijl je de les doorwerkt.
Heb ik ervaring nodig om met JavaScript Academy te beginnen?
Ervaring vooraf is niet nodig. JavaScript Academy op CoddyKit is opgebouwd voor beginners tot gevorderden, zodat je hier of bij het begin kunt starten en in je eigen tempo kunt leren. Dit is les 3 van 4.
Hoe lang duurt de les “Transform Streams”?
De meeste lessen van CoddyKit duren ongeveer 5–10 minuten. Elke les is kort en interactief, zodat je gestaag vooruitgaat en op het web en in de app precies verdergaat waar je was gebleven.
Kan ik code schrijven en uitvoeren in deze les over JavaScript Academy?
Ja. Elke les over JavaScript Academy bevat een ingebouwde code-editor, zodat je rechtstreeks in je browser echte code kunt schrijven en uitvoeren en direct feedback van AI krijgt — lokale installatie is niet nodig.
Alle lessen in deze cursus
- Leesbare streams
- Streaming-fetch-responses
- Transform Streams
- Backpressure en piping