JavaScript - Objek Iterables

Halo, para pemula pemrogram! Hari ini, kita akan memulai sebuah perjalanan menarik ke dunia iterables JavaScript. Sebagai guru ilmu komputer yang ramah di lingkungan sekitar Anda, saya di sini untuk mengarahkan Anda dalam petualangan ini langkah demi langkah. Jadi, siapkan tas virtual Anda, dan mari kita mulai!

Apa Itu Iterables?

Sebelum kita masuk ke hal yang lebih rinci, mari kita pahami apa itu iterables. Dalam JavaScript, iterables adalah objek yang dapat "diiterasi". Dalam kata yang lebih sederhana, itu seperti sebuah koleksi barang yang Anda dapat lewati satu per satu. Bayangkan itu seperti sebuah peti harta yang penuh dengan keajaiban yang Anda dapat jelajahi piece by piece.

Contoh umum iterables dalam JavaScript termasuk array, string, dan maps. Ini seperti jenis-jenis berbeda peti harta, masing-masing dengan karakteristik uniknya.

Iterasi menggunakan loop for...of

Sekarang, mari kita belajar metode pertama untuk menjelajahi peti-peti ini: loop for...of. Ini seperti memiliki kunci magis yang membuka setiap kompartemen peti satu per satu.

Contoh 1: Iterasi Melalui Array

const fruits = ['apple', 'banana', 'orange'];

for (const fruit of fruits) {
console.log(fruit);
}

Dalam contoh ini, kita memiliki sebuah array buah (peti harta kita). Loop for...of melewati setiap buah satu per satu, dan kita mencetaknya. Ketika Anda menjalankan kode ini, Anda akan melihat:

apple
banana
orange

Itu seperti kita mengeluarkan setiap buah dari peti dan menyukainya!

Contoh 2: Iterasi Melalui String

String juga adalah iterables. Mari kita lihat bagaimana kita dapat menjelajahinya:

const message = "Hello";

for (const character of message) {
console.log(character);
}

Kode ini akan mengeluarkan:

H
e
l
l
o

Setiap karakter dari string kita adalah seperti keajaiban kecil yang kita periksa secara mendetail.

Iterasi menggunakan metode forEach()

Sekarang, mari kita belajar metode lain untuk menjelajahi peti-peti ini: metode forEach(). Ini seperti memiliki asisten yang membantu untuk melewati peti dan menunjukkan setiap item ke kita.

Contoh 3: Menggunakan forEach() dengan Array

const numbers = [1, 2, 3, 4, 5];

numbers.forEach(function(number) {
console.log(number * 2);
});

Kode ini akan mengeluarkan:

2
4
6
8
10

Di sini, asisten kita (metode forEach()) tidak hanya menunjukkan setiap nomor tetapi juga menggandakan nilainya untuk kita!

Contoh 4: Menggunakan forEach() dengan Set

Sets adalah jenis lain iterables dalam JavaScript. Mari kita lihat bagaimana kita dapat menggunakan forEach() dengan mereka:

const uniqueColors = new Set(['red', 'blue', 'green']);

uniqueColors.forEach(function(color) {
console.log(`Color: ${color}`);
});

Output:

Color: red
Color: blue
Color: green

Asisten yang membantu kita sekarang menunjukkan setiap warna unik dari set warna kita.

Iterasi menggunakan metode map()

Terakhir namun bukan terkecil, mari kita belajar tentang metode map(). Ini seperti memiliki tongkat magis yang dapat mentransformasi setiap item dalam peti kita saat kita melewati itu.

Contoh 5: Transformasi Elemen Array

const prices = [10, 20, 30, 40, 50];

const discountedPrices = prices.map(function(price) {
return price * 0.9;  // diskon 10%
});

console.log(discountedPrices);

Output:

[9, 18, 27, 36, 45]

Di sini, tongkat magis kita (metode map()) memberikan diskon 10% ke setiap harga dalam daftar kita.

Contoh 6: Membuat Array Baru dari Data Yang Ada

const names = ['Alice', 'Bob', 'Charlie'];

const greetings = names.map(function(name) {
return `Hello, ${name}!`;
});

console.log(greetings);

Output:

['Hello, Alice!', 'Hello, Bob!', 'Hello, Charlie!']

Tongkat magis kita telah mentransformasi setiap nama menjadi salam yang ramah!

Ringkasan Metode Iterasi

Berikut adalah tabel praktis yang menyummarisakan metode yang kita pelajari:

Metode	Deskripsi	Kasus Penggunaan
for...of	Mengulang melalui objek iterables	Iterasi sederhana saat Anda memerlukan nilai
forEach()	Menjalankan fungsi untuk setiap elemen array	Saat Anda ingin melakukan aksi pada setiap item
map()	Membuat array baru dengan hasil pemanggilan fungsi pada setiap elemen	Saat Anda ingin mentransformasi setiap item dalam array

Ingat, setiap metode ini adalah seperti sebuah alat dalam kotak alat pemrograman Anda. Sebagai Anda mendapatkan lebih banyak pengalaman, Anda akan belajar kapan untuk menggunakan yang mana untuk mendapatkan hasil terbaik.

Dalam kesimpulan, iterables dalam JavaScript adalah konstruksi yang kuat yang memungkinkan kita bekerja dengan koleksi data secara efisien. Apakah Anda menggunakan loop for...of, forEach(), atau map(), Anda sekarang memiliki kekuatan untuk menjelajahi dan memanipulasi data Anda seperti seorang ahli ilmu sihir!

Terus latihan, dan segera Anda akan dapat menciptakan kode spells kompleks dengan mudah. Selamat coding, para murid pemuda saya!

Credits: Image by storyset