Home | JavaScript

Macam – macam dan Contoh Perulangan pada JavaScript

Published by Ade Kurniawan on

perulangan javascript

Baiklah pada tutorial ini kita akan membahas jenis perulangan dan contoh perulangan yang ada di JavaScript.

Konsep perulangan di JavaScript tidak jauh berbeda degan bahasa pemrograman yang umum dipelajari seperti c, php dan java.

Pengertian Perulangan

Looping atau yang lebih dikenal dengan perulangan adalah suatu metode dalam pemrograman untuk meng eksekusi suatu berintah yang sama terus-menerus hingga kondisi tertentu terpenuhi.

Sebagai contoh kita ingin menampilkan tulisan “Belajar JavaScript Indonetsource” sebanyak 5 kali. Maka perintah tersebut akan berhenti jika tulisan tersebut telah tampil sebanyak 5 kali.

Kenapa Looping Diperlukan

Ketika programmer membuat program looping maka akan menjadikan script yang harus ditulis sebanyak puluhan atau ratusan baris menjadi hanya beberapa baris saja. Menggunakan looping berarti membuat sesuatu yang dapat menghasilkan banyak output dengan minimal script.

Perulangan for JavaScript

Perulangan for dibuat untuk menghasilkan output secara berulang dimana jumlah output terebut sudah diketahui. Sebagai contoh jika ingin menanmpilkan “Belajar JavaScript Indonetsource” sebanyak 5 kali maka kita dapat menggunakan for seperti contoh di bawah ini:

1. Contoh perulangan for menampilkan output 5 kali

<!DOCTYPE html>
<html lang="en">

<head>
    <title>Perulangan For JavaScript</title>
</head>

<body>
    <h2>Perulangan For JavaScript</h2>
   <script>
        for (let i = 0; i < 5; i++) {
            document.write("<p> Tutorial Belajar JavaScript Indonetsource<p>");
        }      
    </script>

</body>

</html>

Keterangan

  • i = 0 adalah variabel yang akan menjadi permulaan perulangan for dijalankan. “i=0” berarti perulangan yang dibuat dimulai dari 0.
  • i < 5 adalah batas akhir program dijalankan. Nilai tertinggi i<5 adalah 4. Sehingga program akan terhenti saat perulangan telah berlangsung dari 0 hingga 4.

Hasil running program:

contoh perulangan for javascript
Contoh Perulangan Javascript

2. Memberi number/urutan untuk hasil perulangan

Perulangan pada contoh 1 bisa diberi number atau urutan dengan menambahkan script seperti di bawah ini:

        var number = 1;
        for (let i = 0; i < 5; i++) {
            document.write("<p> "+ number++ +".Tutorial Belajar JavaScript Indonetsource<p>");
        } 

output :

1.Tutorial Belajar JavaScript Indonetsource
2.Tutorial Belajar JavaScript Indonetsource
3.Tutorial Belajar JavaScript Indonetsource
4.Tutorial Belajar JavaScript Indonetsource
5.Tutorial Belajar JavaScript Indonetsource

3. Membuat urutan terbesar ke terkecil.

Selain memberi number dan mengurutkan dari urutan kecil ke besar (ascending) di JavaScript kita juga membuat urutan perulangan dari besar ke kecil (descending).

        var number = 5;
        for (let i = 5; i > 0; i--) {
            document.write("<p> " + number-- + ".Tutorial Belajar JavaScript Indonetsource<p>");
        }

output :

5.Tutorial Belajar JavaScript Indonetsource
4.Tutorial Belajar JavaScript Indonetsource
3.Tutorial Belajar JavaScript Indonetsource
2.Tutorial Belajar JavaScript Indonetsource
1.Tutorial Belajar JavaScript Indonetsource

4. Menampilkan bilangan ganjil dengan for di JavaScript

Ini adalah salah satu contoh studi kasus. Dimana jika ingin menampilkan bilangan ganjil kita dapat membuatnya menggunakan script di bawah ini:

        for (let i = 0; i < 10; i++) {
            if (i % 2 !== 0) {
                document.write("<p> " + i + ". Adalah Bilangan Ganjil<p>");
            }                            
        }

output :

1. Adalah Bilangan Ganjil
3. Adalah Bilangan Ganjil
5. Adalah Bilangan Ganjil
7. Adalah Bilangan Ganjil
9. Adalah Bilangan Ganjil

5. Menampilkan bilangan genap dengan perulangan for JavaScript

Untuk menampilkan bilangan genap modifikasi lagi program mejadi script ini.

        for (let i = 1; i < 10; i++) {
            if (i % 2 == 0) {
                document.write("<p> " + i + ". Adalah Bilangan Genap<p>");
            }
        }

output

2. Adalah Bilangan Genap
4. Adalah Bilangan Genap
6. Adalah Bilangan Genap
8. Adalah Bilangan Genap

Perulangan While

Dengan menggunakan perulangan while maka blok program akan terus di eksekusi selama nilainya true.

1. Contoh perulangan while JavaScript

Selama bilangan kecil dari 5 dan dimulai dari 0 maka program akan terus berjalan.

<!DOCTYPE html>
<html lang="en">

<head>
    <title>Perulangan For JavaScript</title>
</head>

<body>
    <h2>Perulangan while JavaScript</h2>
    <script>
        let i = 0;
        while (i < 5) {
            document.write("<p>Urutan " + i++ + " <p>");
        }
    </script>

</body>

</html>

output :

Urutan 0
Urutan 1
Urutan 2
Urutan 3
Urutan 4

2. Looping array dengan while

Array dapat di looping dengan perulangan while seperti contoh di bawah ini :

        let i = 0;
        let mobil = ['Fortuner','Avanza','Pajero Sprot','C-RV'];
       
        while (i < mobil.length) {            
            let data=(mobil[i]);
            i++;        
            document.write("<p>"+ data + "<p>");                            
        }

Keterangan

  1. Untuk dapat mengetahui sampai di mana nilai where akan bernilai true diperlukan array.length.
  2. array.length menghitung jumlah isi array. Pada cotoh di atas length (isi) array mobil adalah 4.

output :

Fortuner
Avanza
Pajero
Sprot
C-RV

Perulangan forEach() JavaScript

JavaScript forEach() atau juga disebut method foreach adalah satu jenis perulangan yang digunakan untuk melakukan looping terhadap array. Jadi selain bisa menggunakan for dan while, untuk melakukan looping array kita juga bisa mengunakan forEach().

<!DOCTYPE html>
<html lang="en">

<head>
    <title>Perulangan ForEach() JavaScript</title>
</head>

<body>
    <h2>Perulangan forEach() JavaScript</h2>
    <script>
        // array siswa
        var siswa = ["Ani", "Budi", "Citra", "Doni", "Eko", "Fitri"];

        // menampilkan array siswa dengan method foreach
        siswa.forEach(function (siswa) {
            document.write("<p>" + siswa + "</p>");
        });

    </script>
</body>

</html>

output :

perulangan foreach javascript

Method forEach menjadikan perulangan yang di buat tidak bisa di skip atau break. Hal inilah yang menjadikan perulangan foreach() berbeda dengan while dan for.

Tutorial lanjutan

Menggunakan Percabangan If Else dan Switch Case di JavaScript

List Tutorial Belajar Dasar JavaScript Untuk Pemula


0 Comments

Leave a Reply

Avatar placeholder

Your email address will not be published.