TypeScript - Iterators dan Generators

Hai sana, superstar pemrograman masa depan! Selamat datang ke perjalanan menarik kita ke dunia TypeScript, di mana kita akan jelajahi realm yang magis dari Iterators dan Generators. Jangan khawatir jika istilah ini terdengar seperti teknologi alien untuk Anda saat ini - pada akhir tutorial ini, Anda akan bisa menggunakannya seperti seorang ahli! Jadi, mari kita roll up lengan dan masuk ke dalam!

Iterators

Imaginilah Anda punya sebuah kotak mainan penuh dengan berbagai mainan. Sebuah iterator seperti tongkat sihir yang membantu Anda untuk menjelajahi setiap mainan satu per satu, tanpa harus menumpahkan seluruh kotak ke lantai. Keren, kan? Mari kita lihat bagaimana ini bekerja di TypeScript!

Apa itu Iterator?

Sebuah iterator adalah objek yang mendefinisikan metode next(), yang mengembalikan item berikutnya dalam sebuah urutan. Ketika tidak ada item lagi, itu mengembalikan nilai khusus untuk menandakan bahwa urutan telah selesai.

Buatlah iterator pertama kita:

function createNumberIterator() {
let n = 0;
return {
next: function() {
n += 1;
if (n <= 5) {
return { value: n, done: false };
}
return { value: undefined, done: true };
}
};
}

const numberIterator = createNumberIterator();
console.log(numberIterator.next()); // { value: 1, done: false }
console.log(numberIterator.next()); // { value: 2, done: false }
console.log(numberIterator.next()); // { value: 3, done: false }
console.log(numberIterator.next()); // { value: 4, done: false }
console.log(numberIterator.next()); // { value: 5, done: false }
console.log(numberIterator.next()); // { value: undefined, done: true }

Dalam contoh ini, kita membuat iterator yang menghitung dari 1 ke 5. Setiap kali kita panggil next(), itu memberikan kita nomor berikutnya. Ketika mencapai 5, itu memberitahu kita bahwa itu selesai dengan mengembalikan { value: undefined, done: true }.

Menggunakan Iterators dengan Loop for...of

TypeScript membuatnya lebih mudah untuk menggunakan iterators dengan loop for...of. Mari kita lihat bagaimana:

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

for (const num of numberGenerator()) {
console.log(num);
}
// Output:
// 1
// 2
// 3
// 4
// 5

Loop for...of ini secara otomatis menggunakan iterator untuk menjelajahi semua nilai. Itu seperti memiliki asisten robot yang mengambil setiap mainan dari kotak untuk Anda!

Generators

Sekarang, mari bicarakan tentang generators. Jika iterators seperti tongkat sihir, generators seperti penyihir yang dapat membuat tongkat sihir ini dengan lebih sedikit usaha!

Apa itu Generator?

Sebuah generator adalah jenis fungsi khusus yang dapat dihentikan dan dilanjutkan, memungkinkannya untuk menghasilkan urutan nilai secara bertahap, bukannya menghitung mereka semua sekaligus dan mengembalikan mereka dalam array.

Buatlah generator pertama kita:

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

const generator = countToFive();
console.log(generator.next().value); // 1
console.log(generator.next().value); // 2
console.log(generator.next().value); // 3
console.log(generator.next().value); // 4
console.log(generator.next().value); // 5
console.log(generator.next().value); // undefined

Dalam contoh ini, countToFive adalah fungsi generator. Kata kunci yield adalah seperti mengatakan "Ini nilai berikutnya, tapi mari kita istirahat setelah ini." Setiap kali kita panggil next(), fungsi ini berjalan hingga mencapai yield, memberikan kita nilai itu, dan kemudian dihentikan.

Generators dengan Loops

Generators menjadi lebih kuat saat digabungkan dengan loops. Mari kita lihat contoh:

function* evenNumbersUnder20() {
for (let i = 2; i < 20; i += 2) {
yield i;
}
}

for (const num of evenNumbersUnder20()) {
console.log(num);
}
// Output:
// 2
// 4
// 6
// 8
// 10
// 12
// 14
// 16
// 18

Generator ini menghasilkan semua bilangan genap di bawah 20. Itu seperti memiliki mesin mainan pintar yang hanya memberikan jenis mainan tertentu!

Perbedaan Antara Iterators dan Generators

Sekarang kita telah melihat kedua iterators dan generators dalam aksi, mari kitauraikan perbedaan utama:

Fitur	Iterators	Generators
Definisi	Objek dengan metode next()	Fungsi dengan simbol *
Manajemen State	Manual	Otomatis
Mudah Dibuat	Lebih kompleks	Lebih sederhana
Pause/Resume	Tidak built-in	Built-in dengan yield
Efisiensi Memori	Bisa lebih efisien untuk dataset besar	Excelent untuk urutan besar atau tak terbatas

Iterators seperti membangun robot mainan dari awal - Anda harus mendefinisikan setiap detail kecil. Generators, dari sisi lain, seperti mendapatkan robot pre-built yang Anda dapat mudah mengcustomisasi. Kedua-duanya memiliki tempat dan penggunaannya!

Contoh Dunia Nyata

Marilah kitaakhiri dengan contoh menarik, dunia nyata yang menggabungkan apa yang kita pelajari:

function* fibonacciGenerator() {
let a = 0, b = 1;
while (true) {
yield a;
[a, b] = [b, a + b];
}
}

const fib = fibonacciGenerator();
for (let i = 0; i < 10; i++) {
console.log(fib.next().value);
}
// Output:
// 0
// 1
// 1
// 2
// 3
// 5
// 8
// 13
// 21
// 34

Generator ini menciptakan urutan Fibonacci - urutan matematika terkenal di mana setiap nomor adalah jumlah dua nomor sebelumnya. Itu seperti tangga tak terbatas yang setiap langkahnya dibangun dari dua langkah sebelumnya!

Dan itu adalah, murid-murid pemrograman saya! Kita telah menjelajahi tanah Iterators dan Generators, melihat kesamaan dan perbedaannya, dan bahkan menciptakan sedikit magi sendiri. Ingat, latihan membuat sempurna, jadi jangan takut untuk mencoba konsep ini. Siapa tahu apa program menakjubkan Anda akan buat dengan kekuatan iterator dan generator Anda? Semoga kode Anda selalu dikompilasi dengan baik!

Credits: Image by storyset