INI ADALAH LINK JavaScript Study II: https://progate.com/es6/study/2
Menguasai Dasar-Dasar ES6
Dalam pelajaran ini, kita akan membahas dasar-dasar pemrograman seperti loop dan array.
Mungkin awalnya akan terlihat sulit, namun jangan khawatir! Kami akan menuntun Anda hingga Anda bisa!
Review Variable
Review StudyⅠ
Pertama, mari kita review cara menggunakan variable, yang telah kita pelajari dalam JavaScript Study Ⅰ (ES6). Untuk me-reviewnya, mari kita coba mem-print angka dari 1 hingga 5 secara berurutan di console seperti yang ditunjukkan gambar dibawah ini.
Review Variable
Me-review Variable
Seperti yang dapat Anda lihat digambar kiri, Anda dapat mem-print angka menggunakan console.log untuk setiap angkanya. Namun, dalam pelajaran ini, kita akan menggunakan variable number seperti yang ditunjukkan digambar kanan dan membuat variable tersebut menambahkan 1 kedirinya sendiri secara otomatis.
Ayo terapkan ilmu yang baru dipelajari!
CONTOH KODINGAN:
// Deklarasikan variable number
let number = 1;
// Print nilai dari variable number, dan tambahkan dengan 1
console.log(number);
number += 1;
// Salin kedua baris diatas dan tempelkan dibaris bawah sebanyak 4 kali
console.log(number);
number += 1;
console.log(number);
number += 1;
console.log(number);
number += 1;
console.log(number);
number += 1;
Loop while
Apa yang dimaksud
dengan Iterasi?
Selanjutnya, mari kita pikirkan cara mem-print angka dari 1 hingga 100!
Seperti pada halaman sebelumnya, kita dapat menulis code yang sama sebanyak 100 kali, namun hal tersebut akan sangat membosankan. Dalam kasus ini, menggunakan iterasi akan memudahkan Anda untuk melakukannya. Mari kita lihat cara kerja iterasi pada slide berikutnya.
Loop while
Loop while
Salah satu cara melakukan iterasi adalah dengan menggunakan loop while. Loop ini ditulis seperti yang ditampilkan dalam contoh digambar bawah. “Selama kondisinya adalah true”, code didalam tanda kurung kurawal {} akan diulang. Anda tidak perlu menempatkan titik koma diakhir code loop while.
Loop while
Menggunakan Loop while (1)
Perhatikan beberapa contoh loop while untuk mem-print angka dari 1 hingga 100. Pertama, kita akan menulis code yang ingin diulangkan didalam loop while (code dikotak hijau gambar kiri). Selanjutnya, kita akan menempatkannya didalam { } (tanda kurung kurawal) milik loop while seperti yang ditunjukkan digambar kanan.
Loop while
Menggunakan Loop while (2)
Selanjutnya, mari kita tambahkan kondisi untuk menentukan kapan code berhenti diulang. Disini, kita ingin mengulang konten hingga number kurang dari atau sama dengan 100, oleh karena itu, kita akan menulis ekspresi kondisional seperti yang ditunjukkan digambar kiri. Code didalam {} akan terus diulang selama kondisi yang ditetapkan (number <= 100) adalah true.
Loop while
Catatan Penting tentang Loop while
Anda harus berhati-hati saat menggunakan loop while karena pada akhirnya kondisi haruslah false, agar dapat mencegah pengulangan yang akan menimbulkan error. Seperti di gambar kiri, code untuk mengupdate number tidak ada, sehingga menyebabkan code diulang tanpa henti, kondisi ini disebut loop infinit (loop tak terbatas).
Ayo terapkan ilmu yang baru dipelajari!
CONTOH KODINGGAN:
// Deklarasikan variable number
let number=1;
// Tambahkan while loop dibawah
while (number <= 100) {
console.log(number);
number += 1;
}
Loop for
Loop for
Ada cara lain untuk melakukan iterasi: loop for. Meskipun pada dasarnya memberikan hasil yang sama, loop for dapat ditulis dalam bentuk yang lebih sederhana dibandingkan loop while.
Loop for
Cara Menulis Loop for
Dalam loop for, definisi variable, kondisi, dan pembaharuan variable semuanya ditulis dalam tanda kurung dan dipisahkan oleh titik koma. Contoh disebelah kiri adalah loop while dan disebelah kanan adalah loop for.
Loop for
Penyingkatan Penulisan Operator
Code number += 1 dapat disingkat menjadi number++ untuk kemudahan Anda. Selain itu, untuk mengurangi (pengurangan), number -= 1 dapat ditulis sebagai number–.
Ayo terapkan ilmu yang baru dipelajari!
CONTOH KODINGGAN:
// Gunakan loop for untuk mem-print angka dari 1 hingga 100
for (let number = 1; number <= 100; number++) {
console.log(number);
}
Menerapkan Iterasi
Menerapkan Iterasi
Terakhir, mari kita coba latihan tingkat advance menggunakan loop for. Kali ini, kita akan tetap mem-print angka dari 1 hingga 100. Namun, bila angka adalah kelipatan 3, kita akan mem-print “Kelipatan 3”.
Ayo terapkan ilmu yang baru dipelajari!
CONTOH KODINGGAN:
// Selesikan code loop for dibawah ini
for (let number = 1; number <= 100; number++) {
// Gunakan statement if untuk mem-print string “Kelipatan 3” ketika angka yang diprint adalah angka kelipatan 3
if (number % 3 === 0) {
console.log(“Kelipatan 3”);
} else {
console.log(number);
}
}
Apa yang dimaksud dengan array?
Menangani Beberapa Nilai
Mari kita pelajari cara menangani beberapa nilai.
Misalnya, bila terdapat nama buah-buahan yang berbeda sebagai nilai, membuat istilah seperti “daftar buah” akan lebih mudah dibandingkan mendefinisikannya sebagai variable yang terpisah.
Apa yang dimaksud dengan array?
Apa yang Dimaksud
dengan Array?
Bila Anda ingin mengelola beberapa nilai sebagai grup, array akan sangat bermanfaat. Array dibuat seperti [nilai1, nilai2, nilai3]. Setiap nilai dalam array disebut element. Saat menggunakan array, beberapa string atau integer dapat dituliskan secara bersamaan seperti yang ditampilkan digambar kanan.
Apa yang dimaksud dengan array?
Memberikan Array
Karena array juga merupakan nilai, array dapat dibuat sebagai constant atau variable. Dalam kasus ini, nama constant yang akan diberikan untuk array sering kali berada dalam bentuk plural seperti, fruits, names, dsb. Bila Anda mem-print dengan console.log(constantName) seperti yang ditunjukkan di sebelah kiri, array akan di-print di console.
Ayo terapkan ilmu yang baru dipelajari!
CONTOH KODINGGAN:
// Tetapkan array yang diberikan sebagai constant animals
const animals = [“anjing”, “kucing”, “domba”];
// Print constant animals
console.log(animals);
Mendapatkan Element Array
Nomor Index
Setiap element array memiliki nomor index. Hal penting untuk Anda ingat: nomor index dimulai dari 0.
Mendapatkan Element Array
Mendapatkan Element Array
Untuk mendapatkan element array, gunakan nomor index seperti berikut: array[indexNumber]. Seperti contoh dibawah, untuk mendapatkan “apel” Anda dapat menulis fruits[0] (0 adalah nomor index “apel”).
Ayo terapkan ilmu yang baru dipelajari!
CONTOH KODINGGAN:
const animals = [“anjing”, “kucing”, “domba”];
// Print element array pertama
console.log(animals[0]);
// Print element array ketiga
console.log(animals[2]);
Mengupdate Element Array
Mengupdate Element Array
Seperti dalam contoh dikiri, memberikan nilai untuk element array akan mengupdate element.
Ayo terapkan ilmu yang baru dipelajari!
CONTOH KODINGGAN:
const animals = [“anjing”, “kucing”, “domba”];
// Gantikan element ketiga array menjadi “kelinci”
animals[2] = “kelinci”;
// Print array ketiga dari constant animal ke console
console.log(animals[2]);
Iterasi dengan Array (1)
Melakukan Iterasi
dengan Array
Ada kalanya iterasi digunakan dengan array.
Di bab ini, mari kita gunakan loop for untuk mendapatkan setiap element didalam array.
Iterasi dengan Array (1)
Arrays dan Loop for
Seperti gambar dikiri, array fruits memiliki 3 element, untuk mem-print semua nilainya kita memerlukan tiga code console.log(). Bandingkan dengan penggunaan loop for digambar kanan, hasil yang sama dapat dicapai dengan lebih efisien. Harap diingat bahwa urutan array dihitung dari 0, karena itulah kondisi loop dimulai dengan i = 0.
Ayo terapkan ilmu yang baru dipelajari!
CONTOH KODINGGAN:
const animals = [“anjing”, “kucing”, “domba”];
// Gunakan loop for untuk mem-print nilai animals di console secara berurutan
for (let i = 0; i < 3; i++) {
console.log(animals[i]);
}
Iterasi dengan Array (2)
Property length
Untuk mendapatkan jumlah element dalam array, Anda dapat menggunakan arrayName.length seperti gambar dibawah. Selain itu, dengan length, kita dapat merubah aturan loop for dari latihan sebelumnya ke kondisi digambar sebelah kanan. Penulisan seperti ini sangat umum digunakan pada saat menangani array dalam loop.
Apa yang dimaksud dengan Object?
Apa yang dimaksud
dengan Object?
Selanjutnya, mari kita pelajari object JavaScript.
Object, seperti array, digunakan untuk mengelompokkan dan mengelola beberapa nilai. Bila array mengatur nilai secara berurutan berdasarkan index, objects mengelola nilai dengan memberikannya nama yang disebut property.
Apa yang dimaksud dengan Object?
Membuat Object
Object dibuat seperti berikut: {property1: nilai1, property2: nilai2}. Bila element array ditempatkan dalam tanda kurung petak [], object harus ditempatkan dalam tanda kurung kurawal {}. Selanjutnya, setiap property dan nilai object harus dihubungkan dengan tanda titik dua (:), dan seperti array, setiap elementnya harus dipisahkan dengan koma.
Apa yang dimaksud dengan Object?
Memberikan Object
untuk Constant
Object juga dapat diberikan untuk constant.
Selain itu, bila console.log(constantName) ditulis (seperti yang ditunjukkan digambar kiri), object dapat di-print di console.
Mengakses & Memperbarui Nilai
Mendapatkan Nilai Object
Untuk mendapatkan nilai dari object, gunakan objectName.propertyName dengan nama object dan property yang sesuai.
Mengakses & Memperbarui Nilai
Mengupdate Nilai Object
Menulis objectName.propertyName = nilai baru akan mengupdate nilai yang disimpan dalam object.
Array dalam Object (1)
Object sebagai
Element Array
Selanjutnya, mari kita pelajari tentang array yang memiliki object sebagai element. Element array tidak harus berupa string, integer atau boolean, namun bisa juga sebagai object. Berkat karakteristik ini, array seperti dalam gambar dikiri dapat dibuat. Disini, untuk mencegah code menjadi terlalu panjang, setiap element sebaiknya dimulai dibaris baru.
Array dalam Object (1)
Mendapatkan Object
dalam Array
Ingatkah Anda bahwa nomor index diberikan untuk setiap element didalam array? Lihatlah contoh array yang dibawah ini, nilai array-nya adalah object. Untuk mengakses object didalam array ini, caranya sama seperti pada saat Anda mau mengakses array lainya, gunakan arrayName[indexNumber].
Array dalam Object (1)
Mendapatkan Nilai Object
di dalam Array
Selain itu, arrayName[indexNumber].propertyName dapat digunakan untuk memperoleh nilai property object yang disimpan dalam array.
Ini mungkin terlihat sedikit rumit, namun ini hanyalah sebuah kombinasi dari hal-hal yang telah Anda pelajari. Jika kebingungan, cobalah untuk me-review pelajaran-pelajaran sebelumnya.
Array dalam Object (2)
Array & Iterasi
Mari kita review array yang memiliki object sebagai element dan iterasi dengan menuliskan code untuk mengatasi beberapa masalah! Kita akan mem-print profil (name dan age).
Apa yang dimaksud dengan “undefined”?
Mendapatkan Element
yang Tidak Ada
Anda telah mempelajari cara menggunakan array dan object.
Di bab ini, mari kita lihat apa yang terjadi bila kita mencoba mengakses element dengan nomor index yang tidak terdapat didalam array, atau bila kita menentukan property yang tidak terdapat didalam object.
Apa yang dimaksud dengan “undefined”?
Undefined
(Tidak Didefinisikan)
Seperti yang ditunjukkan dibawah ini, bila Anda mencoba mendapatkan element dengan nomor index yang tidak ada didalam array, atau bila Anda mencoba mendapatkan element dengan property yang tidak dimiliki oleh object, maka undefined akan di-print.
undefined adalah nilai khusus yang berarti nilai tidak bisa didefinisikan.
Mencegah Undefined
Mencegah Undefined
Dalam latihan terakhir ini, bila nilai yang tidak ada ingin kita print, maka “undefined tahun” akan di-print, seperti yang ditunjukkan dalam contoh dibawah ini. Sebagai gantinya, mari kita pastikan jika hal ini terjadi maka “Usia saya rahasia!”-lah yang akan di-print.
Mencegah Undefined
Statement undefined dan if
Mari kita gunakan undefined dalam beberapa statement kondisional (if dan else).
Kita akan memiliki kontrol terhadap alur pada saat nilai character.age adalah undefined atau tidak.
Bagian 1
Latihan Akhir
Kita telah mempelajari tentang array, iterasi, dan object.
Dengan menggunakan hal-hal yang telah kita pelajari dalam pelajaran ini, mari kita print informasi tentang sebuah kafe di console. Namun sebelum memulai latihan, mari kita pelajari teknik tingkat advance untuk object sebagai persiapan latihan.
Bagian 1
Menggunakan Object Bersarang
Object dapat digunakan sebagai nilai didalam object lainya. Seperti contoh dibawah ini, object digunakan sebagai nilai untuk property favorite yang berada didalam object character.
Bagian 1
Mengakses Object
Object sejenis ini dapat diakses dengan syntax objectName.propertyNameA.propertyNameB. Contohnya, untuk mendapatkan nilai food di dalam object yang disimpan dalam object constant character, tulis character.favorite.food. Perhatikan bahwa penulisannya dimulai dari nama object yang terluar.
Bagian 2
Latihan Akhir (2)
Terakhir, kita akan menambahkan informasi tentang menu populer di kafe. Seperti yang dapat Anda lihat dalam contoh di bawah ini, Anda dapat menggunakan array sebagai nilai dalam object.
Ayo terapkan ilmu yang baru dipelajari!
CONTOH KODINGGAN:
const cafe = {
name: “Progate Cafe”,
businessHours: {
opening: “10:00”,
closing: “20:00”
},
// Tambahkan property menu dan berikan array yang sudah disediakan
menu: [ “Kopi”, “Teh”, “Kue Cokelat”]
};
console.log(Nama: ${cafe.name});
console.log(Jam: Dari jam ${cafe.businessHours.opening} sampai jam ${cafe.businessHours.closing});
console.log(----------------------------);
console.log(“Menu Rekomendasi”);
// Gunakan loop for untuk mem-print nilai array menu
for (let i = 0; i < cafe.menu.length; i++) {
console.log(cafe.menu[i]);
}
Bukan Selebf Blog 