for...of JavaScript: Cara Praktis Mengulang Array

Perulangan for..of di JavaScript bisa menjadi alternatif for ketika kita ingin mengulang sebuah array atau objek iterable.

Masalah dengan for, ketika melakukan perulangan, kita perlu mengakses setiap elemen array menggunakan indeks dan menentukan kondisi terminasi.

Tapi dengan for..of, kita tidak perlu melakukan hal tersebut, sehingga kode menjadi lebih ringkas.

Nantinya setiap elemen array akan diinisialisasi secara otomatis ke variabel.

Tidak hanya array, for..of juga bisa digunakan untuk mengulang String (mengulang karakter), TypedArray, Map, dan Set.

Berikut beberapa topik yang akan kita pelajari terkait for...of.

1. Sintaks
2. Contoh
   1. Perulangan Array
   2. Perulangan String
   3. Deklarasi Variabel Menggunakan const atau let?

Sintaks

for (variable of iterable) {
  statement;
}

Keterangan:

• variable: pada setiap iterasi elemen diinisialisasi ke variabel ini. Dapat dideklarasikan menggunakan const, let, atau var.
• iterable: objek iterable yang ingin diulang, misalnya array.
• statement: statement yang dieksekusi pada setiap iterasi.

Contoh

Perulangan Array

Jika kita menggunakan for loop untuk mengulang sebuah array, kita perlu menggunakan indeks dan menentukan kondisi terminasi perulangan.

Tapi dengan for...of Anda tidak perlu melakukan hal tersebut, perulangan ini akan berhenti secara otomatis sesuai dengan jumlah elemen.

Mari kita lihat contoh berikut.

const buah = ['pisang', 'mangga', 'apel'];

for (const elemen of buah) {
  console.log(elemen);
}

/* output:
pisang
mangga
apel
*/

Lihat kode di atas, pada setiap iterasi nilai variabel elemen otomatis diinisialisasi dengan nilai elemen array.

Perulangan String

Selain array, kita juga bisa menggunakan for...of untuk mengulang setiap karakter di dalam string.

Ini mungkin jarang digunakan, tapi ketahuilah ini bisa dilakukan. Siapa tahu suatu saat Anda membutuhkan.

const buah = 'apel';

for (const karakter of buah) {
  console.log(karakter);
}

/* output:
a
p
e
l
*/

Deklarasi Variabel Menggunakan const atau let?

Di dalam kurung lengkung for..of, Anda dapat mendeklarasikan variabel menggunakan const, let, atau var.

Secara umum variabel let dan var sama saja, tapi disarankan menggunakan let.

Apa bedanya dengan let dengan const?

Jika Anda ingin memodifikasi variabel di dalam statement, gunakan let, jika tidak atau hanya perlu mengakses saja gunakan const.

Jika Anda belum mempelajari perilaku var, let, dan const, ini sudah kita bahas dalam materi variabel.

Mari kita lihat contoh deklarasi variabel const.

const buah = ['pisang', 'mangga', 'apel'];

for (const elemen of buah) {
  elemen += ' enak sekali.';
  console.log(elemen);
}

// TypeError: Assignment to constant variable.

Kode di atas mengembalikan kesalaha karena kita tidak bisa memodifikasi nilai variabel const.

Mari kita lihat contoh deklarasi let.

const buah = ['pisang', 'mangga', 'apel'];

for (let elemen of buah) {
  elemen += ' enak sekali.';
  console.log(elemen);
}

/* output:
pisang enak sekali.
mangga enak sekali.
apel enak sekali.
*/

Dengan menggunakan let kita bisa memodifikasi variabel tersebut.

Ingat, di sini kita tidak mengubah elemen array asli, melainkan nilai dari variabel.