Javascript Dasar

JAVASCRIPT DASAR
Cara mendeklarasikan sebuah variabel adalah dengan kata kunci let atau const dan diikuti dengan nama
variabelnya, seperti ini:
let namaVariabel1 = "hello";

const namaVariabel2 = "world";
Dalam menamakan variabel, kalian pun perlu mengikuti beberapa ketentuan sebagai berikut:
Menggunakan konvensicamelCase, yaitu menggunakan huruf kecil pada permulaan kata, dan jika nama
variabel terdiri dari 2 kata atau lebih, maka kata kedua dan berikutnya diawali dengan huruf besar. (Ini
sebenarnya bukan syarat mutlak; hanya kebiasaan. Nanti kalian akan menemukan konvensi lain seperi
PascalCase saat belajar JavaScript lebih lanjut);
Nama variabel boleh diawali dengan underscore(_), huruf besar (jika diharuskan), dan $.
Nama variabel tidak diawali dengan angka, @, *, #, !, %, (), -, +.
Tidak boleh menggunakan kata kunci JavaScript seperti boolean, break, else, extends, dan lain-lain.
Antara kata pertama dan kata kedua tidak diberi spasi atau dash(-);
Karena JavaScript bersifat case-sensitive, maka penamaan juga case-sensitive (jadi variabel hitung
dengan variabel Hitung itu berbeda).
Contoh:
// Contoh penulisan nama variabel yang benar
let nama;
let tempatTinggal;
let _nomorHandphone;
let $nomorAkunBank;
// Contoh penulisan nama variabel yang salah

let makanan pembuka; //tidak boleh ada spasi
let @username; //tidak boleh diawali dengan @
let delete; //delete itu merupakan kata kunci di JavaScript
Sebuah variabel bisa kita isi dengan suatu data. Caranya adalah dengan menggunakan = setelah nama
variabel, lalu diikuti dengan datanya.
Contohnya seperti ini:

let nama = "Stefanus";
const namaIbuKandung = "Clara";
const umur = 20;
const apakahSudahMenikah = false;
let jumlahAnak;
Pada contoh di atas, variabel nama bernilai Stefanus dan tipe datanya adalah string. Tipe data
string memiliki ciri khas yaitu nilai data dibungkus dengan tanda ' atau ".
Variabel namaIbuKandung juga memiliki nilai yang bertipe data string Clara. Lalu apa yang
membedakan kedua variabel tersebut?
Variabel yang dideklarasikan menggunakan kata kunci let dapat diubah nilainya. Misalnya kita ingin
mengubah variabel nama tadi menjadi Albert, kita cukup memberinya data tersebut seperti ini:
// memberi nilai baru kepada variabel nama
nama = "Albert";
Sementara variabel yang dideklarasikan menggunakan kata kunci const tidak dapat diubah nilainya;
sudah konstan. Jika kita tetap mencoba untuk memberinya nilai seperti di bawah ini, akan muncul error.
// memberi nilai baru kepada variabel namaIbuKandung tadi
namaIbuKandung = "Juliana";
// akan muncul error

Uncaught TypeError: Assignment to constant variable.
📝 Catatan:
Namun terdapat 2 pengecualian dalam penggunaan kata kunci const. Variabel yang memiliki tipe data
array atau objek bisa diubah nilai element atau propertinya meskipun menggunakan kata kunci const saat
dideklarasikan. Kalian akan belajar ini di topik selanjutnya.
TIPE DATA
Kembali ke pembahasan tipe data. Variabel umur memiliki nilai 20 yang mana termasuk tipe data
number. Tipe data ini bisa berupa:
integer (seperti 1, 2, dan 3)
atau float (seperti 3.14, 2.718, dan 1.618)
Selanjutnya, variabel apakahSudahMenikah bernilai false dengan tipe data boolean.
Tipe boolean ini terdiri dari 2 nilai:

true yang bernilai benar
false yang bernilai salah
Terakhir, variabel jumlahAnak bernilai undefined, karena memang tidak diisi dengan nilai apapun. Jika
variabel tidak kita beri sebuah nilai, secara default (standar) ia memiliki nilai undefined.
Untuk merangkum, berikut adalah 7 tipe data yang ada dalam JavaScript:
string - deretan karakter yang diapit oleh sepasang tanda kutip;
number - bilangan bulat, pecahan, dan lain-lain;
boolean - nilai benar dari sebuah pernyataan yang dituliskan sebagai true atau false;
null - sebuah nilai yang berarti kosong atau menunjuk pada nilai yang tidak ada;
undefined - berbeda dari null, undefined menandakan kondisi variabel yang belum diberi sebuah nilai.
Jadi pernyataan "nilai variabel itu adalah undefined" sebenarnya kurang tepat, sebab variabelnya memang
tidak mempunyai sebuah nilai;
symbol - sebuah nilai unik yang dihasilkan tiap kali kita memanggil fungsi Symbol(). Nilai unik ini
memiliki beberapa kegunaan seperti memberi nomor identifikasi unik dan berperan sebagai nama properti
unik sebuah objek;
object - sebuah kumpulan pasangan properti dan nilai. Seperti objek dalam kehidupan sehari-hari saja.
Misalnya objek Apel memiliki properti warna dengan
Browser pada umumnya mempunyai tab console yang bisa digunakan untuk menampilkan data
console.log dari kode JavaScript. Untuk mengaktifkan tab console di Chrome, bisa dilakukan dengan
pilih menu View -> Developer -> Developer Tools atau dengan tekan tombol F12 atau kombinasi tombol
Ctrl-Shift-I.
console.log adalah salah satu syntax JavaScript untuk menampilkan nilai suatu variabel atau hasil
operasi di tab console.
Contoh:
let nama = "Budi";
let umur = 20;
let apakahSudahMenikah = false;
let jumlahAnak;
// Cobalah buka tab console di developer tools browser anda

console.log(nama); // output: Budi
console.log(umur); // output: 20
console.log(apakahSudahMenikah); // output: false
console.log(jumlahAnak); // output: undefined
Dengan console.log, output dari variabel atau operasi yang kita masukkan tidak akan kelihatan di
halaman website dan hanya bisa tampil di tab console. Dengan begitu, output tersebut tidak akan
mengganggu tampilan website kamu.
console.log juga sering digunakan developer ketika mau debug/investigasi kesalahan di kode yang
ditulis.
ARITMATIKA
Operator aritmatika digunakan di operasi matematika yang melibatkan data dengan tipe number.
Operator-operator tersebut dapat dilihat pada tabel berikut ini:
Operator Deskripsi
+ Penjumlahan
- Pengurangan
* Perkalian
/ Pembagian
** Eksponen (pangkat)
% Modulus (menghasilkan sisa hasil pembagian)
++ Increment (menambah 1)
-- Decrement (mengurangi 1)
Contoh penggunaan pada operasi matematika JavaScript:

Penjumlahan
let bilangan1 = 10;
let bilangan2 = 3;
console.log(bilangan1 + bilangan2); // Output: 13
Pengurangan
let bilangan1 = 10;
let bilangan2 = 3;
console.log(bilangan1 - bilangan2); // Output: 7
Perkalian
let bilangan1 = 10;
let bilangan2 = 3;
console.log(bilangan1 * bilangan2); // Output: 30
Pembagian
let bilangan1 = 10;
let bilangan2 = 3;
console.log(bilangan1 / bilangan2); // Output: 3.3333333333333335
Eksponen (Pangkat)
let bilangan1 = 10;
let bilangan2 = 3;
console.log(bilangan1 ** bilangan2); // Output: 1000
Modulus
let bilangan1 = 10;
let bilangan2 = 3;
console.log(bilangan1 % bilangan2); // Output: 1
Increment (Tambah 1)
let bilangan = 10;
bilangan++;
console.log(bilangan); // Output: 11
Contoh operasi di atas apabila dituliskan tanpa operator increment akan sama seperti ini:
let bilangan = 10;
bilangan = bilangan + 1;
console.log(bilangan); // output: 11
Decrement (Kurang 1)
let bilangan = 10;
bilangan--;
Contoh operasi di atas apabila dituliskan tanpa operator decrement akan sama seperti ini:
let bilangan = 10;
bilangan = bilangan - 1;
ASSIGNMENT
Assignment operator digunakan untuk memberikan nilai pada variabel.
Assignment Operator Contoh Penggunaan Setara Dengan

= x=y x=y
= + x += y x=x+y
= - x -= y x=x-y
= * x *= y x=x*y
= / x /= y x=x/y
= % x %= y x=x%y
= ** x **= y x = x ** y
Contoh penggunaan di JavaScript:

Assignment =
let nama = "Budi";
let umur = 20;
let apakahSudahMenikah = false;
let jumlahAnak;
console.log(nama); // Output: Budi
console.log(umur); // Output: 20
console.log(apakahSudahMenikah); // Output: false
console.log(jumlahAnak); // Output: undefined
Addition Assignment +=
let bilangan = 10;
bilangan += 5;
Subtraction Assignment -=
let bilangan = 10;
bilangan -= 5;
Multiplication Assignment *=
let bilangan = 10;
bilangan *= 5;
Division Assignment /=
let bilangan = 10;
bilangan /= 5;
Modulus Assignment %=
let bilangan = 10;
bilangan %= 5;
Exponent Assignment **=

let bilangan = 10;
bilangan **= 5;
STRING OPERATOR
String operator digunakan untuk menggabungkan dua atau lebih data string. Operasi ini biasa dikenal
dengan sebutan string concatenation.
Ada 2 macam string operator, yaitu:

+
+=
Contoh penggunaan:
operator +
let namaDepan = "Albert";
let namaBelakang = "Einstein";
console.log(namaDepan + " " + namaBelakang); // Output: Albert Einstein
operator +=
let kata = "Halo ";
kata += "Dunia";
console.log(kata); // Output: Halo Dunia
Oh iya, di JavaScript, jika kita menggabungkan data string dengan data number, maka hasil akhirnya juga
akan menjadi string.
Contoh:
let kata = "Kambing ada ";
let bilangan = 5;
console.log(kata + bilangan); // Output: Kambing ada 5
OPERATOR PERBANDINGAN
Operator perbandingan digunakan untuk membandingkan dua data atau nilai.
Operator Deskripsi
== sama dengan (cek nilai)
=== sama dengan (cek nilai dan tipe data)
!= tidak sama dengan (cek nilai)
!== tidak sama dengan (cek nilai dan tipe data)
> lebih dari
< kurang dari
>= lebih dari atau sama dengan
<= kurang dari atau sama dengan
?: ternary operator
Contoh penggunaan di JavaScript:

Operator == (Loose Equality)
let bilangan == 10;
console.log(bilangan == 10); // Output: true
console.log(bilangan == 8); // Output: false
console.log(bilangan == "10"); // Output: true
Mari kita coba perhatikan bilangan == "10". Kenapa outputnya bisa true? Karena di dalam JavaScript jika
operand-nya berbeda tipe data, maka salah satunya akan dipaksa berubah tipe datanya (type coercion)
agar mereka sama dan bisa dibandingkan
📝 Catatan:
Yang dimaksud dengan operand adalah nilai yang digunakan di dalam sebuah proses operasi. Misalnya
dalam operasi penjumlahan 1 + 2, yang tergolong operand adalah angka 1 dan 3.
Biar lebih paham, mari kita coba perhatikan contoh di bawah ini:
console.log("3.14" == 3.14) // Output: true
Kenapa kode di atas menghasilkan output true?

Sebab "3.14" diubah dulu menjadi tipe data number agar bisa dibandingkan nilainya. Lalu baru
dibandingkan 3.14 === 3.14.
Jadi pada dasarnya == akan berusaha mengubah tipe data jika tipe dari kedua berbeda. Lalu bagaimana
kalau kita ingin membandingkan nilai dan tipe datanya juga? Mari kita lihat contoh selanjutnya.
Operator === (Strict Equality)

let bilangan = 10;
console.log(bilangan === 10); // Output: true --> nilai dan tipe data sama
console.log(bilangan === "10"); // Output: false --> nilai sama tetapi tipe data tidak sama
Kali ini, outputnya akan berupa true apabila kedua operand memiliki nilai dan tipe data yang sama.
Makanya pada baris kedua contoh kode di atas menghasilkan output false sebab kita membandingkan
bilangan 10 dengan string "10" yang berbeda tipe datanya.
Operator !=
let bilangan = 10;
console.log(bilangan != 8); // Output: true --> nilai tidak sama tetapi tipe data sama
console.log(bilangan != "8"); // Output: true --> nilai dan tipe data tidak sama
console.log(bilangan != 10); // Output: false --> nilai dan tipe data sama
console.log(bilangan != "10"); // Output: false --> nilai sama tetapi tipe data tidak sama
Mungkin kalian agak bingung kalau melihat contoh di atas. Yang perlu kalian ketahui adalah operator !=
akan menghasilkan output false apabila kedua operand memiliki nilai yang sama, tidak terpengaruh sama
tipe datanya.
Operator !==
let bilangan = 10;
console.log(bilangan !== 8); // Output: true --> nilai tidak sama tetapi tipe data sama
console.log(bilangan !== "8"); // Output: true --> nilai dan tipe data tidak sama
console.log(bilangan !== 10); // Output: false --> nilai dan tipe data sama
console.log(bilangan !== "10"); // Output: true --> nilai sama tetapi tipe data tidak sama
Kali ini nilai dan tipe data akan dicek. Operator ini hanya akan mengeluarkan output false apabila **nilai
dan tipe data dari kedua operand sama. **
Operator > (Lebih Dari)

let bilangan = 10;
console.log(bilangan > 10); // Output: false
console.log(bilangan > 11); // Output: false
console.log(bilangan > 8); // Output: true
Operator < (Kurang Dari)
let bilangan = 10;
console.log(bilangan < 10); // Output: false
console.log(bilangan < 8); // Output: false
console.log(bilangan < 11); // Output: true
Operator >= (Lebih Dari atau Sama Dengan)

let bilangan = 10;
console.log(bilangan >= 10); // Output: true
console.log(bilangan >= 8); // Output: true
console.log(bilangan >= 11); // Output: false
Operator <= (Kurang Dari atau Sama Dengan)

let bilangan = 10;
console.log(bilangan <= 10); // Output: true
console.log(bilangan <= 11); // Output: true
console.log(bilangan <= 8); // Output: false
Operator Ternary
Digunakan untuk memberikan nilai pada variabel sesuai dengan kondisi yang ditentukan.
Syntaxnya adalah:
variabel = (kondisi true) ? nilai1 : nilai2;
// Artinya apabila kondisi true, maka variabel akan diberi nilai1
// Apabila kondisi false, maka variabel akan diberi nilai2
Contoh:
let makanan = "daging";
let jenisHewan = makanan === "daging" ? "karnivora" : "herbivora";
console.log(jenisHewan); // Output: "karnivora"
Pada kode di atas, kondisi yang diberikan adalah makanan === "daging". Karena kondisi tersebut bernilai
true, maka yang dikembalikan oleh operator ini adalah "karnivora".
Seandainya variabel makanan tidak bernilai "daging", maka kondisi makanan === "daging" akan bernilai
false dan nilai yang akan dikembalikan adalah "herbivora"
OPERATOR LOGIKA
Operator logika digunakan untuk menentukan logika antara dua kondisi atau nilai.
Operator Deskripsi
&& AND (Dan)
|| OR (Atau)
! NOT (Bukan)
Syntax dari operator logika di JavaScript itu seperti ini:

Operator && (AND)
kondisi1 && kondisi2
Operator ini hanya akan menghasilkan output true apabila kedua operand-nya bernilai true (kondisi1 dan
kondisi2 bernilai true).
Operator || (OR)
kondisi1 || kondisi2
Operator ini akan menghasilkan output true apabila salah satu dari operand-nya bernilai true (kondisi1
bernilai true atau kondisi2 bernilai true).
Operator ! (NOT)
!kondisi
Operator ini akan bernilai true apabila operand-nya bernilai false (negation). Dan sebaliknya, operator
akan mengembalikan false apabila operand-nya bernilai true.
Tabel Perbandingan
Jika kedua kondisi bertipe boolean, maka hasil dari masing-masing operator logika akan seperti ini:
Operator Kondisi 1 Kondisi 2 Hasil

&& true true true
&& true false false
&& false true false
&& false false false
|| true true true
|| true false true
|| false true true
|| false false false
! true - false
! false - true
FUNGSI (FUNCTION)
Di konsep JavaScript, fungsi bisa diilustrasikan sebagai berikut:
Seandainya kita mempunyai sebuah mesin pembuat kue. Kita bisa memasukkan bahan baku seperti
tepung terigu, telur, gula, air, dan bahan lainnya ke dalam mesin tersebut, kemudian mesin itu akan
mengolah bahan-bahan tersebut yang akhirnya akan menghasilkan kue.
Nah, dari gambaran tersebut, mesin pembuat kue adalah ** fungsi (function)**. Tepung terigu, telur,
gula, air, dan bahan-bahan lain untuk membuat kue adalah input (parameter) dari sebuah fungsi.
Kemudian kue yang dihasilkan dari proses pengolahan mesin kue adalah hasil (return value).
Fungsi dapat berdiri sendiri atau disimpan di dalam sebuah variabel.
Cara mendeklarasikannya seperti ini:

// Fungsi yang berdiri sendiri
function namaFungsi(){
// Kode yang akan dijalankan
}
// Fungsi yang disimpan di dalam variabel

let namaVariabelFungsi = function(){
// Kode yang akan dijalankan
}
Fungsi dapat dipanggil cukup dengan menambahkan tanda kurung () setelah nama fungsi tersebut. Dalam
dua contoh di atas, pemanggilan fungsinya adalah sebagai berikut:
namaFungsi();
namaVariabelFungsi();
Contoh:
// Fungsi yang berdiri sendiri
function sapa() {
return "Selamat Pagi!";
}
console.log(sapa()); // Output: Selamat Pagi!
// Fungsi disimpan di dalam variabel

let berkenalan = function() {
return "Hallo, nama saya Sarah.";
};
console.log(berkenalan()); // Output: Hallo, nama saya Sarah.
Pada contoh kedua di atas, return value-nya adalah "Hallo, nama saya Sarah.". Bedakan return dengan
console.log() ya.
console.log() hanya menampilkan informasi ke dalam tab console JavaScript, sedangkan return akan
mengembalikan sebuah nilai ke tempat di mana fungsi itu dipanggil.
Kalau bingung coba lihat contoh kode berikut:

console.log(berkenalan() + " nama kamu siapa?")
Kalau kita lihat fungsi berkenalan() tadi, return valuenya adalah "Hallo, nama saya Sarah.". Nilai dari
return ini akan dikembalikan ke tempat pemanggilan fungsi tersebut, sehingga kode di atas saat
dijalankan sebenarnya akan menjadi:
console.log("Hallo, nama saya Sarah." + " nama kamu siapa?")
Lalu bagaimana jika kita tidak menulis perintah return?
Misalnya seperti contoh di bawah ini:

let umur = 21;
function ulangTahun() {
umur += 1;
}
console.log(ulangTahun()); // Output: undefined
Fungsi tersebut tidak memiliki perintah return. Di JavaScript, apabila tidak ada perintah return, secara
default (standar) fungsi tersebut akan mengembalikan nilai undefined
PARAMETER DAN ARGUMEN

Hati-hati, istilah parameter dan argument suka dianggap sama, jadi pemakaian kedua kata ini suka
terbalik-balik.
Parameter adalah syarat input yang harus dimasukkan ke dalam suatu fungsi dan dideklarasikan bersama
dengan deklarasi fungsi. Sementara argument adalah nilai yang dimasukan ke dalam suatu fungsi, sesuai
dengan persyaratan parameter, di mana argument dituliskan bersamaan dengan pemanggilan fungsi.
Bisa digambarkan seperti ini:

function operasiPerkalian(angka1, angka2){
return angka1 * angka2;
}
console.log(operasiPerkalian(2, 6)) // Output: 12
Penjelasan kode di atas:

-angka1 & angka2 adalah parameter. Pada contoh di atas, parameter harus bertipe number, agar bisa
diolah oleh fungsi, yaitu perkalian kedua parameter.
-2 & 6 adalah argument. Sesuai kan dengan syarat parameter? Yap, mereka bertipe number.
FUNCTION HOISTING
Ada hal keren yang dimiliki oleh fungsi JavaScript, yaitu kita bisa memanggilnya terlebih dahulu,
padahal deklarasi fungsi ada di baris setelahnya.
"Apa kerennya? Perasaan biasa saja" mungkin kalian akan berpikir seperti itu.
Contoh:
console.log(operasiPerkalian(5, 5)); // Output: 25
function operasiPerkalian(angka1, angka2) {
}
Secara logika, harusnya kita mendeklarasikan fungsi terlebih dahulu, setelah itu barulah kita
menggunakan fungsi tersebut (pada contoh di atas, fungsi operasiPerkalian dipanggil di dalam
console.log padahal deklarasinya ditulis setelah console.log). Nah, keistimewaan inilah yang disebut
dengan Function Hoisting.
Tapi, ini tidak berlaku jika fungsi tersebut dideklarasi di dalam sebuah variabel.
Contoh:
console.log(operasiPerkalian(5, 5)); // Output: Uncaught ReferenceError: Cannot access 'operasiPerkalian'
before initialization
const operasiPerkalian = function(angka1, angka2) {
};
Lingkup Global vs Lingkup Lokal

Lingkup Global
Lingkup global adalah ketika sebuah variabel bisa diakses dari mana saja, baik di dalam maupun di luar
dari suatu fungsi atau blok (grup) kode.
Contoh:
const olahraga = 'basketball';
function namaAtlet() {
let atlet = 'Lionel Messi';
const noMessi = 10;
console.log(olahraga); // Output: basketball
if (olahraga === 'basketball') {
atlet = 'Kobe Bryant';
const noKobe = 24;
}
return atlet;
}
console.log(namaAtlet()); // Output: Kobe Bryant
Pada contoh di atas, fungsi variabel olahraga bisa diakses di dalam fungsi namaAtlet dan bahkan di dalam
blok if walaupun variabel olahraga tidak dideklarasikan di dalam fungsi/blok tersebut. Ini dikarenakan
variabel olahraga yang dideklarasikan di luar fungsi namaAtlet memiliki lingkup global, jadi bisa diakses
dari mana saja selama ada di dalam lingkup variabel tersebut.
Lingkup Lokal
Sebaliknya, lingkup lokal adalah ketika sebuah variabel hanya bisa diakses di dalam sebuah fungsi atau
blok kode. Semua variabel yang dideklarasikan di dalam sebuah fungsi/blok hanya bisa di dalam
fungsi/blok tersebut saja.
Jadi, lingkup lokal bisa dibagi lagi menjadi dua tipe:

lingkup fungsi (function scope)
lingkup blok (block scope)
Mari kita gunakan contoh sebelumnya dan ubah perintah console.log menjadi:
const olahraga = 'basketball';
function namaAtlet() {
let atlet = 'Lionel Messi'; // lingkup fungsi
const noMessi = 10; // lingkup fungsi
if (olahraga === 'basketball') {
atlet = 'Kobe Bryant';
const noKobe = 24; // lingkup blok
console.log(noMessi); // Output: 10
}
console.log(noKobe); // Output: Uncaught ReferenceError: noKobe is not defined
return atlet;
}
namaAtlet();
Pada contoh di atas, perintah console.log(noKobe) akan mengembalikan nilai error karena kita mencoba
mengakses variabel noKobe di luar lingkup di mana dia dideklarasikan (yaitu di dalam blok if saja).
Sedangkan perintah console.log(noMessi) akan menghasilkan output 10 karena variabel noMessi
dideklarasikan di luar blok if jadi semua kode di dalam blok if tersebut mempunyai akses ke variabel itu.
Object (Objek)
Di JavaScript, objek bisa digambarkan sebagai sesuatu yang memiliki properti dan nilai.
Sebagai contoh, manusia. Manusia memiliki nama, pekerjaan, umur, dan lain sebagainya. Nah, kemudian
kita tahu bahwa nama orang ini adalah Sarah, pekerjaannya adalah programmer, umurnya 24 tahun, dan
lain-lain.
Dalam hal ini, manusia adalah objek. Kemudian nama, pekerjaan, umur adalah properti objek. Terakhir,
Sarah adalah nilai dari properti nama, programmer adalah nilai dari properti pekerjaan, dan 24 tahun
adalah nilai dari properti umur.
Yap, sesimpel itu konsep dari sebuah objek JavaScript. Oh, jangan lupa! Objek JavaScript dapat
menampung properti dan nilai sebanyak apapun dengan tipe data yang beragam.
Menggunakan Object Literal

Cara mendeklarasikan objek dengan object literal adalah sebagai berikut:
let namaObjek = {
namaProperti1: nilai1,
namaProperti2: nilai2
};
Contoh:
let buah = { nama: 'mangga', warnaKulit: 'hijau', hargaPerBuah: 5000 };
let orang = {
nama: 'sarah',
umur: 24,
pekerjaan: 'programmer'
};
Perhatikan contoh kode di atas! Objek berciri khas datanya dibungkus dengan kurung kurawal {}, dan
antar data diberi koma ,.
Menggunakan Kata Kunci new
Cara mendeklarasikan objek JavaScript dengan kata kunci new adalah sebagai berikut:
let namaObjek = new Object();

namaObjek.namaProperti1 = nilai1;
namaObjek.namaProperti2 = nilai2;
Contoh:
let orang = new Object();
orang.nama = 'sarah';
orang.umur = 24;
orang.pekerjaan = 'programmer';
Cara menambah properti baru ke dalam suatu objek mirip dengan cara mendeklarasikannya.
Dot Notation
let objek = { namaProperti1: nilaiProperti1 };
objek.namaProperti2 = nilaiProperti2;
console.log(objek); // output: { namaProperti1: nilaiProperti1, namaProperti2: nilaiProperti2 }
Contoh:
let orang = {
nama: 'sarah',
umur: 24,
};
orang.kebangsaan = 'warga negara indonesia';
console.log(orang);
/*
Output:
{
nama: 'sarah',
umur: 24,
pekerjaan: 'programmer',
kebangsaan: 'warga negara indonesia'
}
*/
Bracket Notation
let objek = { namaProperti1: nilaiProperti1 };
objek['namaProperti2'] = nilaiProperti2;
console.log(objek); // output: { namaProperti1: nilaiProperti1, namaProperti2: nilaiProperti2 }
Contoh:
let orang = {
nama: 'sarah',
umur: 24,
};
orang['kebangsaan'] = 'warga negara indonesia';
console.log(orang);
/*
Output:
{
nama: 'sarah',
umur: 24,
pekerjaan: 'programmer',
kebangsaan: 'warga negara indonesia'
}
*/
Apakah kalian masih ingat di beberapa topik sebelumnya, kita sempat membahas tentang penggunaan let
dan const di mana variabel yang dideklarasikan dengan menggunakan const tidak bisa diubah datanya
terkecuali variabel itu adalah tipe objek atau array.
Jadi untuk objek JavaScript, pengubahan nilai properti seperti berikut tidak akan memunculkan error
walaupun variabel objek-nya dideklarasikan dengan const:
const objek = { namaProperti1: nilaiProperti1 };
// mengubah data properti

objek.namaProperti1 = nilaiProperti2; // OK
// menambah properti baru ke objek

objek.namaProperti3 = nilaiProperti3; // OK
📝 Catatan:
Variabel tipe objek dan array yang dideklarasi dengan menggunakan const bisa diubah atau ditambah
nilai properti/element-nya. Tetapi variabel-nya sendiri tetap tidak bisa diubah nilainya.
Gunakan kata kunci delete jika ingin menghapus salah satu properti pada objek.
Contoh:
let orang = {
nama: 'sarah',
umur: 24,
};
delete orang.umur;
delete orang['pekerjaan'];
console.log(orang); // Output: { nama: "sarah" }
Array
Array adalah tipe variabel yang dapat menampung berbagai jenis data dengan tipe yang bermacam-
macam, dengan jumlah yang tidak terbatas. Array di JavaScript memiliki ciri khas yaitu data yang
ditampung dibungkus dengan sepasang kurung siku [ ].
let namaArray = [ nilai1, nilai2, nilai3, ...];

Di bawah ini adalah perbandingan jika kita menyimpan data di variabel satu-per-satu dengan menyimpan
banyak data di satu variabel array:
// Menyimpan data di variabel satu-per-satu
let murid1 = 'Andi';
let murid2 = 'Ratna';
let murid3 = 'Juwita';
// Menyimpan lebih dari satu data dalam satu array

let murid = ['Andi', 'Ratna', 'Juwita'];
Pada contoh di atas, data yang kita miliki hanya berjumlah 3 buah. Bayangkan jika kita memiliki 1000
data! Pasti capek jika harus membuat 1000 variabel dalam satu waktu
Menggunakan Array Literal

Cara mendeklarasikan array dengan array literal adalah sebagai berikut:
let namaArray = [ element1, element2, element3 ];
Contoh:
let buah = [ 'Mangga', 'Apel', 'Jeruk'];
let hargaBuah = ["20000", 30000, 15000]; // Tipe data di array boleh berbeda
Menggunakan Kata Kunci new

Cara mendeklarasikan array JavaScript dengan kata kunci new adalah sebagai berikut:
let namaArray = new Array(element1, element2, element3);
Contoh:
let buah = new Array( 'Mangga', 'Apel', 'Jeruk');
let hargaBuah = new Array("20000", 30000, 15000); // Tipe data di array boleh berbeda
Array
Setiap data di array memiliki nomor index. Nomor index berguna untuk mengakses data suatu array di
posisi tertentu. Nomor index di array selalu dimulai dari angka nol 0
JavaScript Array Index

Kemudian, setiap array pasti memiliki jumlah data yang ditampungnya, atau disebut dengan Array
Length.
Contoh:
let buah = ['Mangga', 'Apel', 'Jeruk'];

let olahraga = ['basket', 'sepakbola', 'badminton', 'berenang'];
let murid = [];
console.log(buah.length); // Output: 3
console.log(olahraga.length); // Output: 4
console.log(murid.length); // Output: 0
Jadi, mohon diingat sekali lagi 🙏🏻:
Nomor index dari suatu array selalu dimulai dari angka nol 0.
Mengakses Element Tunggal

Syntax yang digunakan untuk mengakses data di dalam array seperti ini:
namaArray[nomorIndex]
let namaBuah = ["mangga", "apel", "jeruk", "durian"];
console.log(namaBuah[0]); // Output: mangga

console.log(namaBuah[1]); // Output: apel
console.log(namaBuah[2]); // Output: jeruk
console.log(namaBuah[3]); // Output: durian
Mengakses Element Terakhir di Array
Coba kalian perhatikan contoh sebelumnya. durian adalah element terakhir dari array namaBuah. Untuk
mengakses element itu, kita bisa hitung berdasarkan nomor index-nya dan kebetulan array namaBuah
hanya memiliki 4 element jadi hitungnya masih gampang.
Coba kalian perhatikan contoh berikut:

let countries = ["Afghanistan","Albania","Algeria","Andorra","Angola","Anguilla","Antigua
&Barbuda","Argentina","Armenia","Aruba","Australia","Austria","Azerbaijan","Bahamas","Bahrai
n","Bangladesh","Barbados","Belarus","Belgium","Belize","Benin","Bermuda","Bhutan","Bolivia","Bos
nia & Herzegovina","Botswana","Brazil","British Virgin Islands","Brunei","Bulgaria","Burkina
Faso","Burundi","Cambodia","Cameroon","Cape Verde","Cayman
Islands","Chad","Chile","China","Colombia","Congo","Cook Islands","Costa Rica","Cote D
Ivoire","Croatia","Cruise Ship","Cuba","Cyprus","Czech
Republic","Denmark","Djibouti","Dominica","Dominican Republic","Ecuador","Egypt","El
Salvador","Equatorial Guinea","Estonia","Ethiopia","Falkland Islands","Faroe
Islands","Fiji","Finland","France","French Polynesia","French West
Indies","Gabon","Gambia","Georgia","Germany","Ghana","Gibraltar","Greece","Greenland","Grenada","
Guam","Guatemala","Guernsey","Guinea","Guinea Bissau","Guyana","Haiti","Honduras","Hong
Kong","Hungary","Iceland","India","Indonesia","Iran","Iraq","Ireland","Isle of
Man","Israel","Italy","Jamaica","Japan","Jersey","Jordan","Kazakhstan","Kenya","Kuwait","Kyrgyz
Republic","Laos","Latvia","Lebanon","Lesotho","Liberia","Libya","Liechtenstein","Lithuania","Luxemb
ourg","Macau","Macedonia","Madagascar","Malawi","Malaysia","Maldives","Mali","Malta","Mauritania
","Mauritius","Mexico","Moldova","Monaco","Mongolia","Montenegro","Montserrat","Morocco","Moza
mbique","Namibia","Nepal","Netherlands","Netherlands Antilles","New Caledonia","New
Zealand","Nicaragua","Niger","Nigeria","Norway","Oman","Pakistan","Palestine","Panama","Papua
New Guinea","Paraguay","Peru","Philippines","Poland","Portugal","Puerto
Rico","Qatar","Reunion","Romania","Russia","Rwanda","Saint Pierre & Miquelon","Samoa","San
Marino","Satellite","Saudi Arabia","Senegal","Serbia","Seychelles","Sierra
Leone","Singapore","Slovakia","Slovenia","South Africa","South Korea","Spain","Sri Lanka","St Kitts
& Nevis","St Lucia","St Vincent","St.
Lucia","Sudan","Suriname","Swaziland","Sweden","Switzerland","Syria","Taiwan","Tajikistan","Tanzan
ia","Thailand","Timor L'Este","Togo","Tonga","Trinidad &
Tobago","Tunisia","Turkey","Turkmenistan","Turks & Caicos","Uganda","Ukraine","United Arab
Emirates","United Kingdom","Uruguay","Uzbekistan","Venezuela","Vietnam","Virgin Islands
(US)","Yemen","Zambia","Zimbabwe"];
Tentunya akan lebih sulit untuk mengakses element terakhir dari array countries apabila kita harus
menghitung nomor indexnya satu-per-satu dimulai dari element pertama.
Akan tetapi ada cara singkat untuk melakukan semuanya itu!
Di topik terakhir, kita sudah mempelajari tentang array length di mana syntax array.length itu
mengembalikan jumlah data dari sebuah array. Di topik yang sama, kita juga diingatkan kalau nomor
index dari sebuah array dimulai dari angka nol. Jadi untuk mengakses element terakhir dari sebuah array,
kita bisa menggunakan formula sebagai berikut:
nomor index element terakhir array = jumlah data array - 1
Jadi untuk mengakses element terakhir dari array countries di atas bisa menggunakan cara singkat
berikut:
// menggunakan formula di atas
let indexElementTerakhir = countries.length - 1;
console.log(countries[indexElementTerakhir]); // Output: Zimbabwe
// atau
console.log(countries[countries.length - 1]); // Output: Zimbabwe
Mengakses Seluruh Element Array
Namun, jika kita ingin mengakses seluruh data yang berada di dalam suatu array, maka kita cukup
panggil nama dari array tersebut.
Contoh:
let olahraga = ["Berenang", "Sepak Bola", "Bola Basket"];
console.log(olahraga); // Output: ["Berenang", "Sepak Bola", "Bola Basket"]
Data/element dari suatu array bisa kita ubah dengan syntax seperti ini:
namaArray[nomorIndex] = nilaiBaru;
Contohnya:
let namaBuah = ["Mangga", "Apel", "Jeruk"];
namaBuah[1] = "Semangka";
console.log(namaBuah); // Output: ["Mangga", "Semangka", "Jeruk"]

Apakah kalian masih ingat di beberapa topik sebelumnya, kita sempat membahas tentang penggunaan let
dan const di mana variabel yang dideklarasikan dengan menggunakan const tidak bisa diubah datanya
terkecuali variabel itu adalah tipe objek atau array.
Jadi untuk array JavaScript, pengubahan nilai element seperti berikut tidak akan memunculkan error
walaupun variabel array-nya dideklarasikan dengan const:
const namaArray = [nilaiElement1, nilaiElement2];
// mengubah data di element pertama

namaArray[0] = nilaiElementBaru;
// menambah element baru ke array

namaArray[2] = nilaiElement3;
Di JavaScript, hampir semua tipe data yang bukan primitive (primitive contohnya string, number,
boolean, bigint, null, undefined, symbol) adalah objek. Jadi karena array bukan tipe data primitive, array
termasuk objek dan bisa mempunyai properti dengan nilai fungsi yang kita kenal dengan method.
Di topik ini, kita akan bahas beberapa array method yang umum digunakan.
Mengubah Element Array Menjadi String dengan toString()

Method toString() akan menggabungkan semua element array dan mengubahnya ke tipe data string
dengan penghubung tanda koma , di antara element array.
Contoh:
let array = [1, 2, 3, "halo", false, true];
console.log(array.toString()); // Output: 1,2,3,halo,false,true

Bisa dilihat dari contoh di atas, di dalam array terdapat data dengan tipe number, string, bahkan boolean,
namun hasil dari method toString() mengubah mereka semua menjadi string.
Menggabungkan Element Array dengan join()

Method join() menggabungkan semua element array, kemudian mengubahnya menjadi string. Konsepnya
hampir sama dengan method toString(), namun perbedaannya kita bisa menambahkan karakter tertentu
sebagai penghubung antara element array.
array.join(penghubung);
Penjelasan syntax di atas:
Parameter penghubung adalah optional parameter, yaitu parameter yang boleh diisi, boleh juga
dikosongkan. penghubung menentukan karakter apa yang mau ditambahkan sebagai penghubung antara
element array. Secara default, apabila dikosongkan, array.join() akan menggunakan tanda koma , sebagai
penghubung element array.
Contoh:
console.log(array.join()); // Output: 1,2,3,halo,false,true

console.log(array.join(" ")); // Output: 1 2 3 halo false true
console.log(array.join("#")); // Output: 1#2#3#halo#false#true
console.log(array.join("...")); // Output: 1...2...3...halo...false...true
Menambah dan Mengeluarkan (Menghapus) Element Array dengan pop(), push(), shift(), dan unshift()
pop(), mengeluarkan element terakhir dari sebuah array.
Contoh:
array.pop();
console.log(array); // Output: [1, 2, 3, "halo", false]

push(), menambah element di bagian akhir dari sebuah array.
Contoh:

array.push("Selamat Pagi");
console.log(array); // Output: [1, 2, 3, "halo", false, true, "Selamat Pagi"]

shift(), mengeluarkan element pertama dari sebuah array.
Contoh:
array.shift();
console.log(array); // Output: [2, 3, "halo", false, true]

unshift(), menambah element di bagian awal array.
Contoh:
array.unshift("Selamat Pagi");
console.log(array); // Output: ["Selamat Pagi", 1, 2, 3, "halo", false, true]

Menambah, Menghapus, dan Mengganti Element Array dengan splice()
Digunakan untuk menambah, menghapus, dan mengganti element di sebuah array.
array.splice(index, jumlah, item1, ..., itemX);

Parameter index adalah required parameter, yaitu parameter yang wajib diisi ketika memanggil array
method splice. index menjelaskan posisi di mana element harus ditambah atau dihapus.
Parameter jumlah adalah optional parameter, yaitu parameter yang boleh diisi, boleh juga dikosongkan.
jumlah menentukan jumlah element yang mau dihapus di array.
Parameter item1, ..., itemX adalah optional parameter. item1, ..., itemX merupakan element baru yang
mau ditambah ke dalam array.
Contoh:
let buah = ["Pisang", "Jeruk", "Apel", "Mangga"];
buah.splice(2, 0, "Lemon", "Kiwi");
console.log(buah); // Output: ["Pisang", "Jeruk", "Lemon", "Kiwi", "Apel", "Mangga"]

Penjelasan contoh di atas:
Parameter pertama bernilai 2, mendefinisikan posisi di mana element baru harus ditambahkan, yaitu di
index ke 2 atau element ke 3 (ingat, index di array dimulai dari angka 0).
Parameter kedua bernilai 0, mendefinisikan jumlah element yang harus dihapus, yaitu berjumlah 0 (tidak
ada yang dihapus).
Parameter ketiga, keempat, dan seterusnya di method splice() mendefinisikan element baru yang ingin
ditambahkan ke dalam array. Jika parameter ketiga dan seterusnya tidak dituliskan, maka tidak ada
element yang ditambahkan. Pada contoh di atas, element ketiga dan keempat adalah "Lemon" dan "Kiwi",
maka kedua element tersebut ditambahkan pada array buah.
Menggabungkan Lebih Dari Satu Array dengan concat()
Method concat() digunakan untuk menggabungkan 2 array atau lebih.
array1.concat(array2, array3, ..., arrayX)

Contoh:
let buah = ["pisang", "apel", "jeruk"];

let sayur = ["tomat", "bayam", "wortel"];
let biji = ["kedelai", "kacang tanah", "kacang polong"];
let makanan = buah.concat(sayur, biji);
console.log(makanan); // Output: ["pisang", "apel", "jeruk", "tomat", "bayam", "wortel", "kedelai",

"kacang tanah", "kacang polong"]
Mengambil Element Array dengan slice()
Method slice() digunakan untuk mengambil beberapa element pada array, dan menaruhnya pada array
baru.
array.slice(mulai, akhir)
Parameter mulai adalah optional parameter. mulai menentukan permulaan index dari element yang akan
diambil.
Parameter akhir adalah optional parameter. akhir menentukan batas akhir index element yang akan
diambil (tanpa diikutsertakan). Apabila dikosongkan, maka semua element dimulai dari index mulai
sampai ke element terakhir dari array akan diambil.
Contoh:
let cemilan = ["kripik singkong", "kripik kentang", "krupuk ikan", "permen", "coklat", "kue"];
let cemilanGurih = cemilan.slice(0, 3);
let cemilanManis = cemilan.slice(3);
console.log(cemilanGurih); // Output: ["kripik singkong", "kripik kentang", "krupuk ikan"]

console.log(cemilanManis); // Output: ["permen", "coklat", "kue"]
Mengurutkan Array dengan sort()
Method sort() akan mengurutkan element di suatu array, bisa dari nilai yang terkecil hingga yang terbesar,
bisa juga sebaliknya. Secara default, sort() mengurutkan element array dari nilai string yang terkecil
hingga yang terbesar.
array.sort(fungsiPembanding)
Contoh:
// Contoh array dengan tipe data string

let buah = ["Jeruk", "Apel", "Mangga", "Jambu"];
buah.sort();
console.log(buah); // Output: ["Apel", "Jambu", "Jeruk", "Mangga"]
// Contoh array dengan tipe data number

let bilangan = [30, 1, 2, 3.5, 10, 100];
bilangan.sort();
console.log(bilangan); // Output: [1, 10, 100, 2, 3.5, 30]
Perhatikan contoh kode di atas! Pada tipe data string, method sort() masih aman digunakan. Ia
mengurutkan element pada array buah secara benar.
Namun jika digunakan pada tipe data number, aneh sekali urutannya bukan? Kenapa angka 100 diurutkan
lebih depan dari angka 2?
Ini dikarenakan method sort() secara default mengurutkan element array berdasarkan nilai string-nya.
Element array dengan angka 100 dianggap lebih kecil dari element array dengan angka 2 dikarenakan
string "1" di 100 lebih kecil dari string "2" di angka 2.
Nah, untuk mengatasi hal tersebut, kita bisa menggunakan ** compare function** atau fungsi
pembanding sebagai parameter di method sort seperti contoh di bawah ini:
let bilangan = [30, 1, 2, 3.5, 10, 100];
let urutDariTerkecil = function(a, b) {

return a - b;
};
let urutDariTerbesar = function(a, b) {

return b - a;
};
console.log(bilangan.sort(urutDariTerkecil)); // Output: [1, 2, 3.5, 10, 30, 100]

console.log(bilangan.sort(urutDariTerbesar)); // Output: [100, 30, 10, 3.5, 2, 1]
Fungsi pembanding akan menghitung apakah a dikurang b akan menghasilkan nilai negatif, positif, atau
0.
Jika bernilai negatif, maka a akan diurutkan sebelum b.

Jika bernilai positif, maka b akan diurutkan sebelum a.
Jika bernilai 0, posisi dari a dan b tidak akan diubah.
Memutar urutan Array dengan reverse()
Method reverse() akan mengurutkan element pada array dari index yang terbesar hingga index yang
terkecil, bukan nilai yang terbesar hingga yang terkecil.
array.reverse()
Contoh:
buah.reverse();
console.log(buah); // Output: ["Jambu", "Mangga", "Apel", "Jeruk"]

Lalu, bagaimana caranya untuk mengurutkan nilai element pada array dari yang terbesar hingga yang
terkecil? Caranya adalah menggunakan kombinasi dari method sort() dan reverse().
buah.sort().reverse();
console.log(buah); // Output: ["Mangga", "Jeruk", "Jambu", "Apel"]

Array buah akan diurutkan terlebih dahulu element-elementnya dari nilai yang terkecil, hingga yang
terbesar dengan menggunakan sort().
buah.sort(); // output: ["Apel", "Jambu", "Jeruk", "Mangga"]
Kemudian, elementnya akan dibalik urutannya berdasarkan index dari yang terbesar hingga yang terkecil
dengan menggunakan reverse().
// posisi setelah sort() ["Apel", "Jambu", "Jeruk", "Mangga"]

buah.reverse(); // Output: ["Mangga", "Jeruk", "Jambu", "Apel"]
📝 Catatan:
Kita akan membahas array method lainnya di kelas JavaScript berikutnya.
Ada 8 properti objek Math, yaitu:
Math.E // Bilangan Euler

Math.LN2 // Log 2
Math.LN10 // Log 10
Math.LOG2E // Log E di Basis 2
Math.LOG10E // Log E di Basis 10
Math.PI // Pi
Math.SQRT1_2 // Akar Kuadrat dari 0.5
Math.SQRT2 // Akar Kuadrat dari 2
Biasanya, properti-properti ini digunakan untuk operasi matematika yang lebih kompleks.
Namun, saat ini saya cuma ingin memperkenalkan satu properti objek Math saja, yaitu Math.PI. Kalian
tahu π? Jika kalian ingat pelajaran SD dalam menghitung luas lingkaran, maka rumusnya akan seperti ini:
Luas Lingkaran = π r2
Luas Lingkaran = 3.14 x (jari-jari lingkaran2)
Jadi, π hanyalah nilai konstan yang bernilai 3.14 (sebenarnya sih 3.14 sekian sekian sekian.....banyak
banget deh angkanya).
Nah, di JavaScript, apabila kita lupa nilai konstan dari π itu sebenarnya berapa, kita bisa menggunakan
properti Math.PI ini sebagai penggantinya.
Contoh:
let r = 10;
let luasLingkaran = Math.PI * (r ** 2);
console.log(luasLingkaran); // Output: 314.1592653589793
Math
Nah, ini nih bagian serunya. Selain properti, objek Math juga mempunyai method yang pada umumnya
melakukan operasi Matematika. Method di objek Math ada banyak sekali dan di topik ini akan kita bahas
beberapa yang sering digunakan.
Math.abs(x)
Digunakan untuk mengubah angka x yang bernilai negatif menjadi positif.
let bilangan = -70.5;
console.log(Math.abs(bilangan)); // Output: 70.5

Math.pow(x, y)
Digunakan untuk menghitung hasil dari x pangkat y.
let bilangan = 6;
let pangkat = 2;
console.log(Math.pow(bilangan, pangkat)); // Output: 36

Math.sqrt(x)
Digunakan untuk menghitung akar kuadrat dari x.
let bilangan = 64;
console.log(Math.sqrt(bilangan)); // Output: 8
Math.cbrt(x)
Digunakan untuk menghitung akar pangkat 3 dari x.
let bilangan = 8;
console.log(Math.cbrt(bilangan)); // Output: 2
Math.round(x)
Digunakan untuk membulatkan angka desimal x menjadi bilangan bulat. Pembulatan ke atas bila angka di
belakang koma lebih besar atau sama dengan 5, dan pembulatan ke bawah jika angka di belakang koma
kurang dari 5.
let bilangan1 = 5.7;

console.log(Math.round(bilangan1)); // Output: 6
Math.floor(x)
Digunakan untuk membulatkan angka desimal x ke bawah.

console.log(Math.floor(bilangan1)); // Output: 5
Math.ceil(x)
Digunakan untuk membulatkan angka desimal x ke atas.

console.log(Math.ceil(bilangan1)); // Output: 6
console.log(Math.ceil(bilangan2)); // Output: 6
Math.random()
Digunakan untuk menampilkan angka secara acak antara 0 hingga 1 (0 termasuk. 1 tidak).
console.log(Math.random()); // Output: 0.14087695004117018

console.log(Math.random()); // Output: 0.17923176966306498
Math.max(x, y, z, ..., n)
Digunakan untuk mencari angka terbesar di antara parameter x, y, z, ..., n.
console.log(Math.max(1, 4, 6, 7)); // Output: 7
Math.min(x, y, z, ..., n)
Digunakan untuk mencari angka terkecil di antara parameter x, y, z, ..., n.
console.log(Math.min(1, 4, 6, 7)); // Output: 1
javascript conditional
Ketika kita menulis sebuah aplikasi, seringkali akan ada beberapa operasi yang akan dijalankan dengan
persyaratan tertentu. Persyaratan itu sendiri nanti kita yang tentukan.
Sebagai contoh dalam kehidupan sehari-hari, jika kita lapar, maka kita makan, dan jika kita tidak lapar,
maka kita tidak makan. Dari contoh tersebut, persyaratan/kondisinya adalah jika kita lapar atau jika kita
tidak lapar. Sementara, keputusan yang dilaksanakan adalah makan atau tidak makan.
Dari contoh tersebut, ada kata kunci yang bisa kita ambil, yaitu jika dan maka. Jika menyatakan sebuah
kondisi, dan maka menyatakan keputusan yang akan dilaksanakan.
Sama seperti di JavaScript, kita juga bisa menyatakan sebuah kondisi dan menyatakan keputusan
(program) yang akan dijalankan.
Di JavaScript ada dua cara menulis perintah conditional, yaitu:
Menggunakan if, else if dan else.
Menggunakan switch dan case.
Mari kita bahas satu-persatu.
Menggunakan if, else if dan else

Syntax dalam menggunakan if, else if dan else adalah sebagai berikut.
if
Digunakan apabila hanya ada 1 kondisi dan 1 keputusan yang dijalankan.
if (kondisi1) {
// masukkan kode yang akan dijalankan di sini apabila kondisi1 tercapai
}
if...else
Digunakan apabila ada 1 kondisi dan 2 keputusan yang dijalankan.
if (kondisi1) {
} else {
// masukkan kode yang akan dijalankan di sini apabila kondisi1 TIDAK tercapai
}
if...else if...else
Digunakan apabila ada beberapa kondisi dan beberapa keputusan yang dijalankan.
if (kondisi1) {
} else if (kondisi2) {
// masukkan kode yang akan dijalankan di sini apabila kondisi1 tidak tercapai dan kondisi2 tercapai
} else if (kondisi3) {
// masukkan kode yang akan dijalankan di sini apabila kondisi1 dan kondisi2 tidak tercapai, dan
kondisi3 tercapai
} ... {
} else {
// masukkan kode yang akan dijalankan di sini apabila semua kondisi di atas TIDAK tercapai
}
Contoh Penggunaan
Coba bayangkan sebuah aplikasi yang bisa menampilkan kalimat:
"SANGAT MEMUASKAN" jika nilai di atas 80

"MEMUASKAN" jika nilai berada di antara 60 hingga 80, dan
"JANGAN MENYERAH, COBA LAGI!" jika nilai di bawah 60
Ternyata, Andi mendapatkan nilai 95. Maka, Andi seharusnya mendapatkan kalimat "SANGAT
MEMUASKAN" bukan?
Bagaimana cara membuat aplikasinya? Yaitu seperti berikut ini:
let nilaiAndi = 95;
if (nilaiAndi > 80) {

console.log("SANGAT MEMUASKAN");
} else if (nilaiAndi >= 60 && nilaiAndi <= 80) {
console.log("MEMUASKAN");
} else {
console.log("JANGAN MENYERAH, COBA LAGI!");
}
// Output: SANGAT MEMUASKAN

if (nilaiAndi > 80) { console.log('SANGAT MEMUASKAN'); }artinya jika variabel nilaiAndi bernilai di
atas 80, maka aplikasi akan menampilkan kalimat "SANGAT MEMUASKAN".
else if (nilaiAndi >= 60 && nilaiAndi <= 80) { console.log('MEMUASKAN'); }, artinya jika variabel
nilaiAndi berada di atas atau sama dengan 60 dan nilaiAndi berada di bawah atau sama dengan 80 (yang
bisa diartikan sebagai jika nilaiAndi berada di antara 60 hingga 80), maka aplikasi akan menampilkan
kalimat "MEMUASKAN".
else { console.log('JANGAN MENYERAH, COBA LAGI!');}, artinya selain kedua kondisi yang telah
disebutkan di if dan else if, maka aplikasi akan menampilkan kalimat "JANGAN MENYERAH, COBA
LAGI!".
Menggunakan switch dan case

Jika kita memiliki banyak pilihan kondisi, menggunakan perintah if, else if dan else akan kurang efisien
karena kode yang ditulis akan menjadi sangat panjang sekali.
"Alternatifnya apa dong?"
Ada cara yang lebih efisien yaitu dengan menggunakan perintah switch dan case.
Syntaxnya seperti ini:
switch (pernyataan) {
case kondisi1:
// keputusan yang dijalankan ketika kondisi1 tercapai
break;
case kondisi2:
break;
case kondisi3:
break;
...
default:
// keputusan yang dijalankan ketika semua kondisi tidak tercapai
}
Contoh Penggunaan
Seandainya kita disuruh menulis sebuah aplikasi yang akan menampilkan jenis seragam apa yang harus
dikenakan murid sesuai dengan harinya. Contohnya seperti di bawah ini:
let seragamSekolah;
let hari = "senin";
switch (hari) {
case "senin":
seragamSekolah = "kemeja putih bawahan merah";
break;
case "selasa":
seragamSekolah = "kemeja hijau bawahan hitam";
break;
case "rabu":
seragamSekolah = "kemeja putih bawahan putih";
break;
case "kamis":
seragamSekolah = "kemeja batik merah bawahan hitam";
break;
case "jumat":
seragamSekolah = "baju pramuka";
break;
default:
seragamSekolah = "baju bebas";
}
console.log(seragamSekolah); // Output: kemeja putih bawahan merah

switch digunakan untuk mendeklarasikan pernyataan yang menjadi patokan kondisi. Pada contoh di atas,
kita akan melihat variabel hari digunakan sebagai patokan kondisi untuk merubah nilai dari variabel
seragamSekolah sesuai dengan nilai hari-nya (kondisi).
case digunakan untuk menulis masing-masing kondisi dari hasil pernyataan yang akan diperiksa. Pada
contoh di atas, jika variabel hari bernilai "senin", maka variabel seragamSekolah bernilai "kemeja putih
bawahan merah", dan seterusnya.
break digunakan untuk menghentikan program berjalan ketika sudah menemukan kondisi yang tercapai.
Pada contoh di atas, program akan berhenti pada case bernilai "senin".
default adalah keputusan yang akan dijalankan apabila hasil pernyataan di switch tidak ada yang sesuai
dengan masing-masing kondisi di case (tidak ada kondisi yang tercapai). Fungsinya sama seperti else di
topik sebelumnya . Pada contoh di atas, apabila nilai variabelhari yang dimasukkan misalnya "sabtu",
maka seragamSekolah akan bernilai "baju bebas".
Apabila kita mempunyai dua atau lebih kondisi yang berbeda, tetapi keputusan yang akan dijalankan
sama, kita bisa menggabungkan beberapa perintah case tanpa menggunakan break dan hanya
menggunakan break di kondisi terakhir.
Misalnya pada contoh kita di atas, murid diharuskan mengenakan seragam "kemeja putih bawahan
merah" untuk hari "senin" sampai "kamis", maka kita bisa mengubah kode di atas menjadi:
let seragamSekolah;
let hari = "senin";
switch (hari) {
case "senin":
case "selasa":
case "rabu":
case "kamis":
seragamSekolah = "kemeja putih bawahan merah";
break;
case "jumat":
seragamSekolah = "baju pramuka";
break;
default:
seragamSekolah = "baju bebas";
}
console.log(seragamSekolah); // Output: kemeja putih bawahan merah
LOOP
Loop dalam Bahasa Indonesia artinya putaran. Dalam JavaScript, maksudnya adalah perulangan. Jadi,
loop adalah sekumpulan kode yang akan dijalankan berulang kali sampai batas yang ditentukan.
Sebagai contoh, coba tampilkan angka 1 sampai dengan 10 di console. Solusi seperti apakah yang kalian
pikirkan? Apakah seperti ini?
console.log(1);
console.log(2);
console.log(3);
console.log(4);
console.log(5);
console.log(6);
console.log(7);
console.log(8);
console.log(9);
console.log(10);
/*
Output:
1
2
3
4
5
6
7
8
9
10
*/
Coba bayangkan jika kalian disuruh untuk menampilkan angka 1 sampai 1000 pada console dengan cara
di atas, mungkin jari kalian sudah pegal-pegal.
Nah untuk menghindari itu, kita bisa menggunakan JavaScript Loop.
Ada 5 jenis loop di JavaScript, yaitu:
for
for...in
for...of
while
do...while
Semua loop di atas pada dasarnya sama saja (terkecuali untuk for..in dan for...of ada sedikit perbedaan),
jadi terserah kalian saja ingin memakai yang mana. Hanya saja, yang sering digunakan pada umumnya
adalah for dan while loop.
Syntax yang digunakan ketika menggunakan for loop adalah sebagai berikut:
for (pernyataan1; pernyataan2; pernyataan3) {

// kode yang akan dijalankan ketika pernyataan2 benar (true)
}
pernyataan1 digunakan untuk menentukan nilai awal berjalannya loop.

pernyataan2 digunakan untuk mendefinisikan kondisi berjalannya sebuah loop. Apabila nilai kondisinya
false, maka loop akan berakhir.
pernyataan3 digunakan untuk menambah atau mengurangi nilai awal pada pernyataan1 setiap kali loop
dijalankan.
Contoh Penggunaan
Kita akan menampilkan angka 1 sampai dengan 10 di console. Caranya adalah:
for (let i = 1; i <= 10; i++) {

console.log(i);
}
/*
Output:
1
2
3
4
5
6
7
8
9
10
*/
let i = 1 adalah pernyataan1. Kode tersebut berarti kita mendeklarasikan sebuah variabel baru bernama i
dengan nilai awal 1. Jadi, pada contoh di atas, loop akan dimulai dari angka 1.
i <= 10 adalah pernyataan2. Kode tersebut menentukan kondisi apakah loop bisa dijalankan. Loop akan
terus berjalan apabila nilai variabel i masih di bawah atau sama dengan 10. Pada contoh di atas,
perulangan yang dimaksud adalah menampilkan nilai variabel i pada console.
i++ adalah pernyataan3. Kode tersebut berarti, setiap melakukan satu perulangan, maka tambahkan nilai i
dengan angka 1.
📝 Catatan:
Masih ingat kan fungsi operator ++? Cek topik Operator Aritmatika.
For/In Loop
Berbeda dengan for loop dari topik sebelumnya, for...in digunakan untuk mengulang setiap properti dari
sebuah objek.
Syntax yang digunakan ketika menggunakan for...in loop adalah sebagai berikut:
for (propertiObjek in namaObjek) {

// kode yang akan dijalankan
}
for (propertiObjek in namaObjek) berarti untuk setiap propertiObjek di namaObjek, maka jalankan kode
di dalam {}. Variabel propertiObjek bisa diganti dengan nama variabel apapun.
Contoh Penggunaan
Seandainya kita memiliki sebuah objek buku, dan kita mau menampilkan masing-masing nama properti
dan nilainya di console. Caranya adalah:
const buku = {
judul: "Harry Potter and The Philosopher's Stone",
pengarang: "J. K. Rowling",
tahun: 1997
};
for (x in buku) {
console.log(x, ':', buku[x]);
}
/*
Output:
judul : Harry Potter and The Philosopher's Stone
pengarang : J. K. Rowling
tahun: 1997
*/
for (x in buku) menyatakan untuk setiap properti x yang ada di variabel buku maka jalankan
console.log(x, ':', buku[x]);.
For/Of Loop
Berbeda dengan for loop dari topik sebelumnya, for...of digunakan untuk mengulang setiap element dari
objek yang bisa diulang (contoh array atau string).
Syntax yang digunakan ketika menggunakan for...of loop adalah sebagai berikut:
for (let element of namaVariabel) {

// kode yang akan dijalankan
}
for (let element of namaVariabel) berarti untuk setiap element di namaVariabel, maka jalankan kode di
dalam {}. Variabel element bisa diganti dengan nama variabel apapun.
Contoh Penggunaan
Seandainya kita memiliki sebuah array yang berisi judul buku, dan kita mau menampilkan setiap element-
nya di console. Caranya adalah:
const buku = ["Game of Thrones: A Song of Ice and Fire",

"Harry Potter and The Philosopher's Stone",
"Lord of The Rings: The Fellowship of The Ring"
];
for (let x of buku) {

console.log(x);
}
/*
Output:
Game of Thrones: A Song of Ice and Fire
Harry Potter and The Philosopher's Stone
Lord of The Rings: The Fellowship of The Ring
*/
for (let x of buku) menyatakan untuk setiap element x yang ada di variabel buku maka jalankan
console.log(x);.
While Loop
Syntax dalam menggunakan while loop adalah sebagai berikut:
while (kondisi) {
// kode yang akan dijalankan ketika kondisi benar (true)
}
while (kondisi) berarti ketika kondisi yang ditentukan benar (true), maka jalankan semua kode yang ada
di dalam {}.
Contoh Penggunaan
Kita akan menampilkan angka 1 sampai dengan 10 di console dengan while loop, caranya adalah:
let i = 1;
while (i <= 10) {

console.log(i);
i++;
}
/*
Output:
1
2
3
4
5
6
7
8
9
10
*/
let i = 1; berarti kita mendeklarasikan variabel i dengan nilai awal 1.

while (i <= 10) berarti ketika variabel i bernilai kurang dari atau sama dengan 10, maka jalankan semua
kode di dalam {}. Pada contoh di atas, program akan menampilkan nilai variabel i pada console dan
kemudian menambahkan nilai variabel i dengan angka 1. Setelah itu, program akan mengevaluasi apakah
kondisi i <= 10 masih true. Bila iya, maka kode akan terus dijalankan sampai kondisi false.
Do While Loop
Syntax dalam penggunaan do...while loop adalah:
do {
// kode yang akan dijalankan ketika kondisi benar (true)
} while (kondisi);
Contoh Penggunaan
Kita akan menampilkan angka 1 sampai dengan 10 di console dengan do...while loop, caranya adalah:
let i = 1;
do {
console.log(i);
i++;
} while (i <= 10);
/*
Output:
1
2
3
4
5
6
7
8
9
10
*/
let i = 1; berarti kita mendeklarasikan variabel i dengan nilai awal 1.

do { console.log(i); i++; } menentukan kode yang akan dijalankan ketika kondisi benar (true). Pada
contoh di atas, program akan menampilkan nilai variabel i pada console dan kemudian menambahkan
nilai variabel i dengan angka 1.
while (i <= 10) menentukan kondisi dari kode blok do {...}, yaitu apabila variabel i bernilai kurang dari
atau sama dengan 10, maka jalankan semua kode di dalam do {...}
Pengenalan JavaScript HTML DOM

Dengan adanya DOM ini, JavaScript diberi akses untuk membuat HTML menjadi dinamis, seperti:
Mengubah element HTML pada halaman website.

Mengubah attribute HTML pada halaman website.
Mengubah CSS style pada halaman website.
Menambah dan/atau menghapus element maupun attribute HTML.
Menambah HTML event (contoh: efek klik pada mouse, hover pada mouse, dan lain-lain) pada halaman
website.
Berinteraksi dengan semua HTML event di website.
Di HTML DOM, semua element HTML dari sebuah website dianggap sebagai objek. Dan sama seperti
objek JavaScript pada umumnya, objek element HTML di HTML DOM juga mempunyai properti dan
method atau yang lebih dikenal dengan istilah DOM Property dan DOM Method.
Jadi untuk mengubah nilai properti dari element HTML, kita bisa menggunakan DOM Property dan
untuk memanggil fungsi dari suatu element HTML, kita bisa menggunakan DOM Method.
Contoh Penggunaan
Misalnya kita mempunyai element HTML sebagai berikut:
<input id="umur" type="text" value="20" />

Untuk mengakses value dari <input> di atas, maka bisa dilakukan dengan cara sebagai berikut:
let umur = document.getElementById("umur").value;
document adalah akar dari semua objek di sebuah website. Jadi untuk mengakses element HTML apapun
di satu website, selalu dimulai dengan objek document ini.
getElementById merupakan method dari objek document.
value merupakan properti dari objek element HTML yang dikembalikan dari method getElementById
yaitu <input>.
Karena ada banyak sekali jenis properti dan method di JavaScript HTML DOM, di topik selanjutnya kita
akan membahas beberapa contoh penggunaan properti dan method yang seringkali digunakan.
Mengakses Element HTML

Di topik sebelumnya, kita sudah melihat contoh cara menggunakan JavaScript HTML DOM untuk
mengambil nilai dari sebuah element HTML <input>.
Mari kita perhatikan sekali lagi contoh tersebut:


<input id="umur" type="text" value="20" />
// js
let umur = document.getElementById("umur").value;
Sebelum kita bisa mengambil nilai attribute value dari element HTML <input> di JavaScript, kita terlebih
dahulu harus mengakses ke element <input>. Di contoh di atas, kita menggunakan salah satu DOM
Method untuk mengakses element HTML yaitu getElementById.
Di topik ini, kita akan bahas lebih lanjut DOM method lainnya untuk mengakses element HTML.
getElementById(id)
Method yang ini sudah kita lihat beberapa kali dari contoh-contoh sebelumnya. Kita bisa menggunakan
getElementById untuk mengakses element HTML berdasarkan nilai id-nya.
getElementsByTagName(tag)
Untuk mengakses element-element HTML berdasarkan jenis tag-nya, kita bisa menggunakan
getElementsByTagName.
Contoh:


<h1 id="title">Hello, World!</h1>
<p>Selamat Datang di Skilvul</p>
<h1 class="subtitle">Mari Belajar JavaScript</h1>
let semuaTagH1 = document.getElementsByTagName("h1");
console.log(semuaTagH1); // Output: HTMLCollection(2) [h1#title, h1.subtitle]

console.log(semuaTagH1[0]); // Output: <h1 id="title">Hello, World!</h1>
console.log(semuaTagH1[1]); // Output: <h1 class="subtitle">Mari Belajar JavaScript</h1>
Ketika kita memanggil document.getElementsByTagName("h1"), document sebagai akar objek dari

halaman html kita akan mencari semua element <h1> di bawahnya.
Karena di contoh di atas terdapat 2 <h1>, maka document.getElementsByTagName("h1") akan
mengembalikan 2 element <h1>. Untuk mengakses masing-masing element, bisa menggunakan
[noIndex], sama seperti cara Array mengakses elementnya.
getElementsByClassName(className)
Untuk mengakses element-element HTML berdasarkan nilai attribute class-nya, kita bisa menggunakan
getElementsByClassName.
Contoh:


<h1 class="header">Hello, World!</h1>
<p>Selamat Datang di Skilvul</p>
<span class="header">Mari Belajar JavaScript</span>
let semuaClassHeader = document.getElementsByClassName("header");
console.log(semuaClassHeader); // Output: HTMLCollection(2) [h1.header, span.header]

console.log(semuaClassHeader[0]); // Output: <h1 class="header">Hello, World!</h1>
console.log(semuaClassHeader[1]); // Output: <span class="header">Mari Belajar JavaScript</span>
Ketika kita memanggil document.getElementsByClassName("header"), document sebagai akar objek dari

halaman html kita akan mencari semua element dengan attribute class bernilai header di bawahnya.
Karena di contoh di atas terdapat 2 element yang mempunyai class dengan nilai header, maka
document.getElementsByClassName("header") akan mengembalikan 2 element, yaitu element <h1
class="header> dan <span class="header">. Untuk mengakses masing-masing element, bisa
menggunakan [noIndex], sama seperti cara Array mengakses elementnya.
querySelectorAll(cssSelector)
Untuk mengakses element-element HTML berdasarkan CSS Selector-nya HTML, kita bisa menggunakan
querySelectorAll.
Contoh:


<h1 class="header">Hello, World!</h1>
<p id="header2">Selamat Datang di Skilvul</p>
<span class="header">Mari Belajar JavaScript</span>
let h1ClassHeader = document.querySelectorAll('h1.header');
console.log(h1ClassHeader); // Output: NodeList [h1.header]

console.log(h1ClassHeader[0]); // Output: <h1 class="header">Hello, World!</h1>
let idHeader2 = document.querySelectorAll('#header2');
console.log(idHeader2); // Output: NodeList [p#header2]

console.log(idHeader2[0]); // Output: <p id="header2">Selamat Datang di Skilvul</p>
Ketika kita memanggil document.querySelectorAll("h1.header"), document sebagai akar objek dari
halaman html kita akan mencari semua element <h1> dengan attribute class bernilai header di bawahnya.
Begitu juga ketika memanggil document.querySelectorAll('#header2'), document akan mencari semua
element dengan id bernilai header2 di bawahnya.
DOM Event
Di topik Pengenalan JavaScript HTML DOM, kita tahu bahwa salah satu kegunaan dari DOM adalah
untuk berinteraksi dengan HTML Event di suatu website.
Pernahkan ketika kita klik 1 tombol di satu website, terkadang akan muncul popup window yang
menyampaikan suatu pesan. Salah satu cara untuk melakukan itu adalah dengan menggunakan DOM
Event.
Ada banyak sekali tipe HTML Event di JavaScript. Kali ini kita hanya akan membahas onclick yaitu
HTML Event yang akan terjadi ketika user klik suatu element HTML.
Syntax-nya adalah sebagai berikut:
onclick = kodeJavaScript
Contoh Penggunaan
Seandainya kita mempunyai satu <button> yang akan menampilkan popup window dengan pesan "Hello,
World!", maka caranya kira-kira seperti ini:


<button id="demo">Click Me!<button>
// js
let demo = document.getElementById("demo");
demo.onclick = showMessage;
function showMessage() {
alert("Hello, World!");
}
Element Attribute Cat
Di baris demo.onclick = showMessage;, kita menambahkan event onclick ke element <button
id="demo"> dan memberi nilai showMessage yang merupakan fungsi untuk menampilkan alert dengan
tulisan "Hello, World!".
Jadi ketika <button id="demo"> di-klik, maka alert window dengan tulisan "Hello, World!" akan muncul,
sesuai dengan gambar di atas.
📝 Catatan:
Contoh di atas adalah salah satu dari banyak syntax untuk menambahkan onclick event di JavaScript.
Masih ada banyak sekali DOM Property, Method, dan Event lainnya di JavaScript. Kita akan bahas
fungsi DOM lainnya di kelas JavaScript berikutnya.
Mengubah Element HTML

element.innerHTML
Kita bisa menggunakan DOM Property innerHTML untuk mengambil/mengubah isi HTML dari sebuah
element.
Contoh:


<p id="demo">Hello, World!</p>
// js
console.log(demo.innerHTML); // Output: Hello, World!
// Ubah konten <p id="demo"> menjadi Hello, Dunia!

demo.innerHTML = "Hello, Dunia!";
console.log(demo.innerHTML); // Output: Hello, Dunia!

Di baris console.log(demo.innerHTML);, kita hanya menampilkan nilai properti innerHTML dari element
<p id="demo">. Waktu kode itu dijalankan, isi konten HTML dari element <p id="demo"> masih bernilai
Hello, World!.
Kode berikutnya yaitu demo.innerHTML = "Hello, Dunia!"; kita akan memberikan nilai baru ke properti
innerHTML-nya <p id="demo">.
Apabila kita cek halaman website kita di browser, <p id="demo"> yang tadinya menampilkan Hello,
World! akan berubah menjadi Hello, Dunia! setelah kode JavaScript di atas dijalankan.
element.attribute
Nah, mungkin kalian sudah bisa menebak kira-kira apa itu element.attribute. element.attribute merupakan
DOM Property yang bisa digunakan untuk mengambil/mengubah/menambah nilai attribute dari sebuah
element.
Contoh:


<img src="https://bit.ly/2FKluzq" alt="Cat" id="cat-image" />
// js
let catImage = document.getElementById("cat-image");
console.log(catImage.src); // Output: https://bit.ly/2FKluzq

console.log(catImage.alt); // Output: Cat
catImage.src = "https://bit.ly/3j6YdWJ";
catImage.alt = "Fish";
catImage.width = "400";
console.log(catImage.src); // Output: https://bit.ly/3j6YdWJ

console.log(catImage.alt); // Output: Fish
console.log(catImage.width); // Output: 400
Di baris console.log(catImage.src);, kita hanya menampilkan nilai attribute src dari element <img id="cat-
image">. Waktu kode itu dijalankan, nilai attribute src dari element <img id="cat-image"> masih bernilai
https://bit.ly/2FKluzq.
Di baris console.log(catImage.alt);, kita hanya menampilkan nilai attribute alt dari element <img id="cat-
image">. Waktu kode itu dijalankan, nilai attribute alt dari element <img id="cat-image"> masih bernilai
Cat.
Kode berikutnya yaitu cat.src = "https://bit.ly/3j6YdWJ"; kita akan memberikan nilai baru ke attribute
src-nya <img id="cat-image">.
Begitu juga di kode berikutnya yaitu cat.alt = "Fish"; kita akan memberikan nilai baru ke attribute alt-nya
<img id="cat-image">.
Kode berikutnya yaitu catImage.width = "400"; kita akan menambah attribute width ke element <h1
id="demo"> dengan nilai 400.
Apabila kita cek halaman website kita di browser, <img id="cat-image"> yang tadinya menampilkan foto
kucing akan berubah menjadi foto ikan setelah kode JavaScript di atas dijalankan.
element.setAttribute(attribute, nilai)
setAttribute(attribute, nilai) fungsinya hampir sama dengan element.attribute = nilai hanya saja
setAttribute itu termasuk DOM Method sedangkan element.attribute itu DOM Property.
Contoh:


<img src="https://bit.ly/2FKluzq" alt="Cat" id="cat-image" />
// js
let catImage = document.getElementById("cat-image");
catImage.setAttribute("src", "https://bit.ly/3j6YdWJ");
catImage.setAttribute("alt", "Fish");
catImage.setAttribute("width", "400");
console.log(catImage.src); // Output: https://bit.ly/3j6YdWJ

console.log(catImage.alt); // Output: Fish
console.log(catImage.width); // Output: 400
element.style.property
Kegunaan dari element.style.property adalah untuk mengambil/mengubah/menambah CSS dari element
HTML.
Contoh:


<h1 id="demo" style="color: blue;">Hello, World!</h1>
Element Style Property Blue
// js
console.log(demo.style.color); // Output: blue
demo.style.color = "red";
demo.style.fontSize = "18px";
console.log(demo.style.color); // Output: red

console.log(demo.style.fontSize); // Output: 18px
Element Style Property Red
Di baris console.log(demo.style.color);, kita hanya menampilkan nilai properti style color dari element
<h1 id="demo">. Waktu kode itu dijalankan, nilai properti style color dari element <h1 id="demo">
masih bernilai blue.
Kode berikutnya yaitu demo.style.color = "red"; kita akan memberikan nilai baru ke properti style color
dari element <h1 id="demo">.
Kode berikutnya yaitu demo.style.fontSize = "18px"; kita akan menambah properti style fontSize ke
element <h1 id="demo">.
Apabila kita cek halaman website kita di browser, <h1 id="demo"> yang tadinya menampilkan tulisan
Hello, World! dengan warna biru akan berubah menjadi tulisan warna merah dengan ukuran tulisan 18px
setelah kode JavaScript di atas dijalankan.
ECMAScript
JavaScript
Sampai modul ini, kalian pasti sudah mengenal lebih dalam tentang JavaScript: bahasa pemrograman
yang esensial dalam pengembangan aplikasi web interaktif. Hampir semua pengembang web mengenal
bahasa ini, mulai dari syntax sampai fitur-fiturnya.
Tapi apa kalian tahu kalau syntax dan fitur bahasa JavaScript mengalami pembaruan setiap beberapa
tahun?
Benar, JavaScript yang kalian kenal sekarang memiliki beberapa fungsi yang belum ada 5-10 tahun yang
lalu:
method .forEach() untuk array belum dikenal sebelum ES5 pada tahun 2009.
sebelum ES6 pada tahun 2015, untuk melakukan operasi pangkat kita harus menggunakan Math.pow()
tidak bisa langsung dengan operator eksponen **.
"ES5? ES6? Apa sih maksudnya? Baru denger"
ECMAScript
ES itu adalah singkatan dari ECMAScript. Jadi ES6 itu salah satu versi dari ECMAScript. ES sendiri
bukan sebuah bahasa, melainkan sebuah spesifikasi, atau bahasa sederhananya, standar. Standar di sini
adalah sekumpulan kriteria teknis yang harus dipenuhi. Dipenuhi oleh siapa? Tentunya dalam kasus ini
adalah JavaScript.
Mengerti ya perbedaannya? Jadi kalau kalian ditanya "Apa bedanya ECMAScript dan JavaScript?", tahu
jawabannya kan.
ECMAScript adalah sebuah spesifikasi, atau standar.
JavaScript adalah salah satu bahasa pemrograman yang mengikuti standar ECMAScript.
Asal kalian tahu saja, yang mengikuti standar ECMAScript itu bukan hanya JavaScript lho. Masih ada
ActionScript dan JScript, tapi JavaScript itu tetap yang paling populer sampai saat ini.
Pada topik-topik berikutnya, kita akan membahas mengenai salah satu versi dari ECMAScript, lebih
tepatnya ES6.
let vs const vs var

Deklarasi Variabel Menggunakan let
Saat mendeklarasikan variabel menggunakan let, variabel tersebut masih bisa diberi nilai yang baru
nantinya.
Contoh:
let bilanganPi = 3.14;

bilanganPi = 3.;
console.log(bilanganPi); // Output: 3
bilanganPi = 3.2;
console.log(bilanganPi); // Output: 3.2
Penggunaan let cocok untuk variabel yang nilainya memang bisa berubah-ubah. Bagaimana kalau kita
ingin variabel tersebut tidak bisa diubah nilainya?
Solusinya adalah menggunakan kata kunci const.
Deklarasi Variabel Menggunakan const

Syntax penggunaan const mirip dengan saat menggunakan let, yaitu diikuti nama variabelnya. Lalu apa
bedanya const dengan let?
Nah, variabel yang dideklarasikan dengan const itu tidak bisa diberi nilai baru.
Contoh:
let bilanganPi = 3.14;

bilanganPi = 3.; // Output TypeError: Assignment to constant variable
Karena variabel bilanganPi dideklarasikan menggunakan kata kunci const, kita tidak bisa memberi nilai
baru pada variabel tersebut.
Deklarasi Object dan Array menggunakan const

Kesalahpahaman umum adalah const membuat sebuah variabel dengan nilai konstan. Ini pada umumnya
benar, namun ada pengecualian. Untuk variabel dengan tipe objek atau array, variabel tersebut tidak bisa
diganti nilainya, tetapi properti atau element-nya bisa.
Coba lihat contoh berikut:

const warna = ["merah", "kuning", "kelabu"];
// pemberian array baru pada variabel dengan `const` akan menampilkan error
warna = ["hijau", "abu", "biru"]; // Output TypeError: Assignment to constant variable
// namun jika perubahan pada arraynya sendiri masih bisa dilakukan

warna.push("nila", "ungu");
console.log(warna); // Output: ["merah", "kuning", "kelabu", "nila", "ungu"]

Kalau kita lihat contoh di atas, saat kita berusaha memberi array baru pada variabel warna, akan muncul
error. Sebab seperti yang tadi kita bahas, variabel yang dideklarasikan dengan const tidak bisa diberi nilai
baru.
Namun lihat pada saat kita menggunakan method push() pada variabel warna. Tidak ada error. Kenapa?
Karena kita memang hanya mengubah nilai (menambah element baru) dari variabel warna, bukan
memberinya nilai baru.
Deklarasi variabel menggunakan var

Dalam JavaScript, sebetulnya ada satu lagi cara mendeklarasikan variabel, yaitu dengan kata kunci var.
Sudah hampir tidak ada yang memakai var kecuali untuk kode JavaScript lama yang tidak mendukung
ES6.
Kenapa tidak dipakai lagi?
Deklarasi variabel menggunakan var tidak akan memunculkan error walaupun variabel dengan nama
yang sama sudah pernah dideklarasikan. Jadi misalkan kita pernah membuat sebuah variabel, lalu entah
karena lupa atau tidak sengaja kita membuat variabel dengan nama yang sama, nilai dari variabel yang
pertama akan ditimpa dengan yang baru.
Contoh:
// deklarasi variabel bernama bahasaFavorit

var bahasaFavorit = "JavaScript";
// baris kode lain
// ...
// tidak sengaja kita membuat variabel dengan nama yang sama

var bahasaFavorit = "Python";
console.log(bahasaFavorit); // Output: Python

Pada kode di atas, kita tidak sengaja membuat variabel lagi bernama bahasaFavorit padahal sudah pernah
ada variabel dengan nama tersebut. Yang menjadi masalah adalah kode tersebut tidak menghasilkan error
sama sekali.
Bandingkan kalau kita menggunakan let atau const

// deklarasi variabel menggunakan const dan let
const nama = "Rafi";
let umur = 16;
// kalau kita coba deklarasi lagi dengan nama variabel yang sama
// akan muncul error
const nama = "Farhan"; // Output SyntaxError: Identifier 'nama' has already been declared
let umur = 21; // Output SyntaxError: Identifier 'nama' has already been declared
Dengan begini kita jadi tahu bahwa sudah pernah ada variabel dengan nama yang sama.
Scoping Variabel dengan var

Kelemahan lain dari deklarasi variabel menggunakan var adalah ia tidak memiliki block scoping.
Apa itu block scoping?
Sebuah variabel yang dideklarasikan di dalam blok if-else, switch-case, while, dan for seharusnya
memang tidak bisa diakses dan diubah nilainya dari luar blok tersebut.
Contoh:
var judulBuku = "Harry Potter";

if (judulBuku === "Harry Potter") {
var pengarang = "J.K. Rowling";
}
console.log(pengarang); // Output: J.K. Rowling

Pada kode di atas, variabel pengarang dideklarasikan di dalam blok if. Tapi dia tetap bisa diakses di luar
blok tersebut (lihat output dari baris terakhir).
Bandingkan dengan contoh menggunakan let:
let judulBuku = "Harry Potter";
if (judulBuku === "Harry Potter") {

let pengarang = "J.K. Rowling";
}
console.log(pengarang); // Output ReferenceError: pengarang is not defined
Template Literal
Template Literal
Template literal adalah cara untuk menanamkan ekspresi JavaScript ke dalam sebuah string. Template
literal dibungkus dengan sepasang tanda `(backtick), dan ekspresi JavaScript-nya dibungkus dengan tanda
${ }.
Syntax-nya seperti berikut ini:
let namaVariabel = `${ekspresiJavaScript}`;
*"Ekspresi? Menanamkan? Pelan-pelan dong Mbak"*

Ekspresi dalam JavaScript adalah sesuatu yang jika dievaluasi akan menghasilkan sebuah nilai tunggal.
Bisa itu variabel, operasi matematika, atau operasi logika.
*"Jadi di tengah-tengah string nanti bisa ada variabel atau operasi matematika gitu?"*
Iya, Benar sekali!
Coba kita ambil contoh pertama ya.
```javascript
let nama = "sarah";
let umur = 24;
let kalimat = `Namanya ${nama}. Umurnya ${umur} tahun.`
console.log(kalimat);
/*
Output:
"Namanya sarah. Umurnya 24 tahun."
*/
Pada contoh di atas, variabel nama dan umur akan dievaluasi nilainya menjadi "sarah" dan 24. Kedua
nilai ini baru dimasukkan menjadi bagian dari string.
Template Literal
Seperti yang tadi dibahas, kita juga bisa memasukkan operasi matematika atau operasi logika dengan
template literal. Contohnya seperti ini:
let umur = 16;
let kalimat = `Umur saya tahun depan adalah ${umur + 1}`;
console.log(kalimat); // Output: Umur saya tahun depan adalah 17

let kalimat2 = `Tahun depan saya ${umur + 1 >= 17 ? 'bisa' : 'tidak bisa'} ikut pemilu`;
console.log(kalimat2); // Output: Tahun depan saya bisa ikut pemilu

Pada kode di atas, umur + 1 di variabel kalimat akan dievaluasi menjadi 22 dulu sebelum ia menjadi
bagian dari string. Begitu juga kode umur + 1 >= 17 ? 'bisa' : 'tidak bisa' akan dievaluasi menjadi 'bisa'
sebelum ia menjadi bagian dari string di kalimat2.
Jangankan variabel dan operasi matematika, fungsi pun bisa. Perhatikan contoh berikut:
// fungsi yang mengembalikan sebuah string

function namaSaya() {
return "Krishna";
}
let kalimatPerkenalan = `Halo nama saya adalah ${namaSaya()}`;
console.log(kalimatPerkenalan); // Output: Halo nama saya adalah Krishna

Begitulah kegunaan template literal. Kamu dapat menanamkan semua jenis ekspresi JavaScript ke dalam
sebuah string, tanpa perlu menggunakan string concatenation satu persatu lagi.
Menggunakan Arrow Function

Masih ingat cara mendeklarasikan fungsi?
Untuk mengingat kembali, mari lihat contoh di bawah ini:
function ucapkanSalam() {
return "Selamat Pagi";
};
Di Javascript ES6, ada cara baru dalam penulisan sebuah fungsi, yaitu menggunakan arrow function.
Kelebihan menggunakan arrow function adalah penulisan fungsi menjadi lebih singkat dan lebih mudah
dibaca.
Syntax menggunakan arrow function adalah sebagai berikut:
// Arrow function
const namaFungsi = (parameter1, ..., parameterX) => {
// kode yang ingin dijalankan dalam fungsi
};
// atau bila fungsi tersebut tidak memiliki parameter sama sekali

const namaFungsiTanpaParameter = () => {
// kode yang ingin dijalankan dalam fungsi
};
Contoh:
// fungsi dengan parameter

const operasiPenjumlahan = (bilangan1, bilangan2) => {
const hasil = bilangan1 + bilangan2;
return hasil;
};
console.log(operasiPenjumlahan(3, 4)); // Output: 7
// fungsi yang tidak memiliki parameter

const namaJenisAnjing = () => {
const anjing = ["Pug", "Bulldog", "Poodle"];
return anjing[Math.floor(Math.random()*(anjing.length))];
}
console.log(namaJenisAnjing()); // Output: Pug (hasil random)

Implicit Return Value
Yang dimaksud dengan implicit return value adalah suatu kondisi di mana sebuah fungsi langsung
mengembalikan nilai tanpa ada deklarasi variabel atau operasi lainnya di dalamnya.
Misalnya kita mempunyai satu fungsi seperti berikut ini:
function greeting(nama) {
return `Hi ${nama}`;
}
console.log(greeting('Einstein')); // Output: Hi Einstein

Kode di atas bisa disingkat dengan menggunakan arrow function sebagai berikut:
const greeting = (nama) => `Hi ${nama}`;
console.log(greeting('Einstein')); // Output: Hi Einstein

Untuk fungsi yang tidak memiliki parameter, syntax arrow function untuk implicit return value adalah
sebagai berikut:
const namaFungsi = () => nilaiReturn;

Jadi kita tidak lagi perlu capek-capek menulis kurung kurawal {} dan kata return lagi.
Default Parameter
Parameter adalah syarat input yang harus dimasukkan ke dalam suatu fungsi dan dideklarasikan bersama
dengan deklarasi fungsi.
Sementara argument adalah nilai yang dimasukkan ke dalam suatu fungsi, sesuai dengan persyaratan
parameter, di mana argument dituliskan bersamaan dengan pemanggilan fungsi.
Contoh
function panggang(bahan, durasi, suhu) {

return `Panggang ${bahan} selama ${durasi} pada suhu ${suhu}`;
}
panggang("Roti", "10 menit", "100 C"); // Output: Panggang Roti selama 10 menit pada suhu 100 C
Pada contoh di atas, (bahan, durasi, suhu) itu merupakan parameter dari fungsi panggang. Artinya saat
kita memanggil fungsi tersebut, ia akan menantikan argument yang sesuai dengan parameternya. Dalam
kode di atas, argumentnya adalah "Roti", "10 menit", dan "100 C".
Apa yang terjadi kalau kita lupa memberinya argument yang sesuai dengan parameternya?
Misalnya kita hanya memberinya 2 buah argument: panggang("Roti", "10 menit").
Atau bahkan tidak sama sekali: panggang().
Hasilnya akan seperti ini:
console.log(panggang("Roti", "10 menit"));

// Output: Panggang Roti selama 10 menit pada suhu undefined
console.log(panggang());
// Output: Panggang undefined selama undefined pada suhu undefined
Pada dasarnya jika kita tidak memberi argument padahal fungsi tersebut menantikan sebuah argument,
nilai default yang akan dipakai adalah undefined..
Pada contoh kode di atas mungkin tidak ada error, tapi bagaimana jika kodenya seperti di bawah ini:
function cetakNama(orang) {
return orang.nama;
}
cetakNama(); // Output TypeError: Can't read the property 'nama' of undefined

Kode di atas akan menghasilkan error. Karena saat kita tidak memberikan argument untuk parameter
orang, nilai defaultnya adalah undefined. Dan saat fungsi cetakNama ingin membaca properti nama dari
orang, di situlah muncul error karena orang bernilai undefined.
Bagaimana cara menangani masalah seperti ini?
Bagaimana caranya kita memastikan kalau parameter pada fungsi yang kita buat tidak bernilai undefined?
Solusinya adalah menggunakan default parameter.
Default Parameter
Default parameter adalah nilai pengganti yang akan diberikan ke sebuah fungsi apabila fungsi tersebut
tidak diberikan argument yang cocok dengan parameter fungsi tersebut (atau argument yang diberikan
bernilai undefined).
Syntax-nya adalah seperti ini:
function namaFungsi(parameter1 = defaultParameter1) {

// kode yang akan dijalankan di dalam fungsi
}
Jadi kalau misalnya fungsi tersebut tidak menerima argument yang seharusnya menjadi nilai parameter1,
nilai default yang akan diambil oleh parameter1 adalah defaultParameter1.
Kita ambil contoh fungsi yang pertama tadi.

function panggang(bahan = "makanannya", durasi = "yang diperlukan", suhu = "yang cocok") {
return `Panggang ${bahan} selama ${durasi} pada suhu ${suhu}`;
}
Sehingga kalau kita memanggil fungsi tersebut tanpa argument yang lengkap, hasilnya akan seperti ini:
panggang("Risoles", "5 menit"); // Output: Panggang Risoles selama 5 menit pada suhu yang cocok
panggang(); // Output: Panggang makanannya selama yang diperlukan pada suhu yang cocok
Rest Parameter & Spread Operator

Rest Parameter
Rest Parameter adalah parameter yang mewakili nilai dari semua (atau sisa) argument yang diberikan
kepada suatu fungsi.
Contoh:
const foo = (...params) => {

console.log(params);
};
foo("A", "B", "C"); // Output: ["A", "B", "C"]

Kalau kalian perhatikan kode di atas, nilai dari parameter params berisi semua nilai argument yang kita
berikan pada saat pemanggilan fungsi foo.
Kok bisa gitu?
Coba cermati parameter params. Ada ... (elipsis) di depannya kan? Parameter yang diawali dengan elipsis
menandakan ia adalah sebuah rest parameter. Jika sebuah fungsi dengan satu parameter berupa rest
parameter dipanggil dan diberikan satu atau lebih argument, rest parameter-nya akan mewakili semua
argument-argument tersebut.
Rest Parameter Comparison

Rest Parameter Sebagai Parameter Terakhir
Rest parameter juga bisa digunakan saat ada parameter lain pada fungsi yang sama. Dalam kasus ini, rest
parameter akan mewakili sisa argument yang belum "dipetakan" ke parameter-parameter sebelumnya.
Contoh:
const bar = (param1, param2, ...params) => {

console.log("Argument pertama ", param1);
console.log("Argument pertama ", param2);
console.log("Sisa argument ", params);
}
bar("A", "B", "C", "D", "E");

// Output:
// Argument pertama A
// Argument pertama B
// Sisa argument ["C", "D", "E"]
Pada kode di atas,
param1 mewakili argument pertama, yaitu "A",

param2 mewakili argument pertama, yaitu "B",
params mewakili sisa argument, yaitu "C", "D", dan "E".
Rest as Last Paramater
Paham ya, kalau rest parameter ditaruh sebagai parameter terakhir, ia akan mengambil sisa dari argument
yang kita berikan pada fungsi tersebut.
Pada dasarnya, hanya bisa ada satu rest parameter dalam sebuah fungsi. Dan dia harus ditempatkan di
paling belakang. Kalau tidak, akan muncul error saat kita mendeklarasikan fungsinya.
Contohnya:
// Tempatkan rest parameter di tengah-tengah parameter lainnya

const buzz = (param1, ...params, param2) => {
console.log(param1);
console.log(params);
console.log(param2);
}
// Output: SyntaxError: Rest parameter must be last formal parameter

Spread Operator
Berlawanan dengan rest parameter, sifat dari spread operator justru memisahkan/memecahkan. Ia
memecah sebuah array menjadi element-elementnya (atau dalam kasus objek, memecah objek menjadi
pasangan properti-nilai yang membentuknya).
Spread Operator Dengan Array

let arrayBilangan = [1, 2, 3, 4, 5];
// tanpa spread operator

console.log(arrayBilangan); // Output: [1, 2, 3, 4, 5]
// kalau pakai spread operator

console.log(...arrayBilangan); // Output: 1, 2, 3, 4, 5
Saat menggunakan spread operator, outputnya bukan lagi array, melainkan element-element
pembentuknya secara individu.
Spread operator pada array memiliki beberapa kegunaan:
membuat array duplikat
let arrayAsli = [1, 2, 3];
let arrayDuplikat = [...arrayAsli];

Sekarang arrayDuplikat adalah array baru yang memiliki element-element yang sama dengan arrayAsli.
Kalian mungkin bertanya "Kenapa tidak langsung seperti ini saja?"
let arrayAsli = [1, 2, 3];
let arrayDuplikat = arrayAsli;

Dalam kode di atas, arrayAsli dan arrayDuplikat itu menunjuk pada array yang sama, sehingga kalau kita
membuat perubahan pada arrayDuplikat, arrayAsli juga ikut berubah. Sebaliknya juga begitu.
menggabungkan array (concatenate)
let array1 = ["foo", "bar"];

let array2 = ["fizz", "buzz"];
// menggunakan spread operator

array1 = [...array1, ...array2];
console.log(array1); // Output: ["foo", "bar", "fizz", "buzz"]

Spread Operator Dengan Objek
Mirip pada array, spread operator memecah objek menjadi pasangan properti-nilai yang membentuknya.
Hal ini memiliki beberapa kegunaan:
menambah beberapa properti sekaligus
let orang = {
nama: "Yudistya",
umur: 32
};
Untuk menambahkan beberapa properti lainnya, kita bisa melakukan ini:
orang.pekerjaan = "arsitek";
orang.pendidikan = "S1";
atau bisa juga lebih singkat dengan menggunakan spread operator seperti ini:
orang = {...orang, pekerjaan: "arsitek", pendidikan: "S1"};

menggabungkan objek
Spread operator juga memungkinkan kita untuk menggabungkan dua (atau lebih) objek.
Sebelum ES6, kita harus menggunakan method .assign() dari Object seperti ini:
const objek1 = {a: 1, b: 2};

const objek2 = {c: 3, d: 4};
const objekGabungan = Object.assign({}, objek1, objek2);
console.log(objekGabungan); // Output: {a: 1, b: 2, c: 3, d: 4}

Tapi dengan spread operator, kita cukup menambahkan elipsis di depan nama arraynya lalu membungkus
semuanya dengan sepasang kurung kurawal.
const objek1 = {a: 1, b: 2};

const objek2 = {c: 3, d: 4};
const objekGabungan = {...objek1, ...objek2};
console.log(objekGabungan); // Output: {a: 1, b: 2, c: 3, d: 4}
Destrukturisasi
Destrukturisasi Array
Sebelum ES6, cara untuk menyimpan nilai dari masing-masing element dari sebuah array ke dalam
variabel adalah sebagai berikut:
let buah = ["mangga", "pisang", "anggur"];
let buah1 = buah[0];

console.log(buah1); // Output: mangga

console.log(buah2); // Output: pisang
console.log(buah3); // Output: anggur
Selain tidak efisien karena harus menulis assignment untuk tiap variabel, kita juga harus menghitung nilai
yang kita ingin ambil itu ada di index keberapa.
Untungnya ES6 menyediakan cara untuk mendapatkan hasil yang sama dengan cara yang lebih singkat.
Syntax-nya mirip dengan cara mendeklarasikan sebuah array, namun kali ini nama array-nya ada di
sebelah kanan dan variabel untuk menyimpan element-element yang ingin dibongkar ada di sebelah kiri.
Contoh:
// cara mendeklarasikan variabel berupa array

let namaArray = [element1, element2, element3];
// cara melakukan destrukturisasi array

let [variabel1, variabel2, variabel3] = namaArray;
Kita ambil contoh array yang pertama ya:
// lakukan destrukturisasi array

let [buah1, buah2, buah3] = buah;

Lebih singkat bukan kalau menggunakan destrukturisasi array?
Kalian juga bisa memilih element mana saja yang tidak ingin disimpan di dalam variabel dengan
menggunakan "koma kosong", atau tidak menyebutkan element tersebut saat destrukturisasi.
Contoh:
// gunakan koma kosong untuk melewati element kedua dan keempat

let [namaDepan, , namaBelakang, , buku] = ["Joanne", "K", "Rowling", "pengarang", "Harry Potter"];
console.log(namaDepan); // Output: Joanne

console.log(namaBelakang); // Output: Rowling
console.log(buku); // Output: Harry Potter
Pada kode di atas, karena kita mengosongkan tempat kedua dan keempat pada saat destrukturisasi array,
element kedua ("K") dan element keempat ("Pengarang") tidak akan ikut disimpan dalam variabel seperti
element pertama, ketiga, dan kelima.
Kalian ingin menukar nilai dari dua variabel (atau lebih) dengan lebih cepat dan tanpa menggunakan
variabel tambahan? Bisa pakai destrukturisasi array.
Sebelumnya mungkin kita harus melakukan ini:
let a = 10;
let b = 15;
// variabel tambahan sementara

let temp = a;
a = b; // nilai a sekarang adalah 15
b = temp; // nilai b sekarang adalah 10
Sekarang kita cukup melakukan ini:
let a = 10;
let b = 15
[a,b] = [b,a];
// nilai a sekarang adalah 15, dan nilai b adalah 10
Destrukturisasi Objek
Sama seperti destukturisasi array, sebelum ES6, kita harus menulis assignment satu per satu untuk tiap
nilai dalam objek yang kita ingin bongkar. Seperti ini:
let orang = {
nama: "Joko",
umur: 18,
sudahMenikah: false
};
let nama = orang.nama;

let umur = orang.umur;
let sudahMenikah = orang.sudahMenikah;
console.log(nama); // Output: Joko

console.log(sudahMenikah); // Output: false
Pada Javascript ES6, caranya lebih singkat, yaitu dengan destrukturisasi.
Syntax untuk destrukturisasi objek adalah seperti ini:

let { namaProperti1, namaProperti2, namaProperti3 } = namaObjek;
Cara di atas hanya bekerja jika nama variabel baru untuk destrukturisasi itu sama dengan nama properti
pada objek yang akan didestrukturisasi ya. Kalau tidak nanti isi dari variabelnya adalah undefined.
Misalnya:
let orang = {
nama: "Joko",
umur: 22,
sudahMenikah: false
};
// Destrukturisasi Objek
let { nama, umur, statusMenikah } = orang;

console.log(statusMenikah); // Output: undefined karena nama variabel dan properti berbeda
Tapi kalau kalian ingin agar nama variabelnya berbeda dari nama properti, kalian bisa menambahkan titik
dua setelah nama properti dan diikuti nama variabel yang baru, seperti ini:
let {
namaProperti1: namaVariabelBaru1,
namaProperti2: namaVariabelBaru2
} = namaObjek;
Contoh:
let orang = {
name: "Joko",
age: 22,
};
// buat variabel nama berisi nilai dari properti name pada orang
// buat variabel age berisi nilai dari properti umur pada orang
let { name: nama, age: umur } = orang;

Destrukturisasi Objek Bertingkat
Jika objek-nya bertingkat (ada objek di dalam objek) apa tetap bisa didestrukturisasi?
Bisa!
let murid = {
kelas: "12a",
nama: ["ani", "yahya", "sinto"],
prestasi: {
olahraga: "juara 1",
akademik: "juara 2"
}
};
let {
prestasi: { olahraga }
} = murid;
console.log(olahraga); // Output: juara 1

Kalau kalian cermati, nilai "juara 1" adalah nilai dari properti "olahraga", yang mana adalah properti dari
objek prestasi.
Maka saat melakukan destrukturisasi, kita juga harus mengikuti struktur objek tersebut.
Destruksturisasi Array
Sebelum ES6, cara unuk menyimpan nilai dari masing-masing element dari sebuah array ke dalam
variable adalah sebagai berikut:
Let buah = [“mangga”, “pisang”, “anggur”];
Let buah1 = buah[0];
selain tidak efisien karena harus menulis assignment untuk tiap variable, kita juga harus menghitung nilai
yang ingin kita ambil itu ada di index keberapa.
Untungnya ES6 menyediakan cara untuk mendapatkan hasil yang sama dengan cara yang lebih singkat.
Syntax-nya mirip dengan cara mendeklarasi sebuah array, namun kali ini nama array-nya ada disebelah
kanan dan variable untuk menyimpan element-element yang ingin dibongkar ada disebelah kiri.
Contoh:
// cara mendeklarasikan variabel berupa array
let namaArray = [element1, element2, element3];
// cara melakukan destrukturisasi array

let [variabel1, variabel2, variabel3] = namaArray;
Kita ambil contoh array yang pertama ya:

// lakukan destrukturisasi array

let [buah1, buah2, buah3] = buah;

kalian juga bisa memilih element mana saja yang tidak ingin disimpan di dalam variable dengan
menggunakan “koma kosong”, atau tidak menyebutkan element tersebut saat destrukturisasi.
Contoh:
// gunakan koma kosong untuk melewati element kedua dan keempat
let [namaDepan, , namaBelakang, , buku] = ["Joanne", "K", "Rowling", "pengarang", "Harry Potter"];
console.log(namaDepan); // Output: Joanne

console.log(namaBelakang); // Output: Rowling
console.log(buku); // Output: Harry Potter
Pada kode di atas, karena kita mengosongkan tempat kedua dan keempat pada saat destrukturisasi array,
element kedua ("K") dan element keempat ("Pengarang") tidak akan ikut disimpan dalam variabel seperti
element pertama, ketiga, dan kelima.
Kalian ingin menukar nilai dari dua variabel (atau lebih) dengan lebih cepat dan tanpa menggunakan
variabel tambahan? Bisa pakai destrukturisasi array.
Sebelumnya mungkin kita harus melakukan ini:

let a = 10;
let b = 15;
// variabel tambahan sementara

let temp = a;
a = b; // nilai a sekarang adalah 15
b = temp; // nilai b sekarang adalah 10
Sekarang kita cukup melakukan ini:

let a = 10;
let b = 15
[a,b] = [b,a];
// nilai a sekarang adalah 15, dan nilai b adalah 10
Destrukturisasi Objek
Sama seperti destukturisasi array, sebelum ES6, kita harus menulis assignment satu per satu untuk tiap
nilai dalam objek yang kita ingin bongkar. Seperti ini:
let orang = {
nama: "Joko",
umur: 18,
sudahMenikah: false
};
let nama = orang.nama;

let umur = orang.umur;
let sudahMenikah = orang.sudahMenikah;

console.log(sudahMenikah); // Output: false
Pada Javascript ES6, caranya lebih singkat, yaitu dengan destrukturisasi.
Syntax untuk destrukturisasi objek adalah seperti ini:

let { namaProperti1, namaProperti2, namaProperti3 } = namaObjek;
Cara di atas hanya bekerja jika nama variabel baru untuk destrukturisasi itu sama dengan nama properti
pada objek yang akan didestrukturisasi ya. Kalau tidak nanti isi dari variabelnya adalah undefined.
Misalnya:
let orang = {
nama: "Joko",
umur: 22,
sudahMenikah: false
};
// Destrukturisasi Objek
let { nama, umur, statusMenikah } = orang;

console.log(statusMenikah); // Output: undefined karena nama variabel dan properti berbeda
Tapi kalau kalian ingin agar nama variabelnya berbeda dari nama properti, kalian bisa menambahkan titik
dua setelah nama properti dan diikuti nama variabel yang baru, seperti ini:
let {
namaProperti1: namaVariabelBaru1,
namaProperti2: namaVariabelBaru2
} = namaObjek;
Contoh:
let orang = {
name: "Joko",
age: 22,
};
// buat variabel nama berisi nilai dari properti name pada orang
// buat variabel age berisi nilai dari properti umur pada orang
let { name: nama, age: umur } = orang;

Destrukturisasi Objek Bertingkat

Jika objek-nya bertingkat (ada objek di dalam objek) apa tetap bisa didestrukturisasi? Bisa!

let murid = {
kelas: "12a",
nama: ["ani", "yahya", "sinto"],
prestasi: {
olahraga: "juara 1",
akademik: "juara 2"
}
};
let {
prestasi: { olahraga }
} = murid;
console.log(olahraga); // Output: juara 1

Kalau kalian cermati, nilai "juara 1" adalah nilai dari properti "olahraga", yang mana adalah properti dari
objek prestasi.
Maka saat melakukan destrukturisasi, kita juga harus mengikuti struktur objek tersebut.
Object Shorthand
Object Shorthand di Variabel
Object shorthand di variabel sebenarnya kebalikan dari destrukturisasi objek, jika destrukturisasi objek
menyimpan nilai property objek variable, maka objek shorthand menyimpan nilai variable di property
objek.
Jika ada beberapa variable yang nilainya ingin dijadikan sebaai property sebuah objek, maka cara
mendeklarasikan objek tersebut adalah sebagai berikut:
let suaraKucing = "Meow";

let suaraAnjing = "Gukguk";
let suaraTikus = "Citcitcit";
let suaraHewan = {
suaraKucing: suaraKucing,
suaraAnjing: suaraAnjing,
suaraTikus: suaraTikus
};
console.log(suaraHewan); // Output: { suaraKucing: 'Meow', suaraAnjing: 'Gukguk', suaraTikus:

'Citcitcit' }
console.log(suaraHewan.suaraKucing); // Output: Meow
console.log(suaraHewan.suaraAnjing); // Output: Gukguk
console.log(suaraHewan.suaraTikus); // Output: Citcitcit
Coba bayangkan, bagaimana kalau variabel yang mau disimpan di dalam properti objeknya ada banyak?
Ada cara lebih singkat ketika menuliskan objek di atas, yaitu dengan menggunakan object shorthand.
Aturan utama ketika menggunakan cara object shorthand adalah nama variabel dan nama properti di
objek yang bersangkutan harus sama.
Contoh:
let suaraKucing = "Meow";
let suaraAnjing = "Gukguk";
let suaraTikus = "Citcitcit";
let suaraHewan = { suaraKucing, suaraAnjing, suaraTikus };
console.log(suaraHewan); // Output: { suaraKucing: 'Meow', suaraAnjing: 'Gukguk', suaraTikus:
'Citcitcit' }
console.log(suaraHewan.suaraKucing); // Output: Meow
console.log(suaraHewan.suaraAnjing); // Output: Gukguk
console.log(suaraHewan.suaraTikus); // Output: Citcitcit
Object Shorthand di Parameter Fungsi

Object shorthand bisa juga digunakan untuk mengambil parameter dari sebuah fungsi dan dijadikan
sebagai nilai properti di objek yang dideklarasikan di dalam fungsi tersebut..
Sama seperti di variabel, object shorthand hanya bisa digunakan apabila nama parameter pada fungsi
sama dengan nama properti dari objek yang bersangkutan.
Contoh:
// Pada JavaScript ES5 (tanpa object shorthand)
function membuatBiodata(nama, umur, jenisKelamin) {
return {
nama: nama,
umur: umur,
jenisKelamin: jenisKelamin
};
}
console.log(membuatBiodata("Andi", 22, "pria")); // Output: { nama: 'Andi', umur: 22, jenisKelamin:
'pria' }
Dengan menggunakan object shorthand maka akan menjadi seperti ini:
// Di sini selain menggunakan object shorthand, kita juga akan menggunakan arrow function dari ES6
let membuatBiodata = (nama, umur, jenisKelamin) => {
return { nama, umur, jenisKelamin };
};
console.log(membuatBiodata("Andi", 22, "pria")); // Output: { nama: 'Andi', umur: 22, jenisKelamin:
'pria' }
Object Shorthand untuk Mendeklarasikan Method

Masih ingat method kan? Method adalah fungsi yang menjadi nilai properti di suatu objek.
Masih ingat juga kan bagaimana cara mendeklarasikan method di objek?
Lihatlah contoh di bawah ini:

let operasiMatematika = {
nama: "Penjumlahan",
operasi: function(angka1, angka2) {
let hasil = angka1 + angka2;
return `${this.nama} dari ${angka1} dan ${angka2} adalah ${hasil}`;
}
};
console.log(operasiMatematika.operasi(3, 5)); // Output: Penjumlahan dari 3 dan 5 adalah 8
Namun dengan object shorthand, objek di atas bisa ditulis dengan cara berikut:
let operasiMatematika = {
nama: "Penjumlahan",
operasi(angka1, angka2) {
let hasil = angka1 + angka2;
return `${this.nama} dari ${angka1} dan ${angka2} adalah ${hasil}`;
}
};
console.log(operasiMatematika.operasi(3, 5)); // Output: Penjumlahan dari 3 dan 5 adalah 8
Perhatikan perbedaan cara mendeklarasikan method operasi di kedua contoh di atas. Dengan cara object
shorthand, kita tidak perlu lagi menulis nama properti secara spesifik selama nama fungsi sama dengan
nama properti di objek yang bersangkutan.

Javascript Dasar

Diunggah oleh

Informasi Dokumen

Judul Asli

Hak Cipta

Format Tersedia

Bagikan dokumen Ini

Bagikan atau Tanam Dokumen

Opsi Berbagi

Apakah menurut Anda dokumen ini bermanfaat?

Apakah konten ini tidak pantas?

Hak Cipta:

Format Tersedia

Javascript Dasar

Diunggah oleh

Hak Cipta:

Format Tersedia

JAVASCRIPT DASAR

let namaVariabel1 = "hello";

// Contoh penulisan nama variabel yang salah

Contohnya seperti ini:

// akan muncul error

Selanjutnya, variabel apakahSudahMenikah bernilai false dengan tipe data boolean.

Tipe boolean ini terdiri dari 2 nilai:

// Cobalah buka tab console di developer tools browser anda

Contoh penggunaan pada operasi matematika JavaScript:

Assignment Operator Contoh Penggunaan Setara Dengan

Contoh penggunaan di JavaScript:

Exponent Assignment **=

Ada 2 macam string operator, yaitu:

Contoh penggunaan di JavaScript:

Kenapa kode di atas menghasilkan output true?

Operator === (Strict Equality)

Operator > (Lebih Dari)

Operator >= (Lebih Dari atau Sama Dengan)

Operator <= (Kurang Dari atau Sama Dengan)

Syntax dari operator logika di JavaScript itu seperti ini:

Operator Kondisi 1 Kondisi 2 Hasil

Fungsi dapat berdiri sendiri atau disimpan di dalam sebuah variabel.

Cara mendeklarasikannya seperti ini:

// Fungsi yang disimpan di dalam variabel

// Fungsi disimpan di dalam variabel

Kalau bingung coba lihat contoh kode berikut:

console.log("Hallo, nama saya Sarah." + " nama kamu siapa?")

Lalu bagaimana jika kita tidak menulis perintah return?

Misalnya seperti contoh di bawah ini:

PARAMETER DAN ARGUMEN

Bisa digambarkan seperti ini:

Penjelasan kode di atas:

Lingkup Global vs Lingkup Lokal

Jadi, lingkup lokal bisa dibagi lagi menjadi dua tipe:

Menggunakan Object Literal

let namaObjek = new Object();

// mengubah data properti

// menambah properti baru ke objek

let namaArray = [ nilai1, nilai2, nilai3, ...];

// Menyimpan lebih dari satu data dalam satu array

Menggunakan Array Literal

Menggunakan Kata Kunci new

JavaScript Array Index

let buah = ['Mangga', 'Apel', 'Jeruk'];

Mengakses Element Tunggal

let namaBuah = ["mangga", "apel", "jeruk", "durian"];

console.log(namaBuah[0]); // Output: mangga

Coba kalian perhatikan contoh berikut:

Akan tetapi ada cara singkat untuk melakukan semuanya itu!

nomor index element terakhir array = jumlah data array - 1

console.log(countries[indexElementTerakhir]); // Output: Zimbabwe

let olahraga = ["Berenang", "Sepak Bola", "Bola Basket"];

console.log(olahraga); // Output: ["Berenang", "Sepak Bola", "Bola Basket"]

let namaBuah = ["Mangga", "Apel", "Jeruk"];

console.log(namaBuah); // Output: ["Mangga", "Semangka", "Jeruk"]

const namaArray = [nilaiElement1, nilaiElement2];

// mengubah data di element pertama

// menambah element baru ke array

Mengubah Element Array Menjadi String dengan toString()

let array = [1, 2, 3, "halo", false, true];

console.log(array.toString()); // Output: 1,2,3,halo,false,true

Menggabungkan Element Array dengan join()

let array = [1, 2, 3, "halo", false, true];