JavaScript'te Jeneratör Fonksiyonlar
Bu makalede, JavaScript'teki jeneratör fonksiyonları açıklayacağız.
YouTube Video
JavaScript'te Jeneratör Fonksiyonlar
JavaScript jeneratör fonksiyonları, tembel yürütme ve durma ve devam etme yapabildiği için normal fonksiyonlardan farklı olan özel fonksiyonlardır. Jeneratör fonksiyonları anlayarak, büyük veri işlemlerinin sıralı işlenmesi ve asenkron işlemlerle verimli bir şekilde başa çıkabilirsiniz. Burada, jeneratör fonksiyonların nasıl çalıştığını, nasıl kullanılacağını ve pratik kullanım durumlarını ayrıntılı olarak açıklayacağız.
Jeneratör Fonksiyonlar Nedir?
Bir jeneratör fonksiyonu, function* (bir yıldız işareti ile tanımlanmış bir fonksiyon) ile tanımlanır ve normal fonksiyonlardan farklı olarak, yürütmeyi ortadan kesip durabilir ve durumunu koruyarak devam edebilir. Jeneratör fonksiyonlar, "tembel yürütme" sağlar ve sonuçları kademeli olarak döndürerek verimli bellek yönetimi ve sıralı işleme olanak tanır.
Sözdizimi
1function* generatorFunction() {
2 yield 'First value';
3 yield 'Second value';
4 return 'Done';
5}Bu şekilde, bir jeneratör fonksiyonu birden fazla yield ifadesi içerebilir ve yürütmeyi durdurmak için yield kullanabilir. Bir jeneratör fonksiyonu çağrıldığında, fonksiyonun gövdesi hemen çalıştırılmaz ve bir jeneratör nesnesi döndürülür. Bu nesnede next() metodunu çağırarak fonksiyonu durduğu yerden devam ettirebilirsiniz.
Jeneratör Fonksiyonların Temel Kullanımı
Şimdi, jeneratör fonksiyonları kullanmanın temel bir örneğine göz atalım.
1function* simpleGenerator() {
2 yield 1;
3 yield 2;
4 yield 3;
5}
6
7const gen = simpleGenerator();
8
9console.log(gen.next()); // { value: 1, done: false }
10console.log(gen.next()); // { value: 2, done: false }
11console.log(gen.next()); // { value: 3, done: false }
12console.log(gen.next()); // { value: undefined, done: true }
Burada dikkat edilmesi gereken önemli bir nokta, jeneratörün her seferinde yield ile değerler döndürdüğüdür ve done özelliği false olduğu sürece daha fazla değer olduğunu belirtir. Son next() çağrısı done: true döndürür, bu da jeneratörün tamamlandığını gösterir.
yield Anahtar Kelimesi ve Duraklama Değerleri
yield, jeneratör fonksiyonu içinde bir duraklama noktasını gösteren bir anahtar kelimedir. yield'in sağındaki değer, next() çağrıldığında döndürülür. Ayrıca yield, iki yönlü iletişime olanak tanır. Başka bir deyişle, next() metoduna bir argüman olarak bir değer geçirildiğinde, bu değer jeneratör fonksiyonuna gönderilir.
1function* generatorWithYield() {
2 const value1 = yield 'First yield';
3 console.log('Received value:', value1);
4 const value2 = yield 'Second yield';
5 console.log('Received value:', value2);
6}
7
8const gen = generatorWithYield();
9
10console.log(gen.next()); // { value: 'First yield', done: false }
11console.log(gen.next('Apple')); // Received value: Apple
12 // { value: 'Second yield', done: false }
13console.log(gen.next('Banana'));// Received value: Banana
14 // { value: undefined, done: true }
Bu örnekte, next('Apple') çağrısı, 'Apple' değerini jeneratör fonksiyonuna gönderir ve bu değer fonksiyon içinde kullanılır.
Jeneratör Durumunun Yönetimi
Jeneratörler, uzun döngülerin veya sıralı işlemenin özlü bir şekilde temsil edilmesine olanak tanıyan yürütme durumlarını koruyabilir. Aşağıdaki örnek, sonsuz sayılar üreten bir jeneratörü göstermektedir.
1function* infiniteGenerator() {
2 let i = 0;
3 while (true) {
4 yield i++;
5 if (i > 10) {
6 break;
7 }
8 }
9}
10
11const gen = infiniteGenerator();
12
13console.log(gen.next().value); // 0
14console.log(gen.next().value); // 1
15console.log(gen.next().value); // 2
16// Continues...
Bu jeneratör, while(true) döngüsü kullanarak sürekli sayılar üretir ve gerektiğinde değerler almanızı sağlar. Bu, büyük veri kümelerinin verimli bir şekilde işlenmesini sağlar.
Jeneratör Fonksiyonlarının Uygulamaları
Jeneratör fonksiyonları, birden fazla işlemi sırayla yürütmek için uygundur. Örneğin, API isteklerini sırayla işlemek veya büyük dosyaları bölerek işlemek için faydalıdırlar.
1function* apiRequestGenerator() {
2 yield fetch('https://codesparklab.com/json/example1.json');
3 yield fetch('https://codesparklab.com/json/example2.json');
4 yield fetch('https://codesparklab.com/json/example3.json');
5}Dolayısıyla, asenkron işlem için kullanılabilen jeneratörler, verilerin verimli bir şekilde sırayla işlenmesi için büyük fayda sağlar.
Asenkron Jeneratörler
ES2018'de tanıtılan asenkron jeneratörler, async ve yield öğelerini birleştirerek, asenkron değerleri sırayla döndürmenizi sağlar. Bu, await ile birlikte asenkron işlemleri sade bir şekilde yazmayı mümkün kılar.
Sözdizimi
1async function* asyncGenerator() {
2 yield await Promise.resolve(1);
3 yield await Promise.resolve(2);
4 yield await Promise.resolve(3);
5}
6
7const gen = asyncGenerator();
8
9(async () => {
10 for await (const value of gen) {
11 console.log(value); // 1, 2, 3
12 }
13})();Asenkron jeneratörler, for await...of döngüsü kullanarak değerleri sırayla alabilir. Bu desen, özellikle asenkron veri akışlarını işlerken oldukça kullanışlıdır.
Pratik Örnek: Jeneratörlerle Asenkron İşlemleri Basitleştirme
Jeneratör fonksiyonları, asenkron işlemlerin akışını basitleştirmek için de kullanılır. Örneğin, aşağıda gösterildiği gibi, yield ve Promise öğelerini birleştirerek asenkron işlemleri eşzamanlı gibi yazabilirsiniz.
1function* asyncFlow() {
2 const data1 = yield fetch('https://codesparklab.com/json/example1.json');
3 console.log(data1);
4 const data2 = yield fetch('https://codesparklab.com/json/example2.json');
5 console.log(data2);
6}
7
8const gen = asyncFlow();
9
10function handleAsync(generator) {
11 const next = (promise) => {
12 promise.then((result) => {
13 const { value, done } = generator.next(result);
14 if (!done) {
15 next(value);
16 }
17 });
18 };
19
20 next(generator.next().value);
21}
22
23handleAsync(gen);Bu kod, bir jeneratör kullanarak API isteklerini sırayla yapar ve sonuçları işler.
Özet
Jeneratör fonksiyonları, bir fonksiyonun yürütülmesini durdurup yeniden başlatma yeteneğine sahip olduğundan, JavaScript'in güçlü özelliklerinden biridir. Bu, sıralı işleme, asenkron işleme ve büyük veri kümelerinin verimli bir şekilde yönetilmesini sağlar. Jeneratörleri anlamak, JavaScript'te ileri teknikleri öğrenmede önemli bir adımdır.
Yukarıdaki makaleyi, YouTube kanalımızda Visual Studio Code'u kullanarak takip edebilirsiniz. Lütfen YouTube kanalını da kontrol edin.