Cara menggunakan javascript loop function

Pada tutorial sebelumnya, kita sudah mempelajari tentang Tutorial Belajar JavaScript Bagian 29 : Struktur Logika While Loop di JavaScript.

Dalam tutorial ini, kita akan belajar cara menggunakan for statement perulangan for membuat perulangan dengan berbagai pilihan.

Pengantar JavaScript for statement loop

Statement loop for bertujuan untuk membuat loop dengan 3 ekspresi pilihan. Berikut ini mengilustrasikan sintaks statement for loop :

for (initializer; condition; iterator) {

    // statements

}

1. Initializer (inisialisasi)

Statement for mengeksekusi penginisialisasi hanya setelah perulangan dimulai. Biasanya, Anda mendeklarasikan dan menginisialisasi variabel loop lokal di penginisialisasi.

• Condition (kondisi)

Kondisinya adalah ekspresi boolean yang menentukan apakah for harus mengeksekusi iterasi berikutnya.

Statement for mengevaluasi kondisi sebelum setiap iterasi. Jika kondisi true  (atau tidak ada), iterasi berikutnya dijalankan. Jika tidak, itu akan mengakhiri loop.

• Iterator (pengulangan)

Statement for mengeksekusi iterator setelah setiap iterasi.

Diagram alir berikut mengilustrasikan perulangan for :

Dalam perulangan for, 3 ekspresi bersifat tambahan. Berikut ini menunjukkan perulangan for tanpa ekspresi apa pun :

for ( ; ; ) {

    // statement

}

Contoh JavaScript for loop

Mari kita ambil beberapa contoh penggunaan statement for loop.

1. Contoh sederhana JavaScript for loop

Contoh berikut menggunakan statement for loop for menampilkan angka dari 1 hingga 4 ke console :

for (let i = 1; i < 5; i++) {

   console.log(i);

}

Hasil :

1

2

3

4

Bagaimana skrip ini bekerja.

Pertama, deklarasikan variabel i dan inisialisasi dengan nilai 1.

Kedua, tampilkan nilai i di console jika penghitung kurang dari 5.

Ketiga, tingkatkan nilai counter sebanyak satu di setiap iterasi loop.

• Menggunakan loop JavaScript for tanpa contoh penginisialisasi

Contoh berikut menggunakan perulangan for yang tidak memiliki ekspresi penginisialisasi :

let j = 1;

for (; j < 10; j += 2) {

   console.log(j);

}

Hasil :

1

3

5

7

9

• Menggunakan JavaScript for loop tanpa contoh kondisi

Mirip dengan ekspresi penginisialisasi, ekspresi kondisi bersifat opsional. Jika Anda menghilangkan ekspresi kondisi, Anda perlu menggunakan statement break for untuk mengakhiri perulangan.

for (let j = 1; ; j += 2) 

   console.log(j);

   if (j > 10) {

     break;

   }

}

Hasil :

1

3

5

7

9

11

• Menggunakan JavaScript for statement loop tanpa contoh ekspresi apa pun

Ketiga ekspresi dari statement for loop adalah opsional. Oleh karena itu, Anda dapat menghilangkan semuanya. Sebagai contoh :

let j = 1;

for (;;) {

   if (j > 10) {

     break;

   }

   console.log(j);

   j += 2;

}

Hasil :

1

3

5

7

9

• Menggunakan JavaScript for loop tanpa contoh loop body

JavaScript memungkinkan statement for memiliki statement kosong. Dalam hal ini, Anda menempatkan titik koma (;) tepat setelah statement for.

Sebagai contoh, berikut ini menggunakan perulangan for untuk menghitung jumlah 10 angka dari 1 sampai 10 :

for ( ; ; ) {

    // statement

}

Hasil :

for ( ; ; ) {

    // statement

}

Kesimpulan

Gunakan JavaScript for statement untuk membuat loop yang mengeksekusi blok berdasarkan menggunakan berbagai opsi. Itu dia penjelasan tentang cara menggunakan for loop di JavaScript.

Dengan menggunakan perulangan Anda dapat mengeksekusi statement secara berulang tanpa menulis ulang statement.

Mari kita lihat contoh di dunia nyata.

Anggap saja kita sedang membuat toko online, kita tentu perlu menampilkan daftar produk ke halaman.

Apa yang akan Anda lakukan? Apakah mengulang kode yang berfungsi untuk menampilkan setiap produk?

Tidak ada yang salah dengan metode ini, tapi bagaimana jika produk mencapai ribuan, Anda tentuk harus menulis ulang kode sebanyak jumlah produk.

Mari kita gunakan contoh lain yang lebih sederhana.

Misalnya, Anda diminta membuat program yang dapat menuliskan pesan hello world ke console sebanyak 5 kali.

Anda tentu bisa membuat seperti ini:

console.log('hello world');
console.log('hello world');
console.log('hello world');
console.log('hello world');
console.log('hello world');

Tapi, bagaimana jika kita diminta menampilkan pesan yang sama sebanyak 1000 kali dan setiap baris harus memiliki nomor yang berurutan.

Disinilah kita memerlukan perulangan.

Berikut topik yang akan kita pelajari terkait for loop.

Sintaks

for (nilaiAwal; kondisiTerminasi; ekspresiAkhir) {
  statement;
}

for loop terdiri dari tiga ekspresi opsional didalam kurung lengkung yang dipisahkan dengan titik koma (

for (nilaiAwal; kondisiTerminasi; ekspresiAkhir) {
  statement;
}

for (nilaiAwal; kondisiTerminasi; ekspresiAkhir) {
  statement;
}

• for (nilaiAwal; kondisiTerminasi; ekspresiAkhir) {
    statement;
  }
  

  3: dapat berupa ekspresi atau deklarasi variabel yang akan dievaluasi sekali sebelum loop dimulai, biasanya deklarasi nilai awal.

• for (nilaiAwal; kondisiTerminasi; ekspresiAkhir) {
    statement;
  }
  

  4: ekspresi atau kondisi yang menghentikan perulangan. Ekspresi ini harus mengembalikan nilai

  for (nilaiAwal; kondisiTerminasi; ekspresiAkhir) {
    statement;
  }
  

  5 agar perulangan berhenti, jika

  for (nilaiAwal; kondisiTerminasi; ekspresiAkhir) {
    statement;
  }
  

  6 perulangan terus dilakukan.

• for (nilaiAwal; kondisiTerminasi; ekspresiAkhir) {
    statement;
  }
  

  7: dievaluasi pada akhir setiap iterasi setelah blok

  for (nilaiAwal; kondisiTerminasi; ekspresiAkhir) {
    statement;
  }
  

  8 deksekusi. Biasanya digunakan untuk memperbarui atau menambah

  for (nilaiAwal; kondisiTerminasi; ekspresiAkhir) {
    statement;
  }
  

  3.

• for (nilaiAwal; kondisiTerminasi; ekspresiAkhir) {
    statement;
  }
  

  8: kode atau statement yang akan dieksekusi pada setiap iterasi selama

  for (nilaiAwal; kondisiTerminasi; ekspresiAkhir) {
    statement;
  }
  

  4 bernilai

  for (nilaiAwal; kondisiTerminasi; ekspresiAkhir) {
    statement;
  }
  

  6.

Contoh

Contoh Sederhana

Agar lebih jelas, mari kita gunakan contoh sederhana.

Misalnya, kita ingin mencetak pesan hello world sebanyak 5 kali ke console menggunakan for loop.

for (let nilaiAwal = 0; nilaiAwal < 5; nilaiAwal++) {
  console.log('hello world');
}

/* output:
hello world
hello world
hello world
hello world
hello world
*/

Begini cara kerjanya:

1. Kita mendeklarasikan dan menginisialisasi variabel

   for (nilaiAwal; kondisiTerminasi; ekspresiAkhir) {
     statement;
   }
   

   3 dengan

   for (let nilaiAwal = 0; nilaiAwal < 5; nilaiAwal++) {
     console.log('hello world');
   }
   
   /* output:
   hello world
   hello world
   hello world
   hello world
   hello world
   */
   

   6.

2. for (nilaiAwal; kondisiTerminasi; ekspresiAkhir) {
     statement;
   }
   

   4 dievaluasi, karena

   for (nilaiAwal; kondisiTerminasi; ekspresiAkhir) {
     statement;
   }
   

   3 saat ini

   for (let nilaiAwal = 0; nilaiAwal < 5; nilaiAwal++) {
     console.log('hello world');
   }
   
   /* output:
   hello world
   hello world
   hello world
   hello world
   hello world
   */
   

   6 maka

   for (let i = 1; i <= 5; i++) {
     console.log(`${i}. hello world`);
   }
   
   /* output:
   1. hello world
   2. hello world
   3. hello world
   4. hello world
   5. hello world
   */
   

   0 menghasilkan nilai

   for (nilaiAwal; kondisiTerminasi; ekspresiAkhir) {
     statement;
   }
   

   6.
3. Karena

   for (nilaiAwal; kondisiTerminasi; ekspresiAkhir) {
     statement;
   }
   

   4 menghasilkan nilai

   for (nilaiAwal; kondisiTerminasi; ekspresiAkhir) {
     statement;
   }
   

   6 maka kode di dalam blok statement dieksekusi, dalam hal ini

   for (let i = 1; i <= 5; i++) {
     console.log(`${i}. hello world`);
   }
   
   /* output:
   1. hello world
   2. hello world
   3. hello world
   4. hello world
   5. hello world
   */
   

   4.
4. Setelah semua kode statement dieksekusi,

   for (nilaiAwal; kondisiTerminasi; ekspresiAkhir) {
     statement;
   }
   

   7 dievaluasi, dalam hal ini

   for (let i = 1; i <= 5; i++) {
     console.log(`${i}. hello world`);
   }
   
   /* output:
   1. hello world
   2. hello world
   3. hello world
   4. hello world
   5. hello world
   */
   

   6 (

   for (let i = 1; i <= 5; i++) {
     console.log(`${i}. hello world`);
   }
   
   /* output:
   1. hello world
   2. hello world
   3. hello world
   4. hello world
   5. hello world
   */
   

   7), artinya sekarang variabel

   for (nilaiAwal; kondisiTerminasi; ekspresiAkhir) {
     statement;
   }
   

   3 bernilai

   for (let i = 1; i <= 5; i++) {
     console.log(`${i}. hello world`);
   }
   
   /* output:
   1. hello world
   2. hello world
   3. hello world
   4. hello world
   5. hello world
   */
   

   9. Ulangi langkah kedua dan seterusnya namun dengan nilai yang baru.

Langkah-langkah diatas terus diulang sampai

for (nilaiAwal; kondisiTerminasi; ekspresiAkhir) {
  statement;
}

for (nilaiAwal; kondisiTerminasi; ekspresiAkhir) {
  statement;
}

Perulangan di atas berhenti ketika variabel

for (nilaiAwal; kondisiTerminasi; ekspresiAkhir) {
  statement;
}

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

for (let i = 0; i < buah.length; i++) {
  console.log(buah[i]);
}

/* output:
apel
mangga
jeruk
pisang
*/

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

for (let i = 0; i < buah.length; i++) {
  console.log(buah[i]);
}

/* output:
apel
mangga
jeruk
pisang
*/

for (nilaiAwal; kondisiTerminasi; ekspresiAkhir) {
  statement;
}

Kita juga bisa membuat variabel dengan nama lain selain

for (nilaiAwal; kondisiTerminasi; ekspresiAkhir) {
  statement;
}

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

for (let i = 0; i < buah.length; i++) {
  console.log(buah[i]);
}

/* output:
apel
mangga
jeruk
pisang
*/

Mari kita gunkaan contoh lain, dimana kita akan memulai perulangan sebanyak lima kali dimulai dari

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

for (let i = 0; i < buah.length; i++) {
  console.log(buah[i]);
}

/* output:
apel
mangga
jeruk
pisang
*/

Setiap iterasi akan menampilkan nilai

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

for (let i = 0; i < buah.length; i++) {
  console.log(buah[i]);
}

/* output:
apel
mangga
jeruk
pisang
*/

for (let i = 1; i <= 5; i++) {
  console.log(`${i}. hello world`);
}

/* output:
1. hello world
2. hello world
3. hello world
4. hello world
5. hello world
*/

Perulangan Array Sederhana

Perulangan for juga biasa digunakan untuk mengulang elemen array.

Mari kita lihat contoh sederhana untuk menampilkan setiap elemen array ke console.

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

for (let i = 0; i < buah.length; i++) {
  console.log(buah[i]);
}

/* output:
apel
mangga
jeruk
pisang
*/

Ingat, untuk mengakses elemen array kita bisa menggunakan indeks, elemen pertama memiliki indeks 0, elemen kedua 1 dan seterusnya.

Jika Anda masih kesulitan memahami kode di atas, pelajari lagi topik terkait dasar-dasar array.

Perulangan Mencari Bilangan Bulat Dalam Array

Contoh di atas kita hanya menampilkan elemen, bagaimana jika kita ingin mengakses elemen array yang spesifik.

Misalnya jika array berisi kumpulan angka, kita ingin menyeleksi bilangan bulat dalam array tersebut dan memasukkannya ke array baru.

Mari kita lihat contoh berikut.

const arr = [5, 6, 8, 4, 16, 9, 7, 12, 11];
const arrNilaiBulat = [];

for (let i = 0; i < arr.length; i++) {
  if (arr[i] % 2 === 0) {
    arrNilaiBulat.push(arr[i]);
  }
}

console.log(arrNilaiBulat); // [ 6, 8, 4, 16, 12 ]

Bagaimana jika kita ingin mencari bilangan ganjil?

Sama saja seperti di atas, hanya saja ekspresi di dalam kurung kurawal percabangan

const arr = [5, 6, 8, 4, 16, 9, 7, 12, 11];
const arrNilaiBulat = [];

for (let i = 0; i < arr.length; i++) {
  if (arr[i] % 2 === 0) {
    arrNilaiBulat.push(arr[i]);
  }
}

console.log(arrNilaiBulat); // [ 6, 8, 4, 16, 12 ]

const arr = [5, 6, 8, 4, 16, 9, 7, 12, 11];
const arrNilaiBulat = [];

for (let i = 0; i < arr.length; i++) {
  if (arr[i] % 2 === 0) {
    arrNilaiBulat.push(arr[i]);
  }
}

console.log(arrNilaiBulat); // [ 6, 8, 4, 16, 12 ]

Apa fungsi dari javascript loop?

Bagaimana cara membuat fungsi di javascript?

Bagaimana membuat perulangan saat di javascript?

Apa yang harus diperhatikan dalam menggunakan for loop?