PROGATE – Learning JavaScript

JavaScript Study I
String & Integer – Pengantar JavaScript
JavaScript
JavaScript (disingkat JS) adalah bahasa skrip yang menjadi element penting dalam pengembangan web. Saat ini,
hampir semua situs web menggunakan JS. JavaScript ES2015 (ES6), yang akan kita bahas pada pelajaran ini, adalah
versi terbaru JS yang menjadi populer karena memungkinkan orang untuk coding dengan lebih efisien.

Menjalankan Code JS
Pertama, kita akan melihat cara menjalankan (mengeksekusi) code ES6 dan mencetak (menampilkan) rangkaian kata
di layar yang disebut console. Saat Anda menulis code console.log("Hello World");, rangkaian huruf Hello
World akan di cetak di console.

String & Integer – console.log()

Console.log()
Sekarang mari kita pelajari cara menulis code JS! console.log() mencetak rangkaian huruf yang diketik dalam tanda
kurung. Kita menyebut karakter teks, seperti Hello World, sebagai string. Seperti yang dapat Anda lihat di bawah,
Anda harus menggunakan tanda kutip tunggal atau ganda.

Tanda titik koma

Setiap pernyataan harus diakhiri dengan tanda titik koma (;). Tanpa diakhiri titik koma, disebagian besar kasus, code
tersebut akan berfungsi secara normal, namun kami sarankan agar anda selalu menyertakanya untuk membiasakan
diri bercoding secara rapi dan jelas.

Cara Memberi Komentar Pada Code

Menulis // di awal baris akan menjadikan baris tersebut sebagai komentar. Artinya, baris ini akan diabaikan saat
code dijalankan. Komentar berguna untuk memberikan catatan dan menjelaskan code Anda, sebagai pengingat pada
saat anda mau memperbaruinya ataupun untuk mempermudah tim anda dalam melanjutkan code Anda.
Contoh :
// Cetak "Hello World" ke console
console.log("Hello World");

// Cetak "Ninja Ken" ke console

console.log("Ninja Ken");

// Ubah baris dibawah menjadi komentar

// console.log("Ubah baris ini menjadi komentar");

String & Integer – Kalkulasi (1)

Angka & Kalkulasi
Anda juga dapat menggunakan integer (angka) dalam pemrograman. Berbeda dengan string, Anda tidak perlu
menggunakan kutipan untuk integer. Integer digunakan untuk melakukan kalkulasi seperti penambahan dan
pengurangan. Gunakan + untuk penambahan dan - untuk pengurangan.

String & Integer

Seperti contoh di bawah, console.log(5 + 2); akan mencetak hasil penambahan, yaitu 7. Disisi lain, saat Anda
meletakkan 5 + 2 dalam tanda kutip, ini akan dicetak sebagai string. Harap diingat bahwa string dan integer adalah
tipe data yang berbeda!

Contoh :
// Cetak hasil 5 tambah 3
console.log(5+3);

// Cetak hasil 20 kurang 8

console.log(20-8);
// Cetak string "4 + 5"
console.log("4 + 5");

String & Integer – Kalkulasi (2)

Pengalian & Pembagian
Mari kita pelajari cara kalkulasi selain penambahan dan pengurangan! Seperti yang Anda lihat di bawah, tanda
bintang (*) dapat digunakan untuk pengalian dan garis miring kanan (/) dapat digunakan untuk pembagian. Simbol
ini berbeda dari simbol yang digunakan dalam matematika standar, jadi pastikan untuk diingat!

Modulo (Sisa Pembagian)

Anda juga dapat menggunakan simbol persentase (%) untuk mendapatkan modulo, sisa setelah pembagian. Ini
berguna karena ada banyak cara untuk menggunakan modulo dalam pemrograman!

// Cetak hasil 8 kali 4 di console.

console.log(8*4);

// Cetak hasil 24 bagi 4 di console.

console.log(24/4);

// Cetak sisa setelah membagi 7 dengan 2 di console.

console.log(7%2);

String & Integer – Menggabungkan String

Menggabungkan String
Simbol + juga dapat digunakan untuk mengkombinasikan (atau "menggabungkan") string. Seperti yang di tampilkan
di bawah, "Ninja" + " Ken" di cetak sebagai string Ninja Ken.
Perbedaan antara String & Integer
Mari kita lihat contoh perbedaan antara string dan integer. "3" + "5" akan menjadi string "35", namun 3 + 5 akan
menjadi 8. Itulah mengapa penting untuk mengingat bahwa string dan integer adalah dua tipe data yang sangat
berbeda!

// Cetak kombinasi dari string "Guru " dan "Domba"

console.log("Guru"+"Domba");

// Cetak kombinasi dari "20" dan "15" (dan jadikan sebagai string)
console.log("20"+"15");

Variable & Constant – Variable

Variable
Selanjutnya, kita akan mempelajari variable. Anda dapat menganggap variable sebagai "kotak" yang berisi nilai data
(string, integer, dsb). Mari kita lihat lebih detail pada slide berikutnya.

Mendeklarasikan Variable
Untuk mendeklarasikan variable, cukup tulis let variableName = nilai. Simbol = dalam pemrograman tidak berarti
"sama dengan". Ini berarti menetapkan yang ada di sisi kanan ke sisi kiri. let adalah deklarasi bahwa "kita akan
menentukan sebuah variable", nama variable ditulis setelah kata kunci ini dan kemudian diberi nilai.

Cara Menggunakan Variable

Variable sangatlah mudah untuk digunakan. Seperti yang Anda lihat di bawah, saat variable name diberi
nilai, "John", console.log(name) akan mencetak John. Anda dapat menggunakan variable seperti menggunakan nilai
di dalamnya.
Variable & String
Seperti gambar dibawah, pada saat mau mencetak variable, Anda tidak perlu meletakkan nama variable dalam tanda
kutip. Jika nama variable diletakkan dalam tanda kutip, seperti console.log("name");, name akan ditafsirkan sebagai
string dan akan dicetak sebagai name.

// Deklarasikan nama variable dengan nilai string "Ninja Ken"

let name = "Ninja Ken";

// Cetakan nilai nama variable

console.log(name);

Variable & Constant – Menggunakan Variable

Karakteristik Variabale
Variable dapat digunakan seperti string dan integer yang sudah kita pelajari. Nilai yang diberikan ke variable dapat
digabungkan dengan string lain atau digunakan dalam kalkulasi dengan integer lain.

Kenapa Menggunakan Variable?

Dalam praktiknya, Anda harus menggunakan banyak nilai yang berbeda saat menulis code. Variable membantu Anda
terhindar dari melakukan kesalahan saat menangani dan memperbarui nilai. Manfaat ini tercantum pada gambar di
bawah.
Manfaat Variable
Mari kita lihat contoh "menggunakan data di beberapa tempat" dan "membuat perubahan pada data". Daripada
mengulang teks yang sama tiga kali seperti pada contoh di kiri, kita dapat menggunakan variable untuk
mengelolanya. Dengan demikian, jika kita ingin mengubah "Selamat Pagi," menjadi "Halo,", kita hanya perlu
mengubahnya sekali.

Aturan Penamaan Variabale

Anda dapat memilih nama apa pun untuk variable, namun sebaiknya buatlah nama yang sederhana dan mudah
dipahami. Anda juga dapat mengikuti beberapa aturan untuk pengetikan nama variable dalam JS, seperti format
penulisan camel case (oddNumber, goodMorning). Merujuk contoh di bawah, coba gunakan nama yang sesuai.

// Deklarasikan variable length

let length = 5;

// Cetak nilai variable length

console.log(length);

// Gunakan variable length untuk mencetak hasil area lingkaran

console.log(length * length * 3);

Variable & Constant – Mengupdate Variable (1)

Mengupdate Variable
Anda dapat mengupdate nilai variable Anda. Ketika Anda menetapkan nilai baru ke variable yang telah Anda berikan
nilainya, nilai baru tersebut akan menggantikan nilai yang lama. Untuk memberikan nilai baru, Anda tidak perlu
menggunakan let, cukup dengan menulis variableName=nilai.
Cara Mengupdate Variable
Lihat gambar proses pembaruan nilai variable di bawah. Code akan dipanggil secara berurutan dari atas, jadi nilai
variable akan di update dengan nilai yang ditetapkan paling akhir.

let name = "Ninja Ken";

console.log(name);

// Update nilai variable ke "Birdie"

name ="Birdie";

// Cetak nilai dari variable name

console.log(name);

Variable & Constant – Mengupdate Variable (2)

Mengupdate Variable Menggunakan Nilainya
Bagaimana cara menambahkan 3 ke nilai variable number yang telah dideklarasikan? Seperti gambar dibawah, Anda
dapat melakukan ini dengan menetapkan number + 3 ke variable number. Dengan cara ini, hasil kalkulasi akan
ditetapkan ke variable di sisi kiri.

Cara Mengupdate Variable

Pada gambar dibawah, pelajari cara mengupdate nilai variable dengan menggunakan nilai variable itu sendiri!
Shorthand (Penulisan Singkat)
Ada shorthand untuk code seperti number = number + 10. Shorthand ini sering digunakan, jadi coba ingat format-
nya sesuai contoh di bawah!

let number = 7;
console.log(number);

// Tambahkan 3 ke nilai variable number

number += 3;
console.log(number);

// Bagi nilai variable number dengan 2

number /= 2;
console.log(number);

Variable & Constant – Constants

Apa itu Constant?
Constant mirip dengan variable, tetapi tidak dideklarasikan dengan let. Cara menentukan constant adalah dengan
menggunakan kata kunci const. Lihat lebih lanjut perbedaan antara keduanya pada slide berikutnya.

Perbedaan Antara Constants & Variable

Seperti yang dapat Anda lihat pada contoh dikiri, variable (let) dapat di update. Namun, constant tidak dapat di
update. Jika Anda mencoba untuk mengupdate nilai constant, seperti di tunjukkan di sini kanan, Anda akan
mendapatkan pesan error.
Manfaat Menggunakan Constant
Manfaat constant adalah untuk mencegah perubahan nilai. Sekilas mungkin terlihat tidak praktis. Namun, ini dapat
mencegah perubahan yang tidak diinginkan supaya code Anda lebih aman. Semakin banyak code yang Anda tulis,
semakin Anda akan merasakan manfaatnya. Untuk seterusnya, kita akan lebih sering menggunakan constant.

// Deklarasikan constant language

const language ='Prancis';

// Cetak nilai constant language

console.log(language);

// Gunakan constant language untuk mencetak "Saya bisa berbicara bahasa ____"
console.log('Saya bisa berbicara bahasa ' + language);

Variable & Constant – Template Literal

Template Literal
Hingga saat ini, kita hanya menggunakan simbol tanda tambah (+) untuk menggabungkan string dan constant. Di
ES6, Anda bisa melakukan hal ini dengan menggunakan fitur baru yang disebut template literal. Dengan template
literal, Anda dapat memasukkan constant (variable) di dalam string, seperti gambar dibawah. Mari kita lihat slide
berikutnya untuk mempelajarinya lebih lanjut.

Cara Menulis Template Literal

Seperti contoh dikiri, Anda dapat memasukkan constant dan variable ke string dengan menulis ${someConstant}.
Saat melakukan ini, Anda harus meletakkan keseluruhan string di antara dua backtick(`) . Anda juga dapat
memasukkan beberapa variable dan constant seperti yang ditampilkan pada contoh dikanan.
Mengetikkan Backstick
Gambar dibawah mengilustrasikan bagaimana mengetik backtick pada keyboard. Karakter ini mungkin letaknya
sedikit berbeda tergantung pada komputer jenis apa yang Anda pergunakan.

const name = "Ninja Ken";

const age = 14;

// Cetak string "Nama saya adalah ____"

console.log(`Nama saya adalah ${name}`);

// Cetak string "Hari ini saya berusia ____ tahun"

console.log(`Hari ini saya berusia ${age} tahun`);

Conditional Statement – Statement IF

Percabangan Kondisional
Selanjutnya, mari kita pelajari percabangan kondisional, sebuah konsep penting dalam pemrograman. Saat
mempelajari pemrograman, akan ada saatnya dimana Anda ingin menentukan kapan code tertentu ingin dijalankan.
Perintah ini disebut percabangan kondisional.

Struktur Statement IF
Saat statement if digunakan, percabangan kondisional, "jika X lakukan Y", akan diaktifkan. Tulis kondisi tersebut
setelah if dan tulis code untuk kapan, kondisi ini akan valid dalam tanda kurung kurawal { }. Pahami cara menulis
statement if melalui gambar dibawah ini.
Menulis Code Statement IF
Mari kita lihat cara kerja code statement if. Pertama, baca statement kondisional digambar kiri. Kondisi number >
10 berarti "nilai angka constant lebih besar daripada 10." Saat 12 ditetapkan ke constant number, kondisi ini
berlaku, dan codenya akan dijalankan.

Identasi untuk Statement IF

Saat menulis statement if, pastikan untuk membuat indentasi. Code yang terindentasi dengan benar akan lebih
mudah di baca. Indentasi pada contoh di bawah memperjelas kapan statement if dimulai. Kami sarankan untuk
membuat indentasi dengan tombol tab.

const level = 12;

// Tambahkan pernyataan if dengan kondisi: level > 10

if(level > 10) {
console.log('Level Anda lebih tinggi dari 10');
}

Conditional Statement – Operator Boolean & Perbandingan (1)

Mencetak Conditional Expression
Di pelajaran sebelumnya, Anda telah mempelajari cara menggunakan conditional statement if. Selanjutnya, mari kita
lihat conditional expression. Seperti yang ditunjukkan di kanan, true di-print di console saat code di
statement if berjalan. Apa arti "true" ini?
Boolean
"true" yang di-print di console pada slide sebelumnya disebut boolean. Tipe data boolean memiliki dua
nilai; true dan false. Conditional statement dinilai "true" jika kondisi terpenuhi dan "false" jika sebaliknya. Anda
dapat melihat cara kerjanya pada contoh di bawah.

Boolean & Statement IF

Dislide sebelumnya, kita mempelajari bahwa conditional statement akan menghasilkan nilai boolean. Berdasarkan
pengetahuan ini, Anda tahu bahwa code di statement if akan berjalan jika hasilnya adalah true dan tidak berjalan jika
hasilnya adalah false. Melalui gambar dibawah, periksalah alur dimana conditional statement adalah true.

Perbandingan Nilai
Simbol > yang digunakan di conditional statement merupakan operator perbandingan ukuran nilai. Untuk a <
b berarti, jika a kurang dari b, statement-nya akan menjadi true, jika a sama dengan atau lebih besar
dari b statement akan menjadi false. Sama untuk a <= b, jika a kurang atau sama dengan b, statement akan menjadi
true, dan sebaliknya.

const age = 24;

// Cetak hasil dari age >= 18

console.log(age >= 18);
// Cetak hasil dari age < 18
console.log(age < 18);
if(age >= 18) {
console.log("Saya berusia lebih dari 18 tahun");
}
/* Ketika nilai dari age lebih besar atau sama dengan 18 dan cetak "Saya berusia lebih dari 18 tahun" */

Conditional Statement – Operator Boolean & Perbandingan (2)

Operator Perbandingan
Selain operator perbandingan yang kita pelajari sebelumnya, ada juga operator perbandingan untuk
menentukan kesamaan antara dua nilai. a === b akan menjadi true jika a dan b sama, dan false jika tidak sama.
a !== b adalah kebalikannya. Simbol ini dapat digunakan untuk membandingkan nilai integer dan string.

const password = "ninjaken";

// Ketika nilai password adalah "ninjaken", cetak "Berhasil log in"

if(password === "ninjaken") {
console.log("Berhasil log in");
}

// Ketika nilai password bukan "ninjaken", cetak "Password salah"

if(password !== "ninjaken") {
console.log("Password salah");
}

Conditional Statement – ELSE

Jika Kondisi tidak Terpenuhi
Ada saatnya dimana Anda harus memanggil code yang berbeda jika kondisi statement if adalah false. Seperti yang
ditunjukkan dibawah, Anda harus memanggil code yang berbeda untuk mem-print "Nilai kurang dari atau sama
dengan 10" jika nilai angka tidak lebih besar dari 10.

Struktur Statement Else

Seperti pada contoh di bawah, dengan menggabungkan statement else dan if, Anda akan dapat membuat control
flow (pengontrolan alur), seperti "jika X, lakukan Y, jika tidak, lakukan Z". Jika kondisi statement if adalah false,
code di statement else akan berjalan.
Menulis Code di Statement ELSE
Mari kita lihat contoh code yang menggunakan else. Digambar kiri, kita hanya menggunakan statement if untuk
menentukan hasil apakah nilai constant number lebih besar dari 10. Sedangkan digambar kanan adalah contoh cara
melakukan hal yang sama dengan satu expression kondisi menggunakan statement else.

const age = 17;

// Ketika kondisi tidak terpenuhi, cetak "Saya berusia dibawah 18 tahun"

if (age >= 18) {
console.log("Saya berusia diatas 18 tahun");
} else {
console.log("Saya berusia dibawah 18 tahun");
}

Conditional Statement – ELSE IF

Menambahkan Kondisi
Mari kita lihat cara menambahkan kondisi lebih banyak ke statement if dan else. Misalnya, kita akan mempelajari
cara menambahkan pengontrolan alur untuk menyertakan kondisi yang tidak "lebih besar dari 10" tetapi "lebih
besar dari 5".

Menulis Statement ELSE IF

Seperti pada contoh di bawah, dengan menambahkan else if (kondisi) antara if dan else, Anda akan dapat
menambahkan alur pengontrolan lebih banyak. Mari kita lihat slide berikutnya untuk penjelasan lebih detail.
Code ELSE IF
Mari kita lihat cara penggunaan fungsi else if. Seperti pada contoh dikiri, konten fungsi else if akan berjalan karena
conditional statement kedua adalah true. Hasil ini dicetak pada console seperti yang dapat kita lihat disisi kanan.

const age = 17;

/* Ketika age lebih besar atau sama dengan 10, cetak: "Saya berusia dibawah 18 tahun, namun diatas 9 tahun" */
if (age >= 18) {
console.log("Saya di atas 18 tahun");
} else if (age >= 10) {
console.log('Saya berusia di bawah 18 tahun, namun di atas 9 tahun');
} else {
console.log("saya dibawah 10 tahun");
}

Conditional Statement – Beberapa Kondisi

AND
Selanjutnya kita akan pelajari cara menggabungkan beberapa kondisi. Pertama, kita akan mempelajari &&. Kondisi 1
&& Kondisi 2 berarti "Kondisi 1 dan Kondisi 2" dimana hanya jika semua kondisi adalah true, maka ekspresi
adalah true. Contohnya "Lebih besar dari 10 dan lebih kecil dari 30" tidak dapat ditulis sebagai 10 < x < 30. Pada
kasus ini, gunakan &&!

OR
Selanjutnya, kita akan mempelajari simbol yang berarti "OR" (Atau). Atau diekspresikan dalam bentuk ||. Kondisi 1
|| Kondisi 2 berarti "Kondisi 1 atau Kondisi 2". Pada kasus ini, di antara beberapa kondisi, jika salah satunya adalah
true, maka keseluruhan ekspresi menjadi true.
Contoh Penggabungan
Mari kita lihat contoh statement if menggunakan "dan". Pada contoh di kiri, number >= 10 dan number < 100
adalah true, jadi konten fungsinya dipanggil.

const age = 24;

// Tambahkan pernyataan if dengan kondisi yang telah ditentukan

if (age >= 20 && age < 30) {
console.log("Saya di usia 20-an tahun");
}

Conditional Statement – Statement SWITCH (1)

Apa itu Statement SWITCH?
Cara lain untuk menggunakan pengontrolan alur, adalah statement switch. Gambar dibawah adalah contoh untuk
mendasarkan alur pengontrolan pada nilai constant warna yang menyimpan warna lampu lalu lintas. Anda akan
dapat menggunakan statement switch ketika percabangan code tergantung pada nilai tertentu. Lihat slide
berikutnya untuk informasi lebih detail!

Cara Menulis Statement SWITCH (1)

Mari kita lihat cara menulis statement switch!
Seperti pada gambar dikiri, switch(nilai kondisional) { code } adalah struktur statement switch. Sedangkan disisi
kanan adalah contoh constant color menjalankan code yang berbeda, tergantung pada nilai color.
Cara Menulis Statement SWITCH (2)
Code Anda dapat dibagi dengan menambahkan case ke statement switch. Pada contoh dikanan,
kata "Berhenti!" dicetak jika constant warna adalah "merah". Kami akan menjelaskan break di slide yang berbeda.

Cara Menulis Statement SWITCH (3)

Pada statement switch, case ditambahkan di setiap cabang logika. Pada contoh dikanan, "kuning" diberikan sebagai
nilai case kedua dimana ketika nilainya true, maka "Perlahan!" akan dicetak.

Poin Penting Tentang Statement SWITCH

Selain itu, break sangat penting untuk statement switch. break adalah perintah untuk mengakhiri setiap case di
statement switch. Jika tidak ada break, code dari case berikutnya yang cocok juga akan terpanggil. Jangan lupa
dengan break saat menggunakan statement switch.

const rank = 2;

switch (rank) {
case 1:
console.log("Anda meraih medali emas!");
break;
 // Tambahkan case ketika rank adalah 2
case 2:
console.log("Anda meraih medali perak!");
break;

// Tambahkan case ketika rank adalah 3

case 3:
console.log("Anda meraih medali perunggu!");
break;
}

Conditional Statement – Statement SWITCH (2)

Statement SWITCH - DEFAULT
Seperti yang telah Anda pelajari, jika nilai kondisi switch cocok dengan nilai untuk kasus tertentu, bagian code itu
akan berjalan. Namun, jika nilai tidak cocok dengan kondisi apa pun, kasus default akan dipanggil. Default mirip
dengan else yang digunakan untuk statement if.

Dengan memanfaatkan aspek dari statement switch ini, Anda dapat menggunakannya untuk menyederhanakan
control flow (alur pengontrolan) yang rumit yang akan membutuhkan banyak cabang dengan menggunakan
statement if dan else if.

const rank = 5;

switch (rank) {
case 1:
console.log("Anda meraih medali emas!");
break;
case 2:
console.log("Anda meraih medali perak!");
break;
case 3:
console.log("Anda meraih medali perunggu!");
break;
// Tambahkan default
default:
console.log("Semoga sukses dikesempatan berikutnya");
break;
}
JavaScript Study II
Iterasi – Review variable
Review Study 1
ertama, 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.

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.

// 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;

Iterasi – 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
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.

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.

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.

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).

// Deklarasikan variable number

let number = 1;

// Tambahkan while loop dibawah

while (number <= 100) {
console.log(number);
number += 1;
}

Iterasi – 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. Mari kita pelajari secara lebih
terperinci dalam slide berikut ini.

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. Perhatikan
bagian yang digarisbawahi saat Anda membandingkan keduanya.

Penyingkatan Penulisan Operator

Code number += 1 dapat disingkat menjadi number++ untuk kemudahan Anda. Selain itu, untuk mengurangi
(pengurangan), number -= 1 dapat ditulis sebagai number--. Code untuk menulis loop while dan for dapat disingkat
seperti yang ditunjukkan disini, jadi cobalah mengingatnya!
Contoh :
Buat loop for, lalu tambahkan code berikut didalam () (tanda kurung):
[Definisi Variable]
• Definisikan variable number dan berikan 1 untuk variable tersebut
[Kondisi]
• Kondisi harus true bila "nilai variable number kurang dari atau sama dengan 100"
[Update Variable]
• Tambahkan 1 ke variable number
// Gunakan loop for untuk mem-print angka dari 1 hingga 100
for (let number = 1; number <= 100; number ++) {
// Dalam loop for, print nilai variable number.
console.log(number);
}

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".

Selesaikan loop for dalam editor. Di dalam () (tanda kurung), tambahkan yang berikut:
[Definisi Variable]
• Definisikan variable number dan berikan 1 untuk variable tersebut
[Kondisi]
• Kondisi harus true bila "nilai variable angka kurang dari atau sama dengan 100"
[Update Variable]
• Tambahkan 1 ke variable number
Selanjutnya, kita perlu menambahkan statement if dalam loop for.

// 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);
}
}
Array
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?

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.

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.

Contoh :
Definisikan constant animals dan berikan array untuk constant tersebut dengan 3 string berikut sebagai element:
• anjing
• kucing
• domba
Print nilai constant animals di console.

// 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

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").

Contoh :
Ambil element array pertama yang diberikan untuk constant animals, lalu print diconsole.
Ambil element array ketiga yang diberikan untuk constant animals, lalu print di console.

const animals = ["anjing", "kucing", "domba"];

// Print element array pertama

console.log(animals[0]);

// Print element array ketiga

console.log(animals[2]);

Mengupdate Element Array

Seperti dalam contoh dikiri, memberikan nilai untuk element array akan mengupdate element.

Contoh :
Ubah element ketiga dari array yang diberikan untuk constant animals menjadi string kelinci.
Print element ketiga dari array constant animals yang terbaru.
const animals = ["anjing", "kucing", "domba"];

// Gantikan element ketiga dari 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.

Array & 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.

Contoh :
Buat loop for, lalu tambahkan kondisi/aturan berikut di dalam () (tanda kurung):
[Variable]
• Berikan nilai 0 untuk variable i
[Kondisi]
• Kondisi harus true bila "nilai variable i kurang dari 3"
[Update Variable]
• Tambahkan 1 ke variable i
Di dalam loop for, gunakan constant animals dan variable i untuk mengakses dan mem-print element array.

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.

const animals = ["anjing", "kucing", "domba", "kelinci", "monyet", "harimau", "beruang", "gajah"];

// Gunakan property length untuk mem-print jumlah element di array

console.log(animals.length);

// Gunakan property length untuk mengubah kondisi dibawah

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

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.

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.
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.

Contoh :
Definisikan constant character dan berikan object dengan 2 element:
[Element pertama]
Property: name
Nilai: Ninja Ken (string)
[Element kedua]
Property: age
Nilai: 14 (integer)

// Deklarasikan constant character dan berikan object yang sudah disediakan

const character = { name: "Ninja Ken", age: 14 };

// Print nilai character

console.log(character);

Mengakses & Memperbarui Object

Mendapatkan Nilai Object
Untuk mendapatkan nilai dari object, gunakan objectName.propertyName dengan nama object dan property yang
sesuai.

Mengupdate Nilai Object

Menulis objectName.propertyName = nilai baru akan mengupdate nilai yang disimpan dalam object.
const character = {name: "Ninja Ken", age: 14};

// Print nilai property name milik character

console.log(character.name);

// Gantikan nilai age milik character ke 20

character.age = 20;

// Print constant character ke console

console.log(character);

Array dalam Object (1)

Object sebagai Elemet 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.

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].

Mendapatkan Nilai Object 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.
const characters = [
{name: "Ninja Ken", age: 14},
{name: "Guru Domba", age: 1000}
];

// Print element pertama milik array characters

console.log(characters[0]);

// Print nilai milik property name dari element array character kedua
console.log(characters[1].name);

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) dari setiap karakter seperti yang ditunjukkan di
bawah ini.

Contoh :
Selesaikan bagian loop for di antara () dengan mengikuti instruksi di bawah ini:
[Variable]
• Definisikan variable i dan berikan nilai 0 untuk variable tersebut
[Kondisi]
• Dengan menggunakan metode length, tambahkan kondisi true bila "nilai variable i kurang dari jumlah element
dalam characters"
[Update Variable]
• Tambahkan 1 ke variable i

const characters = [
{name: "Ninja Ken", age: 14},
{name: "Guru Domba", age: 100},
{name: "Baby Ninja Ben", age: 5},
];

// Selesaikan loop for dibawah

for (let i = 0; i < characters.length; i ++) {
console.log("--------------------");

Definisikan constant character dan berikan element pada index i array characters untuk constant tersebut.
// Tentukan nilai constant character
const character = characters[i];

// Print "Nama saya adalah ____"

console.log(`Nama saya adalah ${character.name}`);

// Print "Saya berusia ____ tahun"

console.log(`Saya berusia ${character.age} tahun`);
}
Undefined (idak didefinisikan)
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.

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.

const characters = [
{name: "Ninja Ken", age: 14},
{name: "Guru Domba", age: 100},
{name: "Baby Ninja Ben", age: 5},
// Tambahkan element dibawah
{name: "Birdie"}  hasilnya akan Undefined untuk age
];

for (let i = 0; i < characters.length; i++) {

console.log("--------------------");

const character = characters[i];

console.log(`Nama saya adalah ${character.name}`);

console.log(`Saya berumur ${character.age} tahun`);
}

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.
Statement Undefined & 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.

const characters = [
{name: "Ninja Ken", age: 14},
{name: "Guru Domba", age: 100},
{name: "Baby Ninja Ben", age: 5},
{name: "Birdie"}
];

for (let i = 0; i < characters.length; i++) {

console.log("--------------------");

const character = characters[i];

console.log(`Nama saya adalah ${character.name}`);

// Tambahkan statement if dibawah

if (character.age === undefined) {
console.log("Umur saya rahasia!");
} else {
console.log(`Saya berumur ${character.age} tahun`);
}
}

Proyek Akhir
Bagian I
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.
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.

const cafe = {
name: "Progate Cafe",
businessHours: {
// Tetapkan object yang sudah disediakan untuk businessHours
opening: "10:00",
closing: "20:00"
},
};

// Print "Nama: ____"

console.log(`Nama: ${cafe.name}`);

// Print "Jam: Dari jam ____ sampai jam ____"

console.log(`Jam: Dari jam ${cafe.businessHours.opening} sampai jam ${cafe.businessHours.closing}`);

Bagian II
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.

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]);
}

JavaScript III
Mempelajari Function
Apa yang Dimaksud dengan Function? (1)
Function adalah kumpulan instruksi. Seperti contoh dibawah ini, function dengan nama introduce memiliki dua
operasi yang dapat memprint Halo dan Menyebut nama. Mari kita pelajari cara membuat function di slide
berikutnya.

Mendefinisikan Function
Untuk membuat function, Anda harus mendefinisikannya. Untuk mendefinisikan function, ketik function( ), lalu tulis
hal yang Anda ingin function tersebut lakukan didalam { } (tanda kurung kurawal). Kita akan mempelajari lebih
dalam tentang definisi function kedepannya.

Memanggil Function
Definisi function itu penting, namun Anda harus memanggil function untuk benar-benar menggunakannya. Untuk
memanggil function dalam contoh di bawah ini, tulis introduce( );. Anda dapat melihat cara kerjanya dengan menulis
code Anda sendiri dalam latihan ini.
Contoh :
Gunakan constant greet untuk memanggil function.

const greet = function() {

console.log("Halo!");
console.log("Ayo belajar function!");
};

// Panggil function greet dibawah

greet();

Apa yang Dimaksud dengan Function? (2)

Menetapkan Function
Mari kita pelajari lebih lanjut tentang function. Didalam gambar dibawah, code didalam kotak oranye adalah code
function itu sendiri, dimana kita mendefinisikan function tersebut dengan mengunakan constant. Dalam latihan
berikutnya, mari kita coba mendefinisikan sebuah function dan memanggilnya.

Contoh :
// Tetapkan function ke constant hello
const hello = function() {
console.log("Halo!");
console.log("Saya Ninja Ken");
};
// Panggil function yang ditetapkan di constant hello
hello();

Arrow Function(1)
Seperti yang ditampilkan pada contoh dikanan, Anda juga dapat mendefinisikan function dengan () =>, ketimbang
dengan function(). Ini adalah fitur baru ES6 dan cara yang lebih mudah untuk mendefinisikan sebuah function.
Function yang didefinisikan dengan cara ini disebut Arrow Function (function panah).
Arrow Function (2)
Cara pengetikan arrow function tidak memerlukan perubahan apapun selain menggantikan function() dengan () =>.
Tidak ada perbedaan juga saat Anda memanggil function yang didefinisikan dengan cara ini. Jadi, mulai dari latihan
ini, mari kita gunakan arrow function.

// Tetapkan arrow function ke constant greet

const greet = () => {
console.log("Halo!");
};
// Panggil function greet
greet();

Argument
Apa yang dimaksud dengan Argument?
Nilai data yang diteruskan ke function disebut argument. Anda dapat menggunakan nilai function tersebut dengan
meneruskan nilainya saat Anda memanggil function tersebut.

Mendefinisikan Function dengan Argument

Mari kita definisikan function yang dapat menerima argument. Nilai yang diteruskan saat Anda memanggil function
disebut argument, namun variable yang tertulis dalam definisi disebut parameter. Seperti yang ditampilkan di
bawah ini, argument dapat diteruskan ke function dengan menuliskan nama parameter dalam tanda kurung, seperti
ini (parameter) =>.
Memanggil Function Argument
Untuk memanggil function yang menerima argument, tulis functionName (nilai). Function akan menerima nilai yang
ditunjuk dan nilai tersebut akan diberikan untuk parameter. Pada gambar di sebelah kanan, nilai "Ninja
Ken" diberikan untuk parameter name saat memanggil function introduce.

Menggunakan Nilai Argument Didalam Function

Anda dapat menggunakan argument didalam function seperti constant dan variable. Pelajari cara function menerima
argument melalui gambar dibawah ini.

Contoh :
// Tambahkan parameter name ke function
const greet = (name) => {
// Print pesan "Halo, ____"
console.log(`Halo, ${name}`);
};
// Panggil function greet dengan "Guru Domba" sebagai argument
greet("Guru Domba");

Menggunakan Beberapa argument

Function dapat menerima beberapa argument. Anda dapat meneruskan beberapa argument dengan menuliskannya
bersama dalam tanda kurung dan memisahkannya dengan koma ,. Dalam definisi function pada contoh gambar
dikiri, parameter ditulis sebagai parameter1, parameter2, ....
Menggunakan Beberapa Argument
Seperti saat Anda mendefinisikan beberapa parameter, gunakan koma , untuk memisahkan beberapa argument saat
Anda memanggil function. Penerusan argument harus dalam urutan yang sama seperti parameter, karena cara
pendefinisian function akan digunakan untuk pemanggilan fungsi.

Contoh :
// Tambahkan parameter number1 dan number2 kedalam function
const add = (number1, number2) => {
// Print penjumlahaan number1 dan number2
console.log(number1 + number2);
};
// Panggil function dengan 5 dan 7 sebagai argument
add(5, 7);

Nilai return
Menggunakan Nilai Return
Selanjutnya, kita akan mempelajari cara menggunakan hasil function di tempat function tersebut dipanggil. Nilai
yang dihasilkan setelah function dipanggil, disebut nilai return. Sebagian besar function digunakan untuk mengirim
nilai return kembali ke tempat function tersebut dipanggil. Di bawah ini, function add akan menerima 3 dan 7,
lalu nilai return 10 akan dihasilkan.

Function dengan Nilai Return

Anda dapat mengembalikan nilai dengan menempatkan statement return di dalam function dengan menulis
nilai return. Hal ini akan memungkinkan function menghasilkan output sebagai nilai return.
Menggunakan Nilai Return
Jika function memiliki nilai return, pemanggilan function akan digantikan oleh nilai return setelah function selesai
dijalankan. Seperti yang ditampilkan dibawah ini, Anda juga dapat memberikan pemanggilan function untuk
constant.

Contoh :
const half = (number) => {
// Return nilai dari variable number dibagi 2
return number / 2;
};

// Defenisikan constant result

const result = half(130);

// Print pesan "Separuh dari 130 adalah ____"

console.log(`Separuh dari 130 adalah ${result}`);

Jenis Nilai Return

Seperti halnya argument, Anda dapat menggunakan jenis nilai yang berbeda untuk nilai return. Misalnya, nilai
boolean (true atau false) akan dikembalikan (return) jika anda menggunakan statement kondisional. Ini sama seperti
kondisi di statement if.

Mengakhiri Function dengan Return

Mari kita pelajari secara lebih terperinci tentang statement return. Anda juga dapat menggunakan return untuk
keluar dari sebuah function. Namun, penting diketahui bahwa code dalam tanda kurung kurawal yang sama { }, yang
terletak setelah return tidak akan dijalankan.
Contoh :
const check = (number) => {
// periksa apakah number adalah kelipatan dari 3 dan return-kan hasilnya
return number % 3 === 0;
};

// Panggil function check dalam kondisi statement if

if ( check(123) ) {
console.log("Multiple of 3");
} else {
console.log("Not a multiple of 3");
}

Scope (Cakupan)
Constant di Dalam Function
Argument dari function dan constant yang didefinisikan di dalam sebuah function hanya dapat digunakan didalam
function tersebut. Dalam contoh dibawah ini, constant name hanya dapat digunakan didalam function introduce,
karena name didefinisikan di dalam function tersebut. Jika Anda mencoba menggunakan constant name diluar
functionnya, error akan terjadi.

Constant di Luar Function

Jika constant didefinisikan di luar function, constant dapat digunakan didalam dan diluar function. Dalam contoh
dibawah ini, constant name didefinisikan di luar function introduce, sehingga dapat digunakan didalam dan diluar
function.

Scope Sebuah Constant

Setiap constant memiliki bagian yang dapat diakses, dan bagian constant ini kita sebut sebagai constant scope.
Contoh :
// Definisikan constant name
const name = "Ninja Ken";

const introduce = (name) => {

// Print "Saya ____" diconsole
console.log(`Saya ${name}`);
};

// Panggil function introduce

introduce("Guru Domba");

// Print nilai dari constant name

console.log(name);

Latihan Akhir
Dilatihan ini kita akan membuat function yang benama getMax, yang berfungsi untuk menemukan nilai
tertinggi/maksimum. Seperti contoh dibawah, function getMax menerima tiga angka sebagai argument-nya dan me-
return nilai maksimum dari ketiga angka tersebut.

Contoh :
const number1 = 103;
const number2 = 72;
const number3 = 189;

// Ketik sebuah function getMax untuk mendapatkan nilai maksimum

const getMax = (a, b, c) => {
let max = a;

if (b > max) {
max = b;
}
if (c > max) {
max = c;
}
return max;
};
// Print "Nilai maksimum adalah __"
const max = getMax(number1, number2, number3);
console.log(`Nilai maksimum adalah ${max}`);

JavaScript Study IV
Dasar- Dasar Class
1. Review Object
Sebelum kita belajar tentang class, mari kita review objects yang telah dibahas dalam JavaScript (ES6) Study
Ⅱ. Objects adalah struktur yang memungkinkan Anda untuk mengelola data dengan pasangan properti dan nilai.

Object & Function (1)

Nilai object juga dapat berupa function. Cara menuliskannya ditunjukkan gambar dibawah ini. Selain itu, cara untuk
memanggil function, tulis constantName.propertyName( ). Perhatikan bahwa Anda memerlukan tanda ( ) setelah
nama property untuk mengindikasikan bahwa nilai adalah function.

Object & Function (2)

Mari kita lihat contohnya! Digambar kiri bawah, arrow function digunakan untuk memanggil greet property milik
object user. Dengan menuliskan user.greet(), Anda dapat memanggil function tersebut dan mem-print nilainya ke
console.

Contoh :
// Definisikan constant animal
const animal = {
name: "Leo",
age: 3,
greet: () => {
console.log("Halo");
}
};

// Print property name milik constant animal

console.log(animal.name);

// Panggil greet method property milik animal

animal.greet();

2. Apa yang dimaksud dengan Class?

Membuat Object secara Efisien
Object, seperti yang kita buat sebelumnya, biasanya digunakan saat membuat situs web. Misalnya, layanan web
yang memerlukan fungsi log in, seperti Progate, menggunakan object untuk membuat data pengguna. Bayangkan
jika kita harus membuat ini dari awal setiap permintaan login, tidak efisien kan? Oleh sebab itu, Anda akan
mempelajari cara membuat data yang serupa dengan mudah.

Blueprint Object
Untuk membuat object secara efisien, kita harus membuat "blueprint" (kerangka) object tersebut. Misalnya, saat
membuat data pengguna, data dapat dibuat dan disusun berdasarkan "blueprint pengguna" yang telah disiapkan
sebelumnya.

Class
Blueprint yang disebut dalam slide sebelumnya disebut class dalam JavaScript. Dengan menulis class ClassName,
seperti yang ditunjukkan di bawah ini, class baru dapat dibuat. Nama class biasanya diawali dengan huruf kapital.

Contoh ;
// Definisikan class Animal
class Animal {}
3. Membuat Instance
Karena kita sudah menyiapkan blueprint object, mari kita coba untuk membuat object dari blueprint tersebut. Untuk
membuat object dari class, tulis new ClassName(), seperti yang ditunjukkan dibawah ini. Object dibuat dari class
yang disebut instance. Instance dari class "Animal" disebut "instance Animal".

Memeriksa Instance
Dipelajaran ini, mari kita print instance Animal yang dibuat dari class Animal ke console, untuk memastikan bahwa
instance adalah object kosong seperti yang ditunjukkan di bawah ini. Jangan khawatir tentang nama class "Animal"
yang di-print sebelum tanda kurung kurawal { }.

Contoh :
// Definisikan class Animal
class Animal {
}

// Tetapkan instance class Animal ke constant animal

const animal = new Animal();

// Tampilkan nilai milik constant animal

console.log(animal);

4. Constructor (1)
Menambahkan Konten ke Blueprint
Sejauh ini, Anda telah mempelajari cara membuat instance berdasarkan blueprint (class). Namun, karena kita belum
menambahkan konten apa pun ke class, blueprint ini masih kosong. Selanjutnya, kita akan menambahkan konten ke
blueprint.
Apa yang dimaksud dengan Constructor?
Class sering memiliki method khusus yang disebut constructor. constructor digunakan untuk memberikan nilai awal
ke instance baru. Untuk menambahkan constructor ke class, tulis constructor() { } di dalam tanda kurung
kurawal {} class Animal seperti yang ditunjukkan di bawah ini.

Code di Dalam Constructor

Seperti yang ditunjukkan digambar dibawah ini, instruksi dan code juga dapat ditulis didalam { } constructor. Code
yang ditulis disana akan dipanggil saat instance dibuat. Hal penting untuk diingat adalah code akan dipanggil untuk
setiap instance. Karena new Animal( ) dipanggil dua kali dalam gambar dibawah ini, konten dalam constructor akan
dipanggil untuk keduanya.

Contoh ;
// Definisikan class Animal
class Animal {
// Tambahkan constructor
constructor () {
console.log("Membuat instance baru");
}
}
// Tetapkan instance class Animal ke constant animal
const animal = new Animal();

5. Constructor (2)
Menambahkan Property & Nilai
Dalam constructor, mari kita tambahkan informasi terkait instance yang dibuat. Untuk menambahkan property dan
nilai kedalam constructor, tulis this.property = nilai.
Instance & Property
Seperti yang dijelaskan di awal, instance adalah object. Jadi, dengan menulis instance.property, nilai yang
ditambahkan dalam constructor dapat digunakan diluar class tersebut.

Contoh ;
// Definisikan class Animal
class Animal {
// Tmbahkan constructor
constructor() {
// Tetapkan nilai string「Leo」ke property name
this.name = "Leo";
// Tetapkan nilai「3」ke property age
this.age = 3;
}
};

// Tetapkan instant class Animal ke constant animal

const animal = new Animal();
// Print「Nama: ____」
console.log(`Nama: ${animal.name}`);
// Print「Usia: __」
console.log(`Usia: ${animal.age}`);

6. Constructor (3)
Mengubah Nilai untuk Semua Instance
Dengan menambahkan constructor, instance baru akan diberi nilai awal saat dibuat. Namun, code di bawah ini akan
memberi semua instance nilai yang sama, yakni, "Leo" dan "3", saat instance tersebut dibuat. Mari kita pelajari cara
mengubah nilai untuk setiap instance secara bebas di slide berikutnya!

Argument Constructor (1)

Sama seperti function, constructor juga dapat menerima argument. Dengan menulis nama argument di dalam tanda
kurung ( ) setelah constructor, argument yang ditetapkan dapat digunakan didalam proses pemanggilan constructor
terkait.
Argument Constructor (2)
Saat nilai diteruskan ke constructor sebagai argument, nilai akan ditambahkan dalam tanda kurung ( ) milik new
className(). Dalam contoh di bawah ini, nilai string "Leo" diteruskan sebagai argument dan dapat diakses
sebagai name dalam constructor.

Contoh :
// Definisikan class Animal
class Animal {
// Tambahkan argument「name」dan「age」ke dalam () constructor
constructor(name, age) {
// Gantikan nilai string "Leo" dengan nilai milik argument name
this.name = name;
// Gantikan「3」dengan nilai milik argument age
this.age = age;
}
}

// Teruskan argument「"Mocha"」「8」ke constant animal dibawah

const animal = new Animal("Mocha", 8);

console.log(`Nama: ${animal.name}`);
console.log(`Usia: ${animal.age}`);

7. Method (1)
Apa yang dimaksud dengan Method?
Function yang berada didalam sebuah class disebut Method. Method bisa dibilang seperti "aksi" milik sebuah
instance. Jika data seperti name dan age dapat ditambahkan menggunakan property, method dapat
mengekspresikan seluruh kumpulan instruksi seperti memberikan salam dan menghitung nilai.
Mendefinisikan Method
Method dideklarasikan dalam class dengan menulis methodName( ) { }. Sama seperti function, code dalam method
harus dituliskan didalam { }.

Cara Menggunakan Method

Method dipanggil untuk instance yang dibuat didalam class. Misalnya, dengan
menuliskan instance.methodName() seperti contoh di bawah ini, method greet didalam object Animal, akan
dipanggil dan dijalankan untuk instance animal.

Contoh :
class Animal {
constructor(name, age) {
this.name = name;
this.age = age;
}

// Tambahkan method greet

greet() {
console.log("Halo");
}
};

const animal = new Animal("Leo", 3);

console.log(`Nama: ${animal.name}`);
console.log(`Usia: ${animal.age}`);

// Panggil method greet milik animal instance

animal.greet();

8. Method (2)
Menggunakan Nilai dalam Method
Selanjutnya, dengan menggunakan nilai name, ayo kita buat method untuk mem-print string Nama saya adalah
____. Saat Anda ingin menggunakan nilai instance didalam method, tulis this.propertyName, menggunakan nilai
khusus this.
Contoh :
// Definisikan class Animal
class Animal {
// Tambahkan constructur, dan dialam constructor terdapat argument "name" & "age"
constructor(name, age) {
// Property & value
this.name = name;
this.age = age;
}

// Tambahkan method greet

greet() {
console.log("Halo");
}

// Tambahkan method info

info() {
console.log(`Nama saya adalah ${this.name}`);
console.log(`Saya berusia ${this.age} tahun`);
}
}

const animal = new Animal("Leo", 3);

animal.greet();

// Panggil method info menggunakan constant animal

animal.info();

9. Memanggil Method di dalam Method

Menggunakan Method dalam Method
Anda juga dapat memanggil method dalam method lain. Seperti contoh di bawah ini, method lain dalam class yang
sama dapat digunakan dengan menuliskan this.methodName( ) dalam method tersebut.

Contoh :
class Animal {
constructor(name, age) {
this.name = name;
 this.age = age;
}

greet() {
console.log("Halo");
}

info() {
// Panggil method greet
this.greet();

console.log(`Nama saya adalah ${this.name}`);

console.log(`Saya berumur ${this.age} tahun`);
}
}

const animal = new Animal("Leo", 3);

animal.info();

Inheritance Class
10. Apa yang dimaksud dengan Inheritance
Membuat Class Dog
Kita telah membuat class Animal yang dapat menangani data hewan. Sekarang, mari kita buat class Dog khusus
untuk menangani data jenis anjing. Saat class yang akan Anda buat sama seperti class yang sudah
ada, inheritance akan menjadi sangat berguna!

Apa yang dimaksud dengan Inheritance?

Inheritance adalah cara membuat class baru berdasarkan class yang sudah ada. Misalnya, bila class Dog diwariskan
dari class Animal, class Dog juga akan memiliki semua method yang didefinisikan dalam class Animal.

Cara Menggunakan Inheritance

Saat membuat class menggunakan inheritance, gunakan extends. Agar class Dog dapat menerima warisan data dari
class Animal, tulis class Dog extends Animal seperti gambar dibawah. Untuk terminologi pemrograman, class yang
digunakan sebagai dasar disebut class induk (disini adalah class Animal), sedangkan class penerima warisan data
disebut class anak (class Dog)
Contoh :
class Animal {
constructor(name, age) {
this.name = name;
this.age = age;
}

greet() {
console.log("Halo");
}

info() {
this.greet();
console.log(`Nama saya adalah ${this.name}`);
console.log(`Saya berumur ${this.age} tahun`);
}
}

// Definisikan class Dog agar dapat menerima warisan dari class Animal
class Dog extends Animal {

const animal = new Animal("Leo", 3);

animal.info();

11. Menggunakan Inheritance Class

Method yang Diwariskan
Class Dog akan mewarisi semua method class Animal. Karena itu, meskipun tidak ada method yang dideklarasikan
dalam class Dog, class ini dapat menggunakan method info yang didefinisikan dalam class Animal.

Contoh :
class Animal {
constructor(name, age) {
this.name = name;
this.age = age;
}
 greet() {
console.log("Halo");
}

info() {
this.greet();
console.log(`Nama saya adalah ${this.name}`);
console.log(`Saya berusia ${this.age} tahun`);
}
}

class Dog extends Animal {

}

// Terapkan instance class Dog ke constant dog

const dog = new Dog("Leo", 4);

// Panggil method info dari constant dog

dog.info();

12. Menambah Method

Method Class anak
Method dapat ditambahkan ke class yang dibuat menggunakan inheritance dengan cara yang sama seperti class
normal. Di bawah ini, Anda dapat melihat method getHumanAge yang dapat mengkonversikan umur anjing ke umur
manusia.

Nilai Return dalam Method

Dalam method, nilai return dapat digunakan sama seperti function. Dibawah ini, nilai return
method getHumanAge diberikan untuk constant humanAge.

Mengakses Method Class Anak

Method yang hanya didefinisikan dalam class anak tidak dapat dipanggil dari class induk. Seperti yang dapat Anda
lihat di bawah ini, hal tersebut akan menyebabkan kesalahan saat Anda mencoba memanggil
method getHumanAge dengan instance dari class Animal.
Contoh :
class Animal {
constructor(name, age) {
this.name = name;
this.age = age;
}

greet() {
console.log("Halo");
}

info() {
this.greet();
console.log(`Nama saya adalah ${this.name}`);
console.log(`Saya berusia ${this.age} tahun`);
}
};

class Dog extends Animal {

// Tambahkan method getHumanAge
getHumanAge() {
return this.age * 7;
}
};

const dog = new Dog("Leo", 4);

dog.info();

// Panggil method getHumanAge milik instance dog

dog.getHumanAge();

// Print 「Saya berusia __ tahun dalam umur manusia」

const humanAge = dog.getHumanAge();
console.log(`Saya berusia ${humanAge} tahun dalam umur manusia`);

13. Overriding (1)

Method dengan Nama yang Sama
Kita telah mempelajari bahwa class anak dapat menggunakan method dalam class induk dan class anak. Namun, apa
yang terjadi bila method dengan nama yang sama seperti method dalam class Animal (class induk) dideklarasikan
dalam class Dog (class anak)? Method manakah yang dipanggil?
Overriding (Timpa)
Bila method dengan nama yang sama seperti method dalam class induk didefinisikan dalam class anak, maka method
class anak yang akan digunakan. Ini karena method class anak menimpa method class induk, hal ini
disebut overriding.

Overriding Method Info

Di sini, mari kita print usia anjing dalam usia manusia menggunakan method info dari class Dog. Dengan
method getHumanAge yang Anda deklarasikan pada halaman sebelumnya, tulis ulang method seperti yang
ditunjukkan di bawah ini.

Method Induk & Anak

Dengan menggunakan gambar di bawah ini sebagai referensi, tebak, method apa yang dapat digunakan dalam class
Dog (class anak)?

Contoh :
class Animal {
constructor(name, age) {
this.name = name;
this.age = age;
 }

greet() {
console.log("Halo");
}

info() {
this.greet();
console.log(`Nama saya adalah ${this.name}`);
console.log(`Saya berusia ${this.age} tahun`);
}
}

class Dog extends Animal {

// Tambahkan method info
info() {
this.greet();
console.log(`Nama saya adalah ${this.name}`);
console.log(`Saya berusia ${this.age} tahun`);

const humanAge = this.getHumanAge();

console.log(`Saya berusia ${humanAge} tahun dalam umur manusia`);
}

getHumanAge() {
return this.age * 7;
}
}

const dog = new Dog("Leo", 4);

dog.info();

14. Overriding (2)

Overriding Constructor (1)
Constructor dapat ditimpa dengan cara yang sama seperti method. Misalnya, Anda ingin menambahkan property ke
class anak. Untuk melakukan overriding constructor, Anda harus menambahkan super( ) dibaris pertama constructor
penimpa. Mari kita pelajari hal ini lebih lanjut dalam slide berikutnya.

Overriding Constructor (2)

Code super() dalam constructor class anak akan memanggil constructor class induk. Karena itu, kita harus
memberikan argument di antara () milik super(), sehingga constructor class induk dapat menerima argument
tersebut. Sekarang, setelah memanggil constructor class milik induk, property breed akan ditambahkan.
Contoh :
class Animal {
constructor(name, age) {
this.name = name;
this.age = age;
}

greet() {
console.log("Halo");
}

info() {
this.greet();
console.log(`Nama saya adalah ${this.name}`);
console.log(`Saya berusia ${this.age} tahun`);
}
}

class Dog extends Animal {

// Tambahkan constructor
constructor(name, age, breed) {
super(name,age);
this.breed = breed;
}

info() {
this.greet();
console.log(`Nama saya adalah ${this.name}`);
// Print 「Saya adalah seekor ____」
console.log(`Saya adalah seekor ${this.breed}`);
console.log(`Saya berusia ${this.age} tahun`);
const humanAge = this.getHumanAge();
console.log(`Saya berusia ${humanAge} tahun dalam umur manusia`);
}

getHumanAge() {
return this.age * 7;
}
}

// Tetapkan "Chihuahua" sebagai nilai argument

const dog = new Dog("Leo", 4, "Chihuahua");
dog.info();
JavaScript Study V
Memisahkan File
1. Memisahkan File (1)
Saat code Anda sudah banyak, mengelolanya dalam satu file sangatlah rumit. Karena itu, programmer sering
membuat beberapa file dan memisahkan codenya agar mudah diatur dan diperbarui. Di pelajaran ini, kita akan
membagi code ke dalam tiga file: script.js yang menjalankan program utama, animal.js yang mendefinisikan class
Animal, dan dog.js yang mendefinisikan class Dog.

Contoh :
File : animal.js
// Pindahkan pendefinisian class Animal ke animal.js dan hapus code dibawah
class Animal {
constructor(name, age) {
this.name = name;
this.age = age;
}

greet() {
console.log("Halo");
}

info() {
this.greet();
console.log(`Nama saya adalah ${this.name}`);
console.log(`Saya berusia ${this.age} tahun`);
}
}

File : dog.js
// Pindahkan pendefinisian class Dog ke dog.js dan hapus code dibawah
class Dog extends Animal {
constructor(name, age, breed) {
super(name, age);
this.breed = breed;
}

info() {
this.greet();
console.log(`Nama saya adalah ${this.name}`);
console.log(`Saya adalah seekor ${this.breed}`);

console.log(`Saya berusia ${this.age} tahun`);

const humanAge = this.getHumanAge();
console.log(`Saya berusia ${humanAge} tahun dalam umur manusia`);
}

getHumanAge() {
 return this.age * 7;
}
}

File : script.js
// Code dibawah jangan diganggu karena bukan bagian dari class Animal ataupun Dog
const dog = new Dog("Leo", 4, "Chihuahua");
dog.info();

Result : ERROR

2. Memisahkan File (2)

Mengapa terjadi Kesalahan
Dalam latihan sebelumnya, kesalahan terjadi setelah Anda memisahkan file. Hal ini terjadi karena nilai yang
diperlukan untuk file dihapus saat Anda melakukan pembagian code ke file yang berbeda. Dalam contoh di bawah
ini, pesan error ditampilkan karena class Animal tidak ada di dalam dog.js.

Memisahkan File (2)

Kesalahan saat membagi file dapat diselesaikan dengan menautkan setiap file dan meneruskan nilai yang
diperlukan ke file tersebut. Dalam kasus ini, Anda harus memperbolehkan class Animal untuk digunakan
didalam dog.js, dan memperbolehkan class Dog agar dapat digunakan didalam script.js. Di slide berikutnya, mari kita
lihat cara menautkan file.

Export
Pertama, mari kita buat agar class Animal dalam animal.js dapat digunakan dalam file lain. Setelah mendefinisikan
class, tulis export default ClassName untuk meng-export class dan memungkinkannya untuk diteruskan ke file yang
berbeda.
Import
Selanjutnya, mari kita buat agar class Animal dapat digunakan di dalam dog.js. Untuk menggunakan class yang
didefinisikan dalam file lain, Anda harus meng-importnya. Anda dapat meng-import class dengan menulis import
ClassName from "./fileName" dibaris atas file. Anda dapat mengecualikan ekstensi file .js.

Contoh :
File : animal.js
class Animal {
constructor(name, age) {
this.name = name;
this.age = age;
}

greet() {
console.log("Halo");
}

info() {
this.greet();
console.log(`Nama saya adalah ${this.name}`);
console.log(`Saya berusia ${this.age} tahun`);
}
}
// Export class Animal dibawah baris ini
export default Animal;

File : dog.js
// Import class Animal dibawah baris ini
import Animal from "./animal";

class Dog extends Animal {

constructor(name, age, breed) {
super(name, age);
this.breed = breed;
}

info() {
this.greet();
console.log(`Nama saya adalah ${this.name}`);
console.log(`Saya adalah seekor ${this.breed}`);
console.log(`Saya berusia ${this.age} tahun`);
const humanAge = this.getHumanAge();
console.log(`Saya berusia ${humanAge} tahun dalam umur manusia`);
}

getHumanAge() {
return this.age * 7;
 }
}
// Export class Dog dibawah baris ini
export default Dog;

File : script.js
// Import class Dog dibawah baris ini
import Dog from "./dog";

const dog = new Dog("Leo", 4, "Chihuahua");

dog.info();

3. Meng-export Nilai
Meskipun kita berlatih meng-export class, namun bukan hanya class yang dapat kita export. Semua jenis nilai seperti
string, integer, bahkan function dapat di export. Saat meng-export, export default constantName ditulis seperti yang
dapat Anda lihat di bawah ini. Saat meng-import, import constantName from "./fileName" harus ditulis.

Memisahkan Deklarasi
Seperti yang dapat Anda lihat di sebelah kanan, kita akan memindahkan deklarasi instance Dog dari script.js ke file
yang baru, yakni dogData.js. Meskipun code ini sangat singkat dan manfaat yang diperoleh dari memisahkan filenya
tidak banyak, ini merupakan langkah yang baik untuk membuat code Anda lebih rapi.

Meng-export Instance Dog

Untuk memisahkan file, buat perubahan pada code Anda seperti yang ditampilkan digambar bawah ini.
File dogData.js harus meng-import class Dog dan meng-export constant dog, yang merupakan instance milik Dog.
Setelah itu, import constant dog kedalam script.js.

Contoh :
File : animal.js
class Animal {
constructor(name, age) {
this.name = name;
this.age = age;
}

greet() {
console.log("Halo");
}

info() {
this.greet();
console.log(`Nama saya adalah ${this.name}`);
console.log(`Saya berusia ${this.age} tahun`);
}
}

export default Animal;

File : dog.js
import Animal from "./animal";

class Dog extends Animal {

constructor(name, age, breed) {
super(name, age);
this.breed = breed;
}

Info() {
this.greet();
console.log(`Nama saya adalah ${this.name}`);
console.log(`Saya adalah seekor ${this.breed}`);
console.log(`Saya berusia ${this.age} tahun`);
const humanAge = this.getHumanAge();
console.log(`Saya berusia ${humanAge} tahun dalam umur manusia`);
}

getHumanAge() {
return this.age * 7;
}
}

export default Dog;

File : script.js
// Import constant dog
import dog from "./dogData";
dog.info();

File : dogData.js
// Buat agar constant dog dapat diakses dari file berikut
import Dog from "./dog";
const dog = new Dog("Leo", 4, "Chihuahua");
// Export constant dog
export default dog;
4. Export Bernama
Export Default
Statement export default disebut default export. Dengan export default, saat file di-import, export default
value akan secara otomatis di-import. Karena itu, nama nilai saat meng-export dan meng-import code dapat
berbeda.

Catatan tentang Export Default

Export default hanya dapat digunakan untuk satu nilai dalam satu file. Karena nilai export default akan secara
otomatis di-import saat file tersebut di-import, maka hanya satu nilai yang diperbolehkan. Jika Anda ingin meng-
export beberapa nilai, gunakan export bernama yang akan kita bahas di slide berikutnya.

Export Bernama (1)

Seperti yang dapat Anda lihat di bawah ini di sebelah kiri, export bernama di-export dengan menuliskan nama di
dalam { } (tanda kurung kurawal) tanpa menuliskan default. Saat meng-import nilai export bernama, tentukan nama
export tersebut di file yang akan menerimanya. Nilai yang Anda import dapat ditentukan dengan menulis import
{ valueName } from "./fileName" menggunakan { }.

Export Bernama (2)

Tidak seperti export default, export bernama dapat meng-export beberapa nilai. Seperti yang ditunjukkan di sebelah
kiri, menulis export { name1, name2 } akan memungkinkan Anda membuat beberapa export bernama dari satu file.
Beberapa import juga dapat dibuat bersamaan dengan menggunakan koma untuk memisahkan nilai-nilai tersebut.
Contoh :
File : animal.js
class Animal {
constructor(name, age) {
this.name = name;
this.age = age;
}

greet() {
console.log("Halo");
}

info() {
this.greet();
console.log(`Nama saya adalah ${this.name}`);
console.log(`Saya berusia ${this.age} tahun`);
}
}

export default Animal;

File : dog.js
import Animal from "./animal";

class Dog extends Animal {

constructor(name, age, breed) {
super(name, age);
this.breed = breed;
}

info() {
this.greet();
console.log(`Nama saya adalah ${this.name}`);
console.log(`Saya adalah seekor ${this.breed}`);
console.log(`Saya berusia ${this.age} tahun`);
const humanAge = this.getHumanAge();
console.log(`Saya berusia ${humanAge} tahun dalam umur manusia`);
}

getHumanAge() {
return this.age * 7;
}
}

export default Dog;

File : script.js
// Tulis ulang code dibawah and import constant dog1 dan dog2
import {dog1, dog2} from "./dogData";
// Salin code di jendela instruksi dan tulis ulang constant dog1 dan dog2 agar dapat dicetak
console.log("---------");
dog1.info();
console.log("---------");
dog2.info();

File : dogData.js
import Dog from "./dog";
// Ingatlah 2 constant dog1 dan dog2 dibawah ini
const dog1 = new Dog("Leo", 4, "Chihuahua");
const dog2 = new Dog("Ben", 2, "Poodle");
// Ubah code dibawah dan export constant dog1 dan dog2
export {dog1, dog2};

5. Jalur relative
Jalur Relatif (1)
Sejauh ini, Anda telah menggunakan ./fileName untuk menentukan file yang mau di-import. Code ini disebut jalur
relatif karena fungsinya adalah untuk menunjukkan jalur yang dapat menghubungkan satu file ke file yang lain .
Seperti yang dapat Anda lihat disebelah kanan, jalur menuju ke file "./dogData" sudah dideklarasikan. Jalur relatif ini
menunjukkan posisi menuju dogData.js dari posisi script.js.

File dalam Direktori yang Sama

Tanda jalur relatif ./ dengan satu titik berarti kita membuat jalur untuk keluar selangkah ke direktori dimana file
yang memiliki jalur relatif tersebut disimpan. Seperti contoh dikanan bawah. Jika kita menulis "./dogData" di file
script.js, maka kita membuat jalur relatif yang mengarahkan code untuk keluar selangkah dari script.js ke
direktori src, dan kemudian masuk ke file dogData.js.

Menentukan File dalam Direktori Berbeda

Untuk latihan jalur relatif, mari kita coba untuk mengubah struktur direktori yang telah kita gunakan sejauh ini.
Seperti yang ditunjukkan digambar sebelah kiri, mari kita lihat jalur relatif saat meng-import dogData.js dari
direktori data ke file script.js.
Jalur Relatif (2)
Jika Anda mau keluar dari satu direktori, gunakan "../" dengan dua titik. Pelajari gambar di kiri, saat meng-import
"dog.js" dari direktori class ke "dogData.js" di direktori data, seperti digambar kiri. Untuk peng-codean nya bisa
dipelajari dari gambar sebelah kanan.

Contoh :
Folder / File : class/animal.js
class Animal {
constructor(name, age) {
this.name = name;
this.age = age;
}

greet() {
console.log("Halo");
}

info() {
this.greet();
console.log(`Nama saya adalah ${this.name}`);
console.log(`Saya berusia ${this.age} tahun`);
}
}
export default Animal;

Folder / File : class/dog.js

import Animal from "./animal";

class Dog extends Animal {

constructor(name, age, breed) {
super(name, age);
this.breed = breed;
}

info() {
this.greet();
console.log(`Nama saya adalah ${this.name}`);
console.log(`Saya adalah seekor ${this.breed}`);
 console.log(`Saya berusia ${this.age} tahun`);
const humanAge = this.getHumanAge();
console.log(`Saya berusia ${humanAge} tahun dalam umur manusia`);
}

getHumanAge() {
return this.age * 7;
}
}
export default Dog;

Folder / File : class/dogData.js

// Ubah jalur relatif "./dog"
import Dog from "../class/dog";

const dog1 = new Dog("Leo", 4, "Chihuahua");

const dog2 = new Dog("Ben", 2, "Poodle");

export { dog1, dog2 };

File : script.js
// Ubah jalur relatif "./dogData"
import { dog1, dog2 } from "./data/dogData";

console.log("---------");
dog1.info();
console.log("---------");
dog2.info();

Menggunakan Paket
6. Paket (1)
Di dunia JavaScript, banyak orang membuat code mereka terbuka dan tersedia untuk publik sebagai paket. Dibahasa
JavaScript, Anda dapat menggunakan paket tersebut dengan meng-importnya ke code Anda. Dalam pelajaran ini,
Anda akan mempelajari cara menggunakan paket-paket ini.

Meng-import Paket
Untuk meng-import paket dalam program Anda sendiri, gunakan kata import. Saat meng-import paket, tentukan
nama paket, bukan nama file. Contoh dibawah, menunjukan bagaimana cara untuk meng-import paket yang
disebut chalk.
Cara Menggunakan Paket Chalk
Setelah meng-import, Anda akan dapat menggunakan paket dalam file. Paket chalk memungkinkan Anda mengubah
warna teks. Seperti yang ditunjukkan di sebelah kiri, Anda dapat mengubah warna teks dengan mudah dengan
meneruskan string ke method paket seperti chalk.yellow() dan chalk.bgCyan().

Contoh :
// Import paket chalk
import chalk from "chalk";

import Animal from "./animal";

class Dog extends Animal {

constructor(name, age, breed) {
super(name, age);
this.breed = breed;
}

info() {
const humanAge = this.getHumanAge();

this.greet();
// Tulis ulang konten dari console.log menggunakan chalk
console.log(chalk.yellow(`Nama saya adalah ${this.name}`));

// Tulis ulang konten dari console.log menggunakan chalk

console.log(chalk.bgCyan(`Saya adalah seekor ${this.breed}`));

console.log(`Saya berusia ${this.age} tahun`);

console.log(`Saya berusia ${humanAge} tahun dalam umur manusia`);
}

getHumanAge() {
return this.age * 7;
}
}

export default Dog;

7. Paket (2)
Menerima Nilai dari Console
Terakhir, mari kita gunakan paket yang akan memungkinkan Anda memasukkan nilai dari console. Seperti yang
ditunjukkan digambar dibawah ini, kita akan membuat agar instance class Dog dapat dibuat bergantung pada nilai
yang dimasukkan.

Cara Menggunakan readline-sync

Dengan mengimport paket readline-sync, Anda akan dapat memasukkan nilai ke dalam console dan menggunakan
nilai tersebut dalam program Anda. Caranya, import paket seperti yang ditunjukkan digambar sebelah kiri, lalu
tulis readlineSync.question(pertanyaan). Saat pertanyaan di-print, code akan berhenti hingga nilai yang berupa
string dimasukkan.

Menggunakan Nilai Input

Nilai input dapat diberikan untuk constant dan variable dalam program Anda. Seperti yang dapat Anda lihat
digambar sebelah kiri, code readlineSync.question dapat diberikan untuk constant, sehingga nilai input akan
disimpan ke constant tersebut. Dalam kasus ini, nilai input akan disimpan dalam constant name.

Memasukkkan Integer
readlineSync juga dapat menerima nilai integer. Untuk menerima nilai integer, Anda dapat
menggunakan readlineSync.questionInt(). Untuk memasukkan nilai usia didalam latihan yang telah kita kerjakan,
Anda hanya perlu untuk membuat instance Dog menggunakan code ini!
Contoh :
// Import readline-sync
import readlineSync from "readline-sync";
import Dog from "../class/dog";

const dog1 = new Dog("Leo", 4, "Chihuahua");

// Tulis ulang dengan menggunakan readlineSync.question

const name = readlineSync.question("Ketik nama Anda: ");;

// Tulis ulang dengan menggunakan readlineSync.questionInt

const age = readlineSync.questionInt("Ketik usia Anda: ");;

// Tulis ulang dengan menggunakan readlineSync.question

const breed = readlineSync.question("Ketik ras Anda: ");;

const dog2 = new Dog(name, age, breed);

export { dog1, dog2 };

JavaScript Study VI
Method untuk Array
1. Push
Method push digunakan untuk menambahkan nilai baru ke akhir array. Caranya seperti gambar dibawah,
ketik arrayName.push(nilai), dImana anda dapat memasukkan nilai baru yang ingin Anda tambahkan ke akhir array
didalam ( ) tepat setelah kata push.

Contoh :
const characters = ["Ninja Ken", "Baby Ben", "Guru Domba"];
console.log(characters);

// Tambahkan string "Birdie" ke array characters dengan method push

characters.push("Birdie");

// Print array characters

console.log(characters);
2. forEach
Method forEach digunakan untuk memanggil setiap nilai disebuah array secara berurutan. Dibawah ini adalah
contoh cara mem-print setiap nilai dalam array numbers sesuai urutannya. Mari kita lihat lebih lanjut cara kerjanya
pada slide berikutnya.

Cara Kerja forEach

Argument method forEach adalah Arrow Function yang telah kita pelajari dalam ES6 Study III. Dengan
method forEach, setiap nilai array akan diberikan kepada argument arrow function, satu per satu, secara berurutan,
dan code dalam arrow function akan diterapkan untuk setiap nilai tersebut. Catatan: sebagian besar method yang
akan Anda pelajari dalam pelajaran ini digunakan dengan arrow function.

Cara Menggunakan forEach

Berikut adalah contoh cara menggunakan method forEach. Setiap nilai dalam array numbers diberikan untuk
argument number dalam arrow function secara satu per satu. Lalu, code didalam arrow
function console.log(number) akan diulang untuk setiap nilai tersebut.

Callback Function
Function yang di tulis sebagai argument di function lain yang dipanggil di sebut callback function. Kita akan banyak
menggunakan callback function di kursus ini, jadi pastikan untuk memahaminya.
Callback Function Beberapa Baris
Saat Callback function ditempatkan dalam argument seperti dalam method forEach, code dapat menjadi terlalu
panjang. Dalam kasus ini, lebih baik Anda menulis code seperti yang ditunjukkan di bawah ini. Menggunakan
beberapa baris setelah { akan membuat code Anda lebih mudah dibaca dan dipahami.

Contoh :
const characters = ["Ninja Ken", "Baby Ben", "Guru Domba", "Birdie"];
// Cetak semua element didalam array characters dengan menggunakan method forEach
characters.forEach((character) => {
console.log(character);
});

3. Find
Method find akan mengembalikan nilai pertama dari sebuah array yang sesuai dengan conditional expression yang
ditetapkan. Seperti contoh dibawah, nilai pertama yang lebih besar dari 3, dalam kasus ini adalah 5, akan di berikan
ke foundNumber, dan akan di print ke console. Kita akan mempelajari mengenai hal ini di slide berikutnya.

Cara Menggunakan find (1)

Berikut ini adalah contoh penggunaan method find. Untuk setiap element dari array numbers, nilainya akan
ditetapkan pada argument number kemudian dilakukan perulangan code. Baris code { return condition } akan
menghasilkan nilai return pertama yang sesuai dengan syarat. find akan berhenti ketika nilai yang sesuai telah
ditemukan dan hanya akan menghasilkan return dari nilai tersebut.

Cara Menggunakan find (2)

Anda juga dapat menggunakan method find dengan array object. Seperti yang ditunjukkan di bawah ini, property
object dapat digunakan dalam kondisi tersebut. Dalam kasus ini, find mengembalikan seluruh object yang berisi
property yang sesuai.
Contoh ;
const numbers = [1, 3, 5, 7, 9];

// Temukan kelipatan 3 dari array numbers dengan menggunakan method find

// dan tetapkan hasilnya ke constant foundNumber
const foundNumber = numbers.find((number) => {
return number % 3 === 0;
});

// Print foundNumber
console.log(foundNumber);

const characters = [
{id: 1, name: "Ninja Ken", age: 6},
{id: 2, name: "Baby Ben", age: 2},
{id: 3, name: "Guru Domba", age: 100},
{id: 4, name: "Birdie", age: 21}
];

// Temukan object dengan id = 3 dari constant characters,

// dan tetapkan nilainya ke constant foundCharacter
const foundCharacter = characters.find((character) =>{
return character.id === 3;
});

// Print foundCharacter
console.log(foundCharacter);

4. Filter
Untuk mendapatkan semua nilai yang sesuai dengan kondisi tertentu, gunakan method filter. Method ini membuat
dan mengembalikan array baru dengan semua nilai yang sesuai. Contoh di bawah ini menunjukkan cara
mendapatkan semua nilai dari array numbers yang "lebih besar dari 3".

Cara Menggunakan filter (1)

Dalam contoh berikut, nilai dari array numbers diberikan untuk argument number. Selanjutnya, nilai tersebut akan
diperiksa oleh method filter dengan kondisi "angka lebih besar dari 3". Lalu, nilai yang sesuai akan diberikan untuk
constant filteredNumbers dalam bentuk array.
Cara Menggunakan filter (2)
Anda juga dapat menggunakan method filter untuk array yang berisi object, seperti method find. Dalam contoh di
bawah ini, property object digunakan dalam kondisi tersebut. Dalam kasus ini, object dikumpulkan kapan pun
kondisi benar.

Contoh :
const numbers = [1, 2, 3, 4];

// Dapatkan semua nomor genap dari array numbers dengan menggunakan method filter,
// dan tetapkan hasilnya ke constant evenNumbers
const evenNumbers = numbers.filter((number) => {
return number % 2 === 0;
});

// Print nilai evenNumbers

console.log(evenNumbers);

const characters = [
{id: 1, name:"Ninja Ken", age: 14},
{id: 2, name:"Baby Ben", age: 5},
{id: 3, name:"Guru Domba", age: 100}
];

// Dapatkan characters berumur lebih muda dari 20,

// dan tetapkan hasilnya ke constant underTwenty
const underTwenty = characters.filter((character) => {
return character.age < 20
});

// Print nilai underTwenty

console.log(underTwenty);

5. Map
Cara Kerja Map
Method map menerapkan function yang sama untuk setiap nilai didalam array dan me-return hasilnya sebagai array
baru. Seperti yang dapat Anda lihat di bawah ini, function doubledNumbers menghasilkan array baru yang berisi
nilai hasil perkalian 2 dengan semua nilai didalam array numbers.
Menggunakan Method Map (1)
Pelajari gambar dibawah, setiap nilai didalam array numbers dimasukan ke argument number secara bergantian.
Setelah itu, code return "number * 2" didalam method map akan diterapkan untuk setiap nilai tersebut. Kemudian,
hasil perkalian tersebut akan dikembalikan dan diberikan ke constant doubledNumbers sebagai array. Di dalam
function map, anda harus memasukkan { nilai return }.

Menggunakan Method Map (2)

Seperti method yang lainnya, Anda juga dapat menggunakan map dengan array object. Dalam contoh dibawah ini,
code dalam function map akan menggabungkan property firstName dan lastName (nilai string) menggunakan
method map.

Contoh :
const numbers = [1, 2, 3, 4];

// Buatlah array baru di constant numbers dengan menggunakan method map,

// dan tetapkan hasilnya ke constant doubledNumbers
const doubledNumbers = numbers.map((number) => {
return number * 2;
});

// Print constant doubledNumbers

console.log(doubledNumbers);

const names = [
{firstName: "Kate", lastName: "Jones"},
{firstName: "John", lastName: "Smith"},
{firstName: "Dennis", lastName: "Williams"},
 {firstName: "David", lastName: "Black"}
];

// Buatlah array baru didalam constant names dengan menggunakan method map,
// dan tetapkan sebagai constant fullNames
const fullNames = names.map((name) => {
return name.firstName + " " + name.lastName;
});

// Print constant fullNames

console.log(fullNames);

JavaScript Study VII

Mempelajari tentang Callback Function
1. Mempelajari tentang Callback Function
Callback function akan sering muncul saat menggunakan JavaScript. Function ini akan sangat berguna saat kamu mau
membuat aplikasi web. Untuk memahami callback function, sangat penting bagi Anda untuk mengetahui
pengetahuan dasarnya. Mempelajari callback function akan terus membantu Anda dalam upaya mengembangkan
aplikasi web.

Pertama, mari kita coba gunakan callback function. Saya akan menjelaskannya secara lebih terperinci setelah latihan
berikut, jadi jangan khawatir.

Contoh :
const printKen = () => {
console.log("Ninja Ken");
};

const printMaster = () => {

console.log("Guru Domba");
};

const call = (callback) => {

console.log("Memanggil function callback.");
callback();
};

// Ketik ulang argument ini sebagai printMaster dan konfirmasikan output-nya

call(printMaster);

2. Apa yang dimaksud dengan Callback Function

Jenis Argument
Dalam javaScript, Function yang diteruskan ke function lain sebagai argument disebut callback function.

Meneruskan Callback Function

Seperti yang dapat Anda lihat dalam gambar di bawah ini, function printKen diteruskan sebagai argument saat
function call dipanggil.

Memanggil dan Meneruskan Function

Function dipanggil dengan menempatkan ( ) setelah nama function. Tanpa (), function hanya akan menunjukkan
definisinya. Karena itu, seperti yang dapat Anda lihat di kedua gambar dibawah, memanggil dan meneruskan
function ditulis secara berbeda.

Alur Callback Function

Mari kita lihat proses pemanggilan function printKen, yang diteruskan sebagai argument function call.

Contoh :
const printKen = () => {
console.log("Ninja Ken");
};

// Tambahkan parameter callback ke function call

const call = (callback) => {
console.log("Memanggil function callback.");
// Panggil callback function
callback();
};

// Teruskan printKen sebagai argument dan jalankan function call

call(printKen);

3. Mendeklarasikan Callback Function secara Langsung

Mendeklarasikan Function dalam Argument
Sebelumnya, kita sudah belajar cara meneruskan callback function yang telah didefinisikan, namun function juga
dapat didefinisikan langsung didalam argument.

Alur saat Mendeklarasikan Function dalam Argument

Alurnya sama dengan saat sebelum function dideklarasikan.

Contoh :
const printKen = () => {
console.log("Ninja Ken");
};

const call = (callback) => {

console.log("Memanggil callback function.");
callback();
};

call(printKen);

// Deklarasikan function didalam argument dan teruskan

call(() => {
console.log("Guru Domba");
});

4. Argument Callback Function

Meneruskan Argument
Seperti halnya function biasa, callback function juga dapat menerima argument.

Meneruskan Beberapa Argument

Lebih dari dua argument dapat diteruskan.
Hal-hal yang Harus Diperhatikan untuk Argument
Pastikan jumlah parameter callback function sama dengan jumlah argument yang diteruskan saat memanggilnya.

Contoh :
const call = (callback) => {
callback("Ninja Ken", 14);
};

// Tambahkan sebuah function yang menerima dua argument didalam argument call
call((name, age) => {
console.log(`${name} berusia ${age} tahun.`);
});