Belajar Ilmu Komputer Dengan JavaScript: Bagian 3, Loop
Indonesian (Bahasa Indonesia) translation by Dian Sapta Priambogo (you can also view the original English article)
Pengantar
Misalkan Anda diberi tugas untuk menulis sebuah program yang menampilkan angka 1–100. Salah satu cara Anda dapat mengerjakan soal ini adalah dengan menulis 100 pernyataan console.log. Tetapi saya yakin Anda tidak akan melakukannya karena Anda sudah muak dengan garis 9 atau 10.
Satu-satunya bagian yang berubah dalam setiap pernyataan adalah angka, jadi harus ada cara untuk menulis hanya satu pernyataan. Dan itu bisa dengan loop. Loop mengizinkan kita melakukan serangkaian langkah dalam blok kode berulang kali.
Isi
- While loop
- Do-while loop
- For loop
- Array
- For-in loop
- For-of loop
- Ulasan
- Sumber Lainnya
While Loop
While loop akan mengeksekusi serangkaian pernyataan berulang kali sementara beberapa kondisi true. Ketika kondisinya false, program akan keluar dari loop. Jenis loop ini menguji kondisi sebelum melakukan iterasi. Iterasi adalah eksekusi dari tubuh loop. Contoh berikut tidak akan menampilkan apa pun karena kondisinya false.
1 |
let hungry = false; |
2 |
|
3 |
while (hungry) { |
4 |
console.log("eat"); |
5 |
}
|
Ini adalah bentuk umum dari while loop:
1 |
while (condition) {
|
2 |
statement; |
3 |
statement; |
4 |
etc. |
5 |
} |
Satu hal yang perlu diperhatikan saat menggunakan loop adalah membuat loop yang tidak pernah berakhir. Ini terjadi karena kondisinya tidak pernah menjadi false. Jika itu terjadi pada Anda, program Anda akan crash. Contoh:
1 |
let hungry = true; |
2 |
|
3 |
while (hungry) { |
4 |
console.log("eat"); |
5 |
}
|
Tugas
Berapa kali tubuh loop ini dieksekusi:
1 |
let i = 0; |
2 |
|
3 |
while (i < 10) { |
4 |
console.log("Hello, World"); |
5 |
i += 1; |
6 |
}
|
Do-While Loop
Do-while loop akan menjalankan isi pernyataan terlebih dahulu, dan kemudian memeriksa kondisinya. Jenis loop ini berguna ketika Anda tahu Anda ingin menjalankan kode setidaknya sekali. Contoh berikut akan menampilkan "eat" sekali, meskipun kondisinya salah.
1 |
let hungry = false; |
2 |
|
3 |
do { |
4 |
console.log("eat"); |
5 |
} while (hungry); |
Ini adalah bentuk umum untuk do while-loop:
1 |
do { |
2 |
statement; |
3 |
statement; |
4 |
etc. |
5 |
} while (condition); |
Tugas
Tulis do-while loop yang akan menampilkan angka 1–10.
For Loop
For-loop akan mengulangi eksekusi blok kode untuk jumlah waktu tertentu. Contoh berikut menampilkan angka 1–10:
1 |
for (let i = 1; i <= 10; i++) { |
2 |
console.log(i); |
3 |
}
|
Ini adalah bentuk umum for-loop:
1 |
for (initial; condition; step) {
|
2 |
statement; |
3 |
statement; |
4 |
etc. |
5 |
} |
Initial adalah ekspresi yang menetapkan nilai variabel kita. Condition adalah ekspresi yang harus true untuk pernyataan agar dieksekusi. Dan step adalah ekspresi yang menambah nilai variabel kita.
Salah satu pola pemrograman adalah menggunakan for loop untuk memperbarui nilai sebuah variabel dengan dirinya sendiri dan sebuah nilai baru. Contoh ini menjumlahkan angka 1–10:
1 |
let x = 0; |
2 |
|
3 |
for (let i = 1; i <= 10; i++) { |
4 |
x += i; |
5 |
}
|
6 |
|
7 |
console.log(x) //55 |
+= adalah operator penugasan yang menambahkan nilai kembali ke variabel. Ini adalah daftar semua operator penugasan:
| Operator | Contoh | Persamaan |
|---|---|---|
| += | x += 2 | x = x + 2 |
| -= | x -= 2 | x = x - 2 |
| *= | x *= 2 | x = x * 2 |
| /= | x /= 2 | x = x / 2 |
| %= | x %= 2 | x = x % 2 |
Tugas
Tulis for loop yang menghitung faktorial suatu angka. Faktor bilangan nadalah produk dari semua bilangan bulat dari 1 hingga n. Misalnya, 4! (4 faktorial) adalah 1 x 2 x 3 x 4 yang sama dengan 24.
Array
Array adalah objek yang menyimpan daftar item, yang disebut elemen, yang diakses oleh indeks mereka. Indeks adalah posisi elemen dalam array. Elemen pertama adalah pada indeks 0. Berikut ini adalah beberapa operasi array yang umum.
Buat array kosong:
1 |
let arr = [ ]; |
Inisialisasi array dengan nilai:
1 |
let arr = [1, 2, "Hello", "World"]; |
Dapatkan elemen dari array:
1 |
let arr = [1, 2, "Hello", "World"]; |
2 |
arr[0] //1 |
3 |
arr[2] //"Hello" |
4 |
Perbarui elemen dalam array:
1 |
let arr = [1, 2, "Hello", "World"]; |
2 |
arr[2] = 3; //[1, 2, 3, "World"] |
Loop dalam array:
1 |
let arr = [1, 2, "Hello", "World"]; |
2 |
|
3 |
for (let i = 0; i < arr.length; i++) { |
4 |
console.log(arr[i]); |
5 |
}
|
Array dua dimensi adalah array yang elemen-elemennya adalah array. Contoh:
1 |
let arr = [ |
2 |
[1, 2], |
3 |
["Hello", "World"] |
4 |
];
|
5 |
|
6 |
console.log(arr[ 0 ][ 1 ]); //2 |
Ini adalah bagaimana Anda akan melakukan perulangan dalam array dan menampilkan setiap elemen:
1 |
for (let i = 0; i < arr.length; i++) { |
2 |
for (let j = 0; j < arr[i].length; j++) { |
3 |
console.log(arr[ i ][ j ]); |
4 |
}
|
5 |
}
|
Tugas
Elemen apa yang ditampilkan ketika i = 1 dan j = 0 pada for loop di atas?
For-In Loop
Jenis loop ini memungkinkan kita melakukan loop melalui tombol-tombol pada suatu objek. Objek adalah struktur data yang memiliki kunci yang dipetakan ke nilai. Berikut adalah beberapa operasi umum yang dapat dilakukan pada suatu objek.
Buat objek kosong:
1 |
let obj = { }; |
Inisialisasi objek dengan nilai:
1 |
let obj = { |
2 |
foo: "Hello", |
3 |
bar: "World" |
4 |
};
|
Mengambil properti dari objek:
1 |
let obj = { |
2 |
foo: "Hello", |
3 |
bar: "World" |
4 |
};
|
5 |
|
6 |
obj.foo; //"Hello" |
7 |
obj["foo"]; //"Hello" |
Memperbarui properti di objek:
1 |
let obj = { |
2 |
foo: "Hello", |
3 |
bar: "World" |
4 |
};
|
5 |
|
6 |
obj.foo = "hi" |
7 |
obj["foo"] = "hi" |
Loop dalam key sebuah objek:
1 |
for (let key in obj) { |
2 |
console.log(key); |
3 |
}
|
Tugas
Apakah yang dilakukan for loop di atas menampilkan loop yang diberikan obj = {foo: "Hello", bar: "World"}?
For-Of Loop
Jenis loop ini memungkinkan kita melakukan loop pada nilai objek yang dapat diubah. Contoh objek yang dapat diubah adalah array dan string.
Loop dalam array:
1 |
let arr = ["foo", "bar", "baz"]; |
2 |
|
3 |
for (let elem of arr) { |
4 |
console.log(elem); |
5 |
}
|
6 |
|
7 |
// foo bar baz
|
Loop dalam string:
1 |
let str = "Hello"; |
2 |
|
3 |
for (let char of str) { |
4 |
console.log(char); |
5 |
}
|
6 |
|
7 |
//'H' 'e' 'l' 'l' 'o'
|
Tugas
Menggunakan salah satu loop, tulis sebuah program yang akan menampilkan pola tangga ini:
1 |
# |
2 |
# |
3 |
# |
4 |
# |
5 |
# |
Ulasan
Loop memungkinkan kita mengurangi duplikasi dalam kode kita. While loop dapat mengulangi suatu tindakan sampai suatu kondisi false. Do-while loop akan mengeksekusi setidaknya sekali. For loop dapat mengulangi suatu tindakan sampai kita mencapai akhir hitungan. For-in loop dirancang agar kita dapat mengakses kunci dalam suatu objek. For-of loop dirancang agar kita bisa mendapatkan nilai dari objek yang dapat diulang.
Selanjutnya, di bagian 4, kita akan belajar tentang fungsi.



