Belajar Dasar Pemrograman JavaScript

Selamat datang di kelas Belajar Dasar Pemrograman JavaScript!

Pada kelas ini kita akan belajar hal-hal fundamental yang perlu
Anda ketahui tentang bahasa pemrograman JavaScript pada
lingkungan Node JS. Untuk penggunaan JavaScript pada lingkungan
browser, Anda dapat mempelajarinya pada kelas Belajar Dasar
Pemrograman Web.

Materi yang tersaji ramah untuk pemula, sehingga tidak ada

prasyarat pemrograman yang perlu Anda kuasai untuk belajar di
kelas ini.

Beberapa hal yang akan dipelajari pada kelas ini, antara lain:

 Introduction to JavaScript : Mengenal apa itu JavaScript,

mulai dari sejarah hingga alasan untuk mulai mempelajarinya.
 JavaScript Fundamentals : Materi fundamental terkait
JavaScript, seperti statement, expressions, variabel, tipe data,
dan control flow.
 Data Structure : Menjelaskan bagaimana menyimpan dan
mengelola data yang lebih kompleks menggunakan Object,
Array, Map, Set, dsb.
 Function : Mempelajari bagaimana mengelompokkan kode
menjadi fungsi yang dapat dipanggil ulang.
 Object-Oriented Programming : Memahami konsep OOP
pada JavaScript, bagaimana membuat class, properti, dan
method dari class.
 Functional Programming : Memahami konsep functional
programming seperti perilaku fungsi, anonymous function,
dan higher-order.
 Setup Environment : Proses instalasi lingkungan
pengembangan seperti Node JS dan IDE pada perangkat yang
Anda miliki.
 Module : Mempelajari bagaimana beberapa berkas JavaScript
dapat saling berkomunikasi dan berbagi data satu sama lain.
 Error Handling : Mempelajari bagaimana menangani
kegagalan yang mungkin muncul dalam program, sehingga
tidak berdampak kepada pengguna.
  Concurrency : Mempelajari bagaimana menangani dan
membuat proses asynchronous pada JavaScript.
 Node Package Manager : Mengetahui beberapa library yang
penting untuk ditambahkan ke dalam proyek aplikasi
JavaScript.
 JavaScript Testing : Mempelajari bagaimana melakukan
pengujian otomatis pada kode JavaScript.

Setelah mengetahui materi apa saja yang akan dipelajari, mari kita
mulai melangkah ke materi pertama yaitu Pengenalan
JavaScript. Let’s go!

Mekanisme Belajar
Selamat datang di Dicoding Academy. Sebelum memulai belajar di
kelas ini, Anda perlu tahu tahapan dan cara belajar beserta fasilitas
yang tersedia agar proses belajar lebih efektif.

Materi Pembelajaran

 Materi Bacaan Elektronik

Materi yang ada dalam kelas ini mayoritas berupa teks atau
tulisan. Mengapa demikian? Karena kami menemukan bahwa
dalam proses belajar di bidang pemrograman, bentuk materi
pembelajaran yang paling efektif untuk diingat, dimengerti,
dan yang terpenting, dipraktikkan, adalah dalam bentuk teks.

 Forum Diskusi
Setiap kelas memiliki sebuah forum diskusi yang dapat Anda
gunakan untuk bertanya (dan menjawab) mengenai materi
kelas. Instruktur kami yang terdiri dari Curriculum Developer
dan Academy Code Reviewer siap membantu Anda melalui
forum diskusi ini. Tak hanya kami, Anda pun dapat
berpartisipasi. Untuk meningkatkan retensi ilmu yang Anda
punya, berbagi adalah salah satu kuncinya. Jadi, silakan aktif
dan saling membantu di dalam forum.

Jika Anda menemui kendala perihal situs Dicoding dan

administrasi kelas, tanyakan kepada kami melalui tombol chat
di kanan bawah layar Anda ketika membuka situs Dicoding.
Jangan gunakan forum diskusi ya karena itu salah alamat.
Evaluasi Pembelajaran

 Ujian (Kuis, Ujian Akhir Kelas, Knowledge Check)

Terdapat berbagai jenis ujian di kelas guna mengecek
pemahaman Anda pada materi pembelajaran. Ketersediaan
ujian beserta jenis ujian yang tersedia pada setiap kelas dapat
berbeda-beda. Setiap pertanyaan dalam ujian pasti mencakup
materi yang telah dibahas. Sehingga jika ada pertanyaan yang
tidak dapat Anda jawab, pastikan Anda mengulang kembali
pembelajaran.

Daftar Referensi
[1] Indeed. “Gaji di Indonesia - gaji rata-rata”
id.indeed.com. https://id.indeed.com/career/front-end-developer/sal
aries?from=top_sb (diakses pada 2 Juni 2022)

[2] Indeed. “Gaji di Indonesia - gaji rata-rata”

id.indeed.com. https://id.indeed.com/career/back-end-developer/sal
aries?from=top_sb (diakses pada 2 Juni 2022)

[3] D. Flanagan, "The JavaScript Standard Library," dalam

JavaScript: The Definitive Guide, 7th Edition. O'Reilly Media, Inc.,
2020. Available: O'Reilly

[4] D. Flanagan, "Introduction to JavaScript," dalam JavaScript: The

Definitive Guide, 7th Edition. O'Reilly Media, Inc., 2020. Available:
O'Reilly

[5] S. Amarasinghe. "Reading 17: Concurrency".

web.mit.edu. http://web.mit.edu/6.005/www/fa14/classes/17-
concurrency/ (diakses pada 22 Maret 2021)

[6] M. Lee. "What's the difference between a tilde (~) and a caret
(^) in a npm package.json file?".
michaelsoolee.com. https://michaelsoolee.com/npm-package-tilde-
caret/ (diakses pada 26 Maret 2021)
Pengenalan JavaScript
Sebelum mulai belajar suatu hal yang baru, penting bagi Anda
untuk memahami apa yang akan dipelajari dan apa yang bisa
dilakukan dengannya. Dalam hal ini kita akan mulai mengenal
JavaScript.

Pada akhir modul ini, Anda diharapkan dapat:

 Mengetahui apa itu JavaScript

 Mengetahui sejarah singkat dan perkembangan JavaScript
 Mengerti beberapa alasan untuk mulai mempelajari JavaScript

Apa itu JavaScript

JavaScript adalah bahasa pemrograman tingkat tinggi yang pada
awalnya dikembangkan untuk membuat website menjadi lebih
“hidup”. Bersama dengan HTML dan CSS, JavaScript menjadi
bahasa pemrograman paling populer untuk mengembangkan
aplikasi berbasis web. Bahasa ini mampu memberikan logic ke
dalam website, sehingga website tersebut memiliki fungsionalitas
tambahan dan lebih interaktif.

Awalnya JavaScript dibuat supaya dapat berjalan di lingkungan

browser dan membuat website menjadi lebih interaktif. Namun,
saat ini Anda sebagai developer dapat menggunakan bahasa
pemrograman JavaScript untuk mengembangkan berbagai macam
platform. Sehingga, tidak hanya sebatas browser/client, tetapi
JavaScript juga bisa berjalan di luar browser menggunakan Node.js.

JavaScript termasuk ke dalam kategori scripting language. Apa

maksudnya? Salah satu ciri-ciri utama dari bahasa scripting adalah
kode tidak perlu dikompilasi agar bisa dijalankan. Scripting
language menggunakan interpreter untuk menerjemahkan kode
atau perintah yang kita tulis supaya dimengerti oleh mesin.

Itulah kenapa bahasa scripting tidak membutuhkan banyak kode

yang perlu ditulis agar sebuah program bisa dijalankan. Hanya
dengan satu baris kode berikut Anda sudah bisa membuat program
yang menampilkan teks “Hello, World!” ke layar.
 1. console.log(“Hello, World!”);

Sederhana, bukan? Itulah salah satu ciri utama JavaScript sebagai

scripting language. Tentu tidak lengkap rasanya ketika kita sudah
mengetahui apa itu JavaScript, tetapi tidak tahu sejarah di baliknya.
Sejarah singkat dari JavaScript dapat Anda simak di materi
berikutnya.

Sejarah JavaScript
JavaScript dibuat pada tahun 1995 oleh Brendan
Eich, programmer dari Netscape. Bahasa ini awalnya dinamai
“Mocha” kemudian berubah menjadi “LiveScript”. Pada saat itu
bahasa Java merupakan bahasa pemrograman yang paling populer.
Untuk memanfaatkan kepopulerannya, nama LiveScript pun diubah
menjadi “JavaScript”. Jadi, meskipun namanya mirip, JavaScript
tidak ada hubungannya dengan bahasa pemrograman Java.

Setelah diadopsi di luar Netscape, JavaScript distandarisasi oleh

European Computer Manufacturers Association (ECMA). Sejak saat
itu JavaScript juga dikenal dengan ECMAScript. Meskipun begitu,
masih banyak yang menyebutnya dengan JavaScript hingga saat
ini.

Terdapat beberapa versi JavaScript yang sudah distandarisasi oleh

ECMAScript. Pada tahun 2000 hingga 2010, ECMAScript 3
merupakan versi yang banyak digunakan ketika JavaScript sedang
mendominasi. Selama waktu tersebut, ECMAScript 4 sedang dalam
proses pengembangan dengan harapan akan memberikan
improvisasi yang cukup signifikan. Namun, ambisi tersebut tidak
berjalan mulus sehingga pada tahun 2008 pengembangan
ECMAScript dihentikan.

Walaupun begitu, ini bukan akhir dari JavaScript. Pengembangan

berganti menjadi ECMAScript 5 dengan mengurangi ambisinya dan
hanya melakukan perbaikan pada hal yang tidak jadi kontroversi.
Pembaruan tersebut berhasil dan akhirnya ECMAScript 5 rilis pada
tahun 2009.
Lalu, pada tahun 2015 ECMAScript 6 rilis dengan membawa
perubahan yang cukup besar termasuk ide-ide yang sudah
direncanakan untuk versi 4. Sejak saat itu, tiap tahun JavaScript
melakukan update bersifat minor.

Kenapa JavaScript
Jadi, kenapa kita perlu mempelajari JavaScript?

Alasan utamanya karena JavaScript merupakan bahasa yang

penting untuk Anda kuasai jika ingin menjadi web developer, baik
itu front-end maupun back-end.

Berikut ini adalah beberapa kelebihan dari JavaScript yang dapat

Anda pertimbangkan sebelum mulai mempelajari JavaScript:

 JavaScript bahasa yang versatile

JavaScript bisa berjalan di lingkungan browser, server, bahkan

desktop. Artinya, jika Anda bisa menguasai bahasa ini, maka
skill Anda bisa digunakan di mana pun.

 Mudah dipelajari oleh pemula

JavaScript termasuk salah satu bahasa pemrograman yang

ramah bagi pemula. Anda tidak perlu menginstal software dan
lingkungan pengembangan lain yang rumit untuk memulai
membuat program dengan JavaScript. Cukup dengan browser
Anda sudah bisa menulis kode JavaScript dan menjalankannya
sekaligus.

Selain itu, sebagai salah satu bahasa pemrograman paling

populer, JavaScript memiliki komunitas yang besar pada situs
seperti StackOverflow yang siap membantu Anda jika memiliki
pertanyaan atau kesulitan dalam JavaScript.

 Potensi karir yang meyakinkan

Mengikuti perkembangan teknologi dan banyaknya bisnis yang

mulai merambah ke ranah digital, JavaScript menjadi salah
 satu skill yang paling banyak dicari di industri. Jika Anda
mencari kata kunci “JavaScript” pada laman pencarian kerja
seperti JobStreet, akan muncul hampir 1.500 lowongan
pekerjaan di Indonesia yang bisa Anda lamar.

Bukan hanya ramai peminat, pekerjaan yang berkaitan

dengan JavaScript juga dihargai cukup tinggi. Menurut data
yang diambil dari situs id.indeed.com rata-rata gaji seorang
Front End Developer adalah Rp 7.300.000 per bulan [1] dan
untuk Back End Developer adalah Rp 9.200.000 per bulan [2].

Bagaimana menurut Anda? Apakah setelah mengetahui beberapa

kelebihan dari JavaScript membuat Anda semakin semangat untuk
mulai mempelajarinya? Tunggu apalagi, yuk kita mulai belajar
JavaScript!

Pengenalan Fundamentals JavaScript

Setelah kita mengetahui apa itu JavaScript dan sejarah singkat di
baliknya, pada modul ini Anda akan mulai menuliskan kode
JavaScript pertama. Sudah tidak sabar, bukan? Yuk, kita mulai
belajar.

Pada akhir modul ini, Anda diharapkan dapat:

 Menuliskan kode JavaScript dan menampilkannya ke konsol

 Memahami penggunaan komentar pada kode
 Memahami konsep variabel pada JavaScript
 Memahami beberapa jenis tipe data pada JavaScript
 Mengenal operator pada JavaScript dan bagaimana
menggunakannya
 Memahami konsep percabangan pada pemrograman
 Memahami konsep perulangan pada pemrograman

Menulis Kode JavaScript Pertama

Menulis kode dalam suatu bahasa pemrograman sederhananya
adalah menuliskan instruksi-instruksi untuk dijalankan oleh
komputer. Kode di bawah ini merupakan instruksi bagi terminal
atau konsol untuk mencatat (log) kalimat “Hello, World!”.
 1. console.log("Hello World!");

console.log adalah kode bawaan JavaScript untuk menampilkan

pesan ke konsol, bisa berupa web konsol atau konsol
dari terminal/command prompt.

Kode atau teks yang berada di dalam tanda kurung adalah pesan
yang ingin ditampilkan. Pada contoh kode di atas, kita
menggunakan tanda kutip (“”) untuk menandakan bahwa pesan
yang ingin ditampilkan merupakan sebuah string atau teks. Kita
akan membahas mengenai tipe data pada beberapa modul ke
depan. Saat ini kita akan fokus untuk menampilkan teks terlebih
dulu. Sekarang cobalah untuk menampilkan nama Anda sendiri ke
konsol.

JavaScript membagi instruksi secara umum menjadi dua jenis,

yaitu expression dan statement.

Expression adalah unit kode yang dapat dievaluasi menjadi suatu

nilai. Untuk lebih mudahnya, perhatikan contoh kode berikut:

Sementara itu, statement adalah instruksi untuk melakukan sebuah

aksi tertentu. Aksi ini bisa termasuk membuat variabel, melakukan
perulangan, pengecekan kondisi, dll.

1. var yourName;

2. let yourAge;

3. const numberOfDays; // declaration statement

Jika Anda masih bingung untuk membedakan expression dan

statement, tidak perlu khawatir. Saat ini belum banyak kode yang
bisa kita jadikan contoh. Namun, konsep ini akan banyak kita
gunakan pada materi-materi yang akan datang. Yang perlu Anda
ingat adalah:
  Expression merupakan kode yang menghasilkan nilai.
 Statement menunjukkan aksi yang dilakukan.

Melalui materi yang kami sampaikan di atas seharusnya Anda

sudah tahu cara menampilkan teks di console. Untuk pemanasan
menuju materi lebih dalam selanjutnya, yuk mulai selesaikan
tantangan berikut.

Cobalah cetak teks "Saya mulai belajar JavaScript!" pada console

melalui teks editor yang kami sediakan di bawah ini.

Catatan: Pastikan pesan yang ditulis indentik dengan

memperhatikan penggunaan huruf besar dan kecil.

Berikut beberapa catatan dalam menggunakan editor tersebut,

1. Klik tombol Jalankan untuk melihat hasilnya.

2. Klik tombol Submit Kode untuk mengirim jawaban (kode)
agar dapat melanjutkan pembelajaran.

Comments
Pada materi sebelumnya kita telah membahas bahwa kode yang
kita tulis merupakan kumpulan instruksi yang harus dijalankan oleh
komputer. Salah satu instruksi yang penting adalah memberi tahu
komputer untuk mengabaikan perintah yang kita tulis. Instruksi
yang ditulis dalam suatu program tetapi tidak dijalankan oleh
komputer disebut “comments”.

Sebuah komentar akan dilewatkan oleh interpreter atau compiler,

sehingga tidak akan memengaruhi alur program yang kita tulis.
Komentar ini bisa digunakan sebagai dokumentasi atau penjelasan
dari kode yang kita tulis.

Terdapat dua metode untuk memberikan komentar. Pertama, untuk

memberikan komentar pada satu baris saja, kita bisa gunakan
tanda dua garis miring (//) di awal baris.
Lalu, untuk memberikan komentar lebih dari satu baris kita bisa
menggunakan tanda /* sebagai pembuka komentar dan
tanda */ untuk penutup komentar. Teks apa pun yang berada di
antara tanda tersebut akan dijadikan komentar dan tidak akan
dieksekusi.

 main.js


1.

/* Ini merupakan komentar dengan lebih dari satu baris

Teks apapun yang berada disini akan dijadikan komentar.

Ketika menggunakan ini, jangan lupa untuk menutupnya.

*/

Comments
Pada materi sebelumnya kita telah membahas bahwa kode yang
kita tulis merupakan kumpulan instruksi yang harus dijalankan oleh
komputer. Salah satu instruksi yang penting adalah memberi tahu
komputer untuk mengabaikan perintah yang kita tulis. Instruksi
yang ditulis dalam suatu program tetapi tidak dijalankan oleh
komputer disebut “comments”.

Sebuah komentar akan dilewatkan oleh interpreter atau compiler,

sehingga tidak akan memengaruhi alur program yang kita tulis.
Komentar ini bisa digunakan sebagai dokumentasi atau penjelasan
dari kode yang kita tulis.
Terdapat dua metode untuk memberikan komentar. Pertama, untuk
memberikan komentar pada satu baris saja, kita bisa gunakan
tanda dua garis miring (//) di awal baris.

 main.js

1.

// Ini merupakan komentar satu baris, kode di bawah tidak akan dijalankan

// console.log("Halo!");

Input Reset
Jalankan
Lalu, untuk memberikan komentar lebih dari satu baris kita bisa
menggunakan tanda /* sebagai pembuka komentar dan
tanda */ untuk penutup komentar. Teks apa pun yang berada di
antara tanda tersebut akan dijadikan komentar dan tidak akan
dieksekusi.

Variable
Ketika menulis sebuah program, kita memberi tahu komputer cara
memproses informasi seperti mencetak teks ke layar atau
melakukan operasi perhitungan. Untuk lebih mudah dalam
penggunaan dan pemanggilan data, kita bisa memanfaatkan
variabel. Variabel umumnya digunakan untuk menyimpan informasi
atau nilai yang akan dikelola dalam sebuah program.

Pada JavaScript setidaknya ada tiga cara untuk mendeklarasikan

sebuah variabel, yaitu menggunakan keyword var, let, dan const.
Pada versi ECMAScript 2015 (ES6) dikenalkan deklarasi variabel
dengan let dan const untuk menggantikan var yang dinilai
kontroversial dan rawan menimbulkan bug.

Dalam kelas ini, kita akan banyak menggunakan keyword let dan
const. Jika Anda penasaran kenapa var sudah tidak lagi disarankan,
silakan simak diskusi berikut.

Sekarang bagaimana caranya membuat sebuah variabel dalam

JavaScript? Cukup mudah. Ketikkan keyword let yang diikuti dengan
nama variabelnya.

1. let lastName;

Kode untuk mendeklarasikan variabel seperti di atas juga dikenal

dengan declaration statement.

Selanjutnya, Anda bisa mengisi nilai variabel di atas menggunakan

tanda sama dengan (=).

Variabel lastName di atas akan tersimpan di dalam memori

komputer.

Setiap variabel memiliki nama yang dapat kita panggil dan

gunakan. Kita dapat menamai variabel dengan nama apa pun,
tetapi pastikan penamaannya masih masuk akal dengan
konteksnya supaya maintenance kode menjadi lebih mudah.

Sebaiknya hindari penamaan variabel dengan istilah umum seperti

“data”. Gunakanlah penamaan variabel yang dapat
mendeskripsikan nilai dari variabel itu sendiri. Berikut beberapa
aturan dalam penamaan variabel yang perlu Anda ketahui:

 Harus dimulai dengan huruf atau underscore (_).

 Dapat terdiri dari huruf, angka, dan underscore (_) dengan
berbagai kombinasi.
 Tidak boleh mengandung spasi (whitespace). Jika penamaan
variabel lebih dari dua kata, tuliskan secara camelCase.
Contoh firstName, lastName, catName, dll.
 Tidak boleh mengandung karakter spesial (! . , / \ + * = dll.)
Lalu, bagaimana dengan const? Const merupakan kependekan
dari constant. Artinya, kita akan mendeklarasikan sebuah variabel
dengan const ketika ingin variabel bernilai konstan dan tidak bisa
diubah setelah diinisialisasi nilainya. Bayangkan variabel bernilai
const sebagai sebuah kotak yang ditutup dan disegel setelah diisi,
sehingga nilainya tidak bisa diubah lagi.

Jika menginisialisasi kembali nilai variabel yang menggunakan

const, kita akan mendapati eror “TypeError: Assignment to constant
variable.”

Tipe Data
Pada materi sebelumnya kita telah belajar tentang variabel untuk
menyimpan nilai. Nilai yang kita tetapkan pada variabel pasti
memiliki tipe data. Tipe data merupakan pengklasifikasian data
berdasarkan jenisnya. Pada JavaScript terdapat beberapa tipe data
sebagai berikut:

Undefined

Tipe data ini terbentuk ketika sebuah variabel tidak memiliki nilai.
Artinya, ketika kita mendeklarasikan variabel tanpa
menginisialisasikan nilainya, variabel tersebut menjadi undefined.
Contoh:

 main.js

1.

let x;

console.log(typeof(x));
 3

/* output: undefined */

let x = 10;

console.log(typeof(x))

/* output: number */

let y = 17.25;

console.log(typeof(y))

/* output: number */

BigInt

Pada JavaScript, tipe data “Number” hanya mencakup nilai dari -

(253 - 1) hingga (253 - 1). Untuk kebutuhan umum, sebenarnya nilai
tersebut sudah sangat cukup. Namun, akan ada kebutuhan tertentu
di mana kita membutuhkan cakupan nilai yang lebih besar, seperti
untuk kriptografi atau menentukan waktu hingga
presisi microsecond.

Untuk nilai di luar Number, kita bisa menggunakan tipe BigInt.

Untuk membedakan tipe BigInt dan Number, tambahkan
karakter n di akhir angka. Contohnya adalah seperti kode di bawah
ini. Bandingkan dengan yang bertipe Number.

Strings
Tipe data selanjutnya adalah string yang merupakan sebuah teks.
Untuk menetapkan nilai sebagai string pada variabel gunakan
tanda petik satu (‘) atau petik dua (“) di antara teksnya. Contohnya:

Tidak ada perbedaan antara menggunakan petik satu atau petik

dua. Anda dapat menggunakan tanda petik secara bergantian,
khususnya jika Anda memiliki teks yang mengandung tanda petik.

Tentunya kode di atas akan menghasilkan eror. Solusinya,

gunakan backslash(\) untuk mengurangi ambiguitas dalam tanda
petik. Mekanisme ini juga dikenal dengan nama escape string.
Sehingga kode di atas akan menjadi seperti berikut:

1. const answer = '"I think it\'s awesome!" he answered

confidently';

Backslash sebelum tanda petik akan

memberitahukan interpreter bahwa itu hanyalah tanda petik dan
tidak boleh ditafsirkan sebagai pembatas string. Selain tanda petik,
backslash juga berguna untuk mengabaikan simbol lain yang
menimbulkan ambigu di dalam string, contohnya seperti backslash
itu sendiri.

1. console.log("Windows path: C:\\Program Files\\MyProject");

Pada String, kita juga dapat menggunakan operator plus (+).

Operator tersebut berfungsi untuk menggabungkan dua teks yang
terpisah menjadi satu buah teks. Contohnya seperti ini:

Boolean

Boolean hanya memiliki dua nilai, yaitu true atau false. Tipe data
ini menjadi kunci utama dalam penentuan logika. Kita akan banyak
menggunakannya nanti dalam materi if/else statement. Untuk
menetapkan nilai boolean pada variabel, gunakan
keyword true atau false seperti di bawah ini.
Kita juga bisa menggunakan operator komparasi seperti lebih dari
(>) atau kurang dari (<). Contohnya:

 main.js


1.

const a = 10;

const b = 12;

let isGreater = a > b;

let isLess = a < b;

console.log(isGreater);

console.log(isLess);

10

/* output:

11
false

12

true

13

*/

Null

Tipe berikutnya adalah null. Serupa dengan undefined, namun null

perlu diinisialisasikan pada variabel. Null biasa digunakan sebagai
nilai sementara pada variabel, tapi sebenarnya nilai tersebut “tidak
ada”.

Terkadang kita perlu membuat sebuah variabel, namun kita belum

memerlukan nilai apa-apa dan tidak ingin terikat oleh tipe data apa
pun. Nah, daripada kita tidak menetapkan nilai apa pun (variabel
akan undefined) sebaiknya kita beri nilai null pada variabel tersebut
dan ubah nanti ketika kita membutuhkannya.

Untuk menetapkan null pada variabel, kita dapat gunakan keyword

null ketika variabel tersebut diinisialisasi.

Symbol

Symbol adalah tipe data baru yang dikenalkan pada ES6. Tipe data
Symbol digunakan untuk menunjukkan identifier yang unik. Ketika
membuat Symbol, kita bisa memberikan deskripsi atau nama
symbol seperti ini:

Symbol disebut sebagai identifier yang unik karena meskipun kita

membuat dua variabel symbol dengan nama atau deskripsi yang
sama, kedua nilainya tetap dianggap berbeda. Contohnya lihat kode
berikut:
const id1 = Symbol("id");

const id2 = Symbol("id");

console.log(id1 == id2);

/* output

false

*/

Operator
Pada materi ini kita akan mempelajari tentang operator yang
terdapat pada JavaScript. Operator dalam bahasa pemrograman
sendiri adalah simbol yang memberi tahu interpreter untuk
melakukan operasi seperti matematika, relasional, atau logika
untuk memberikan hasil tertentu.

Assignment Operator

Dari contoh kode yang kita gunakan sebelumnya, sebenarnya kita

sudah menggunakan assignment operator. Operator ini digunakan
untuk memberikan nilai pada variabel.

Pada dasarnya operator ini adalah tanda sama dengan (=), di mana
tanda ini digunakan untuk menginisialisasi nilai pada variabel.
Tempatkan variabel yang ingin diberi nilai di sebelah kiri,
sementara nilainya di sebelah kanan. Di antara keduanya terdapat
operator assignment.

1. x = y;

Expression di atas berarti kita menginisialisasikan nilai y pada

variabel x, sehingga nilai x sekarang memiliki nilai yang sama
dengan y.

Ada beberapa assignment operator tambahan lain dalam

menginisialisasikan nilai pada variabel. Kita bisa menyebutnya
sebagai shortcut dalam menentukan nilai. Contohnya:
let x = 10;

let y = 5

x += y;

console.log(x);

/* output

15

*/

Comparison Operator

Sekarang kita sudah mengetahui bagaimana cara menyimpan nilai

pada sebuah variabel. Nah, selanjutnya kita akan belajar mengenai
operator komparasi sebagai logika dasar dalam membandingkan
nilai pada JavaScript.

Terdapat serangkaian karakter khusus yang disebut dengan

operator pembanding/komparasi yang dapat mengevaluasi dan
membandingkan dua nilai. Berikut daftar operator dan fungsinya:

Operator Fungsi
== Membandingkan kedua nilai, tetapi mengabaikan tipe data.
!= Membandingkan kedua nilai haruslah tidak sama, tetapi
mengabaikan tipe data.
=== Membandingkan kedua nilai beserta tipe data.
!== Membandingkan kedua nilai beserta tipe data haruslah tidak
sama.
> Membandingkan dua nilai apakah nilai pertama lebih dari nilai
kedua.
>= Membandingkan dua nilai apakah nilai pertama lebih atau sama
dengan nilai kedua.
< Membandingkan dua nilai apakah nilai pertama kurang dari nilai
kedua.
 Operator Fungsi
<= Membandingkan dua nilai apakah nilai pertama kurang atau
sama dengan nilai kedua.
Ketika kita melakukan perbandingan antara dua nilai, JavaScript
akan mengevaluasi kedua nilai tersebut dan mengembalikan
boolean dengan nilai hasil perbandingan tersebut, baik false atau
true. Berikut contohnya:

let a = 10;

let b = 12;

console.log(a < b);

console.log(a > b);

/* output

true

false

*/

Perbedaan antara “Sama” dan “Identik”

Dalam operator komparasi di JavaScript, hal yang menjadi sedikit
“tricky” adalah membedakan antara “sama” (==) dan “identik”
(===).

Kita sudah mengetahui bahwa setiap nilai pasti memiliki tipe data
baik itu number, string atau boolean. Contohnya sebuah string “10”
dan number 10 merupakan hal yang serupa, tetapi keduanya tidak
benar-benar sama.
Hal inilah yang membedakan antara sama dan identik pada
JavaScript. Jika kita ingin membandingkan hanya dari kesamaan
nilainya kita bisa gunakan == tapi jika kita ingin membandingkan
dengan memperhatikan tipe datanya kita gunakan ===.

Contohnya seperti berikut:

const aString = '10';

const aNumber = 10

console.log(aString == aNumber) // true, karena nilainya sama-

sama 10

console.log(aString === aNumber) // false, karena walaupun

nilainya sama, tetapi tipe datanya berbeda

/* output

true

false

*/

Logical Operator

Terdapat beberapa operator lain yang dapat kita gunakan untuk

menetapkan logika yang lebih kompleks, yakni dengan logical
operators. Dengan logical operator, kita dapat menggunakan
kombinasi dari dua nilai boolean atau bahkan lebih dalam
menetapkan logika.

Pada JavaScript terdapat tiga buah karakter khusus yang berfungsi

sebagai logical operator. Berikut macam-macam logical operator
dan fungsinya:
 Operator Deskripsi
&& Operator dan (and). Logika akan menghasilkan
semua kondisi terpenuhi (bernilai true).
|| Operator atau (or). Logika akan menghasilkan n
ada salah satu kondisi terpenuhi (bernilai true).
! Operator tidak (not). Digunakan untuk membal
kondisi.
Berikut contoh penerapannya pada JavaScript:

 main.js


1.

let a = 10;

let b = 12;

/* AND operator */

console.log(a < 15 && b > 10); // (true && true) -> true

console.log(a > 15 && b > 10); // (false && true) -> false

/* OR operator */

console.log(a < 15 || b > 10); // (true || true) -> true

 10

console.log(a > 15 || b > 10); // (false || true) -> true

11

12

/* NOT operator */

13

console.log(!(a < 15)); // !(true) -> false

14

console.log(!(a < 15 && b > 10)); // !(true && true) -> !(true) -> false

15

16

/* output

17

true

18

false

19

true

20

true

Input Reset
Jalankan
Mungkin sebagian dari kita bertanya, sebenarnya apa kegunaan
dari nilai boolean selain hanya menampilkan nilai true dan false
saja? Pada pembahasan tipe data sudah pernah disebutkan bahwa
boolean merupakan salah satu kunci dari logika pemrograman,
karena boolean dapat mengontrol bagaimana alur program kita
akan berjalan.

Lantas bagaimana cara boolean mengontrol sebuah aliran

program? Pada materi selanjutnya, kita akan membahas mengenai
if/else statement yang dapat mengontrol flow pada program,
tentunya pada penggunaan statement boolean ini sangat berguna.

If/Else Statement
Setiap hari kita melakukan perhitungan dan perbandingan guna
membuat keputusan, apa pun itu. Contohnya, apakah perlu
mencuci kendaraan ketika cuaca sedang cerah? Apa saja
transportasi online yang bisa dipesan ketika hujan untuk sampai di
tempat tujuan?

Ketika mengembangkan sebuah program, kita akan bertemu

dengan alur bercabang tergantung pada kondisi yang terjadi. Untuk
mengakomodasi dan mengecek sebuah kondisi dalam JavaScript,
kita menggunakan kata kunci if.

Statement if akan menguji suatu kondisi. Jika kondisi bernilai true,

maka blok kode di dalamnya akan dijalankan. Sebaliknya, jika
bernilai false, maka proses yang ditentukan akan dilewatkan.

Flowchart di atas jika diterjemahkan menjadi kode, akan menjadi

seperti berikut:

const isRaining = true;

console.log("Persiapan sebelum berangkat kegiatan.");

if (isRaining) {

console.log("Hari ini hujan. Bawa payung.");

console.log("Berangkat kegiatan.");

/* output:

Persiapan sebelum berangkat kegiatan.

Jika Anda mengubah nilai isRaining menjadi false, maka kode di

dalam blok kode if akan dilewatkan. Sehingga program Anda tidak
akan mengingatkan untuk membawa payung.

Lalu bagaimana jika Anda ingin melakukan operasi lain ketika

kondisi bernilai false? Jawabannya adalah statement else. Pada
contoh kode berikut kita akan melakukan pengecekan kondisi
menggunakan operator perbandingan.

let x = 50;

if(x > 70) {

console.log(x);

} else {

console.log("Nilai kurang dari 70");

}
/* output

Nilai kurang dari 70

Terdapat variabel x dengan nilai 50, kemudian kita bertanya, “Hai

JavaScript! Apakah x lebih dari 70?” Jika kondisi tersebut benar,
maka kita dapat memerintahkan JavaScript untuk menampilkan
nilainya. Jika salah, kita perintahkan JavaScript untuk menampilkan
teks “Nilai kurang dari 70”.

Kita juga bisa mengecek beberapa kondisi sekaligus dengan

menggabungkan else dan if. Contohnya adalah seperti program
berikut:

 main.js

let language = "French";

let greeting = "Selamat Pagi"

if(language === "English") {

greeting = "Good Morning!";

} else if(language === "French") {

greeting = "Bonjour!"

} else if(language === "Japanese") {

greeting = "Ohayou Gozaimasu!"

}
Pengecekan kondisi akan dilakukan dari statement if paling awal.
Sehingga, ketika nilai language adalah “French”, maka pengecekan
untuk language === “Japanese” tidak akan dilakukan.

Selain if statement di atas, JavaScript juga mendukung ternary

operator atau conditional expressions. Dengan ini, kita bisa
menuliskan if-else statement hanya dalam satu baris.

// condition ? true expression : false expression

const isMember = false;

const discount = isMember ? 0.1 : 0;

console.log(`Anda mendapatkan diskon sebesar ${discount *

100}%`)

/* output

Anda mendapatkan diskon sebesar 0%

*/

Ternary operator membutuhkan tiga operand. Sebelum tanda tanya

(?) berisi kondisi yang ingin kita evaluasi. Kemudian diikuti
dengan expression apabila nilai kondisinya benar sebelum tanda
titik dua. Terakhir adalah expression yang dieksekusi ketika
kondisinya salah. Karena merupakan conditional expression, maka
operand kedua dan ketiga harus mengembalikan nilai.

Truthy & Falsy

Di dalam if statement kita perlu memasukkan expression yang akan

dievaluasi. Umumnya, expression tersebut mengembalikan nilai
boolean untuk menentukan kondisi true atau false. Lalu bagaimana
jika kita menuliskan expression yang tidak mengembalikan nilai
boolean? Jawabannya bisa.

Setiap nilai pada JavaScript pada dasarnya juga mewarisi sifat

boolean. Nilai ini dikenal dengan truthy atau falsy. Nilai truthy
berarti nilai yang ketika dievaluasi akan menghasilkan nilai true,
begitu pula falsy bernilai false. Jadi manakah yang termasuk truthy
dan falsy? Selain nilai boolean false, tipe data atau nilai yang
dianggap falsy, antara lain:

 Number 0
 BigInt 0n
 String kosong seperti “” atau ‘’
 null
 undefined
 NaN, atau Not a Number

Selain contoh di atas maka nilainya adalah truthy dan ketika

dievaluasi ke dalam if statement akan bernilai true. Berikut ini
contohnya dalam kode:

let name = "";

if (name) {

console.log(`Halo, ${name}`);

} else {

console.log("Nama masih kosong");

/* output:

Nama masih kosong

*/

Switch Case Statement

Sebelumnya kita telah mempelajari bagaimana percabangan logika
menggunakan if statement. Selain if, JavaScript juga
mendukung switch statement untuk melakukan pengecekan banyak
kondisi dengan lebih mudah dan ringkas.

1. switch (expression) {

2. case value1:

3. // do something

4. break;

5. case value2:

6. // do something

7. break;

8. ...

9. ...

10. default:

11. // do something else

12. }

Tanda kurung setelah keyword switch berisi variabel atau

expression yang akan dievaluasi. Kemudian untuk setiap kondisi
yang mungkin terjadi, kita masukkan keyword case diikuti dengan
nilai yang valid. Jika kondisi pada case sama dengan variabel pada
switch, maka blok kode setelah titik dua (:) akan dijalankan.
Keyword break digunakan untuk keluar dari proses switch. Terdapat
satu case bernama default yang memiliki fungsi yang sama dengan
keyword else pada control flow if-else. Jika tidak ada nilai yang
sama dengan variabel pada switch, maka blok kode ini akan
dijalankan.

Berikut ini adalah contoh kode dari materi if-else yang dikonversi
menjadi statement switch:

let language = "French";

let greeting = null;

switch (language) {

case "English":

greeting = "Good Morning!";

break;

case "French":

greeting = "Bonjour!";

break;

case "Japanese":

greeting = "Ohayou Gozaimasu!";

break;

default:

greeting = "Selamat Pagi!";

}
Loop
Ketika menulis program komputer, akan ada situasi di mana kita
perlu melakukan hal yang sama berkali-kali. Misalnya kita ingin
menampilkan semua nama pengguna yang terdaftar di aplikasi
atau sesederhana menampilkan angka 1 sampai 10. Tentunya tidak
praktis jika kita menulis kode seperti berikut:

1. console.log(1);

2. console.log(2);

3. console.log(3);

4. console.log(4);

5. console.log(5);

6. console.log(6);

7. console.log(7);

8. console.log(8);

9. console.log(9);

10. console.log(10);

Bagaimana jika kita perlu menampilkan angka 1 sampai 100? Sudah

terbayang repotnya, bukan? Maka dari itu kita perlu mempelajari
teknik yang dapat mengatasi permasalahan tersebut, teknik ini
disebut dengan looping. JavaScript memiliki banyak opsi untuk
melakukan looping atau perulangan kode, antara lain:

For loop
Dari beberapa cara melakukan proses loop pada JavaScript, “for”
merupakan salah satu cara yang banyak digunakan. Struktur dasar
dari for tampak seperti berikut:

1. for(inisialisasi variabel; test kondisi; perubahan nilai

variabel) {

2. // do something

3. }

Berikut ini contoh penerapannya secara nyata:

 main.js


1.

for(let i = 0; i < 5; i++) {

console.log(i);

/* output

1
 8

10

ebih ringkas, bukan? Mungkin kode tersebut sulit dipahami, jadi

mari kita bahas sedikit demi sedikit. Terdapat tiga bagian utama
dalam sintaks for di atas:

 Pertama, variabel i sebagai index iterasi. Pada variabel ini kita

menginisialisasi nilai awal dari perulangan.
 Kedua, operasi perbandingan. Pada bagian ini, JavaScript akan
melakukan pengecekan kondisi apakah perulangan masih
perlu dilakukan. Jika bernilai true, maka kode di dalam blok for
akan dijalankan.
 Ketiga, increment/decrement. Di sini kita melakukan
penambahan atau pengurangan variabel iterasi. Jadi, pada
contoh di atas variabel i akan ditambah dengan 1 di setiap
akhir perulangan. Perubahan nilai ini penting karena jika kita
mengubah nilainya, proses perulangan dapat terus berjalan
selama kondisinya terpenuhi.

JIka diartikan, maka kode di atas bisa dimaknai dengan “Jika i

kurang dari 5, maka tampilkan nilai i.”

For of loop

Cara lain dalam melakukan looping adalah menggunakan for..of.

For of mulai hadir pada ECMAScript 2015 (ES6). Cara ini jauh lebih
sederhana dan modern dibanding for loop biasa. Sintaks dasar dari
for of loop adalah seperti ini:
 1. for(arrayItem of myArray) {

2. // do something

3. }

4. Yup, for of tidak membutuhkan banyak statement untuk

melakukan looping pada array. Penjelasan tentang array akan
lebih detail dibahas pada modul berikutnya. Sebagai
permulaan, kita bisa menganggap array sebagai kumpulan
nilai yang disimpan dalam satu variabel.

5. Dengan for..of nilai tiap array akan diinisialisasi pada variabel

baru yang kita tentukan pada tiap proses looping-nya. Jumlah
proses looping-nya pun akan menyesuaikan dengan ukuran
dari array. Sederhananya seperti kita melakukan perintah “Hei
JavaScript! Lakukan perulangan pada myArray, akses tiap
nilainya, dan simpan pada variabel arrayItem”. Pada proses
looping kita gunakan variabel arrayItem untuk mengakses tiap
nilai dari item myArray.

6. Agak sulit memang menjelaskan dengan kata-kata, mari kita

terjemahkan dalam kode secara langsung.

let myArray = ["Luke", "Han", "Chewbacca", "Leia"];

for(const arrayItem of myArray) {

console.log(arrayItem)

/* output

Luke

Han

Chewbacca
While and do-while

Metode lain untuk melakukan looping adalah dengan

statement while. Sama seperti for, instruksi while mengevaluasi
ekspresi boolean dan menjalankan kode di dalam blok while ketika
bernilai true.

Untuk menampilkan angka 1 sampai 100 dengan while kita bisa

menulis kode seperti berikut:

let i = 1;

while (i <= 100) {

console.log(i);

i++;

Bisa dilihat pada kode di atas bahwa looping dengan while tidak
memiliki ketergantungan dengan variabel iterasi seperti pada for
loop. Karena itu, meskipun while dapat melakukan perulangan yang
sama dengan for, while lebih cocok digunakan pada kasus di mana
kita tidak tahu pasti berapa banyak perulangan yang diperlukan.

Bentuk lain dari while adalah perulangan do-while.

let i = 1;

do {
 console.log(i);

i++;

} while (i <= 100);

Kondisi pada while akan dievaluasi sebelum blok kode di dalamnya

dijalankan, sedangkan do-while akan mengevaluasi boolean
expression setelah blok kodenya berjalan. Ini artinya kode di dalam
do-while akan dijalankan setidaknya satu kali.

Infinite loops

Ketika menerapkan perulangan pada program, ada satu kondisi

yang perlu kita hindari yaitu infinite loop. Infinite loop atau endless
loop adalah kondisi di mana program kita stucked di dalam
perulangan. Ia akan berjalan terus hingga menyebabkan crash pada
aplikasi dan komputer kecuali ada intervensi secara eksternal,
seperti mematikan aplikasi.

Kode berikut ini adalah contoh di mana kondisi infinite loop dapat
terjadi:

 While

 For

1. let i = 1;

2.

3. while (i <= 5) {

4. console.log(i);

5. }
 6. Dapatkah Anda menemukan apa yang salah dari kode di atas
sehingga terjadi infinite loop?

7. Jawabannya adalah karena variabel i selalu bernilai 1. Alhasil,

kondisi i <= 5 akan selalu bernilai true yang mengakibatkan
aplikasi akan terus mencetak 1 ke konsol sehingga
mengalami crash.

Pengenalan Struktur Data

Sebelumnya kita sempat mempelajari tentang variabel dan tipe
data yang ada di JavaScript. Tipe data yang kita bahas sebelumnya
termasuk dalam kategori tipe data primitif yang hanya bisa
menyimpan satu nilai.

Pada modul ini kita akan membahas tentang tipe data JavaScript
yang dapat menyimpan struktur data yang lebih kompleks.
Beberapa jenis struktur data yang akan kita pelajari, antara lain:

 Object
 Array
 Map
 Set

Sudah siap? Mari kita lanjut ke materi selanjutnya!

Object
Kali ini kita akan berkenalan dengan tipe data object. Sebuah tipe
data yang sangat berguna dalam pengembangan aplikasi dengan
JavaScript. Object mampu menyimpan nilai dari beragam tipe data
dan membentuk data yang lebih kompleks.
Untuk menetapkan objek pada sebuah variabel kita gunakan tanda
kurung kurawal {}.

1. const user = {};

Object berisi pasangan key dan value yang juga dikenal

dengan property. Key berperan mirip seperti nama variabel yang
menyimpan sebuah nilai. Sementara, value berisi nilai dengan tipe
data apa pun termasuk objek lain. Key dan value di dalam object
dituliskan seperti berikut:

1. let object = {key1: "value1", key2: "value2", key3: "value3"}

Key harus berupa string dan dituliskan sebelum titik dua (:), lalu
diikuti dengan value-nya. Meskipun key merupakan string, kita tidak
perlu menuliskan tanda petik kecuali ada karakter khusus seperti
spasi.

Tanda koma pada properti terakhir bersifat opsional. Namun, jika

tanda koma tersebut ditulis akan lebih memudahkan ketika kita
ingin memindah, mengubah, atau menghapus properti.

Satu object dapat memiliki beberapa pasang key-value yang

dipisahkan dengan tanda koma (,).

1. const user = {firstName: "Luke", lastName: "Skywalker", age: 19,

isJedi: true};

Dalam menuliskan objek, baris baru tidaklah penting dan tidak akan
berpengaruh apa pun. Sehingga lebih baik setiap kita menetapkan
key-value buatlah baris baru untuk memisahkan antar nilainya. Hal
ini akan memudahkan kita dalam membaca dan memahami
struktur data dari sebuah object.
 1. const user = {

2. firstName: "Luke",

3. lastName: "Skywalker",

4. age: 19,

5. isJedi: true,

6. };

Kemudian untuk mengakses nilai dari properti object, kita dapat

memanggil nama object lalu tanda titik dan diikuti nama
propertinya. Contoh:

const user = {

firstName: "Luke",

lastName: "Skywalker",

age: 19,

isJedi: true,

};

console.log(`Halo, nama saya ${user.firstName} $

{user.lastName}`);

console.log(`Umur saya ${user.age} tahun`);

Selain dot operator, kita juga bisa mengakses properti dari object
menggunakan bracket atau tanda kurung siku.

1. user[“home world”];
Untuk mengakses key yang memiliki spasi atau karakter khusus
lainnya maka kita perlu menggunakan bracket seperti di atas.

 main.js

const user = {

firstName: "Luke",

lastName: "Skywalker",

age: 19,

isJedi: true,

"home world": "Tattooine"

};

console.log(`Halo, nama saya ${user.firstName} $

{user.lastName}`);

console.log(`Umur saya ${user.age} tahun`);

console.log(`Saya berasal dari ${user["home world"]}`);

/* output

Halo, nama saya Luke Skywalker

Umur saya 19 tahun

Saya berasal dari Tattooine

*/
Tunggu dulu. Object spaceship dideklarasikan sebagai const, tetapi
kenapa kita bisa mengubah nilainya?

Yang perlu diperhatikan adalah mengubah nilai berbeda dengan

menginisialisasi ulang nilai. Ketika membuat sebuah object, kita
tidak terikat dengan properti di dalamnya sehingga kita masih bisa
memodifikasi nilainya. Berbeda jika kita menginisialisasi ulang
variabel dari object.

Array
Array merupakan tipe data yang dapat mengelompokkan lebih dari
satu nilai dan menempatkannya dalam satu variabel. Contoh:

let myArray = ["Cokelat", 42.5, 22, true, "Programming"];

console.log(myArray);

/* output:

[ 'Cokelat', 42.5, 22, true, 'Programming' ]

*/

Perbedaan array dengan object adalah data pada array disusun

secara berurutan dan diakses menggunakan index. Untuk
mengakses nilai di dalam array, kita gunakan tanda kurung
siku [] yang di dalamnya berisi angka yang merupakan posisi nilai
yang ingin diakses.

1. console.log(myArray[1]);
Jika Anda mengira bahwa konsol akan menampilkan teks ‘Cokelat’,
maka tebakan Anda kurang tepat. Dalam sebuah array, indeks
dimulai dari 0, sehingga ketika kita mengakses data
pada myArray yang berada pada indeks ke-1 artinya data tersebut
merupakan data pada posisi ke-2. Jadi nilai yang akan ditampilkan
pada konsol adalah 42.5.

let myArray = ["Cokelat", 42.5, 22, true, "Programming"];

console.log(myArray[1]);

/* output:

42.5

*/

Lalu, apa yang akan terjadi jika kita berusaha mengakses index di
luar ukuran array-nya? Jika kita mengakses nilai array lebih
dari index-nya, maka hasilnya akan undefined. Index terakhir array
selalu jumlah nilai array - 1.

let myArray = ["Cokelat", 42.5, 22, true, "Programming"];

console.log(myArray[0]);

console.log(myArray[1]);

console.log(myArray[2]);

console.log(myArray[3]);

console.log(myArray[4]);
console.log(myArray[5]);

console.log("Panjang nilai myArray adalah " + myArray.length +

".");

/* output:

Cokelat

42.5

22

true

Programming

undefined

Panjang nilai myArray adalah 5.

*/

Sejauh ini kita baru belajar menginisialisasi dan mengakses elemen

dari sebuah array. Pastinya Anda bertanya, “Bagaimana kita
memanipulasi data pada array tersebut?”

Nah, untuk menambahkan data ke dalam array, kita bisa

menggunakan metode push(). Fungsi push ini akan menambahkan
data di akhir array.

Sedangkan untuk mengeluarkan data atau elemen terakhir dari

array, kita bisa gunakan metode pop().

const myArray = ["Cokelat", 42.5, 22, true, "Programming"];

myArray.pop();

console.log(myArray);

/* output

[ Cokelat, 42.5, 22, true ]

*/

Metode lain yang bisa kita gunakan untuk memanipulasi data pada
array adalah shift() dan unshift(). Metode shift() digunakan untuk
mengeluarkan elemen pertama dari array,
sementara unshift() digunakan untuk menambahkan elemen di awal
array.

const myArray = ["Cokelat", 42.5, 22, true, "Programming"];

myArray.shift();

myArray.unshift("Apple");

console.log(myArray);

/* output

[ 'Apple', 42.5, 22, true, 'Programming' ]

*/
Lalu bagaimana jika kita ingin menghapus data dari array? Sama
seperti object, kita bisa menggunakan keyword delete.

const myArray = ["Cokelat", 42.5, 22, true, "Programming"];

delete myArray[1];

console.log(myArray);

/* output

[ 'Cokelat', <1 empty item>, 22, true, 'Programming' ]

*/

Namun, perhatikan di sini bahwa keyword delete hanya menghapus

data pada index yang ditentukan lalu membiarkan posisi tersebut
kosong. Untuk menghapus elemen, gunakan metode splice() seperti
ini:

Selain untuk menghapus elemen pada array, splice() juga dapat

digunakan untuk menambahkan elemen pada array tersebut.
Caranya dengan memberikan argumen ke-3 (atau selanjutnya,
bersifat variadic) sebagai nilai yang akan dimasukan pada index
yang diberikan pada argumen pertama.

const month = ['January', 'March', 'April', 'May'];

console.log('before splice: ', month);

month.splice(1, 0, 'February');

console.log('after splice: ', month);

Spread Operator
Masih terkait dengan array, ES6 memiliki fitur menarik untuk
membantu pengelolaan array menjadi lebih mudah, yaitu spread
operator.

1. const favorites = ["Seafood", "Salad", "Nugget", "Soup"];

2.

3. console.log(favorites);

4.

5. /* output

6. [ 'Seafood', 'Salad', 'Nugget', 'Soup' ]

7. */

Pada kode tersebut hasil yang dicetak adalah sebuah array

(ditunjukkan dengan tanda [ ]), karena memang kita mencetak nilai
favorites itu sendiri. Nah, dengan menggunakan spread operator
kita dapat menyebarkan nilai-nilai dalam array tersebut.

 main.js

const favorites = ["Seafood", "Salad", "Nugget", "Soup"];

console.log(...favorites);

/* output

Seafood Salad Nugget Soup

*/

Terlihat perbedaannya? Mengapa bisa demikian? Spread operator

bekerja seperti meleburkan nilai array menjadi beberapa elemen
sesuai panjang nilai array-nya. Sehingga jika kita menuliskan kode
seperti ini:

1. console.log(...favorites);

Sama seperti kita menuliskan kode seperti ini:

1. console.log(favorites[0], favorites[1], favorites[2],

favorites[3]);

Spread operator dapat digunakan untuk menggabungkan dua buah

array ke dalam array baru. Jika tidak menggunakan spread operator
ini maka hasilnya akan seperti ini:

const favorites = ["Seafood", "Salad", "Nugget", "Soup"];

const others = ["Cake", "Pie", "Donut"];

const allFavorites = [favorites, others];

console.log(allFavorites);

/* output

[ 'Seafood', 'Salad', 'Nugget', 'Soup' ],

[ 'Cake', 'Pie', 'Donut' ]

*/

Nilai array tidak akan tergabung. Alih-alih menggabungkan nilainya,

variabel allFavorites menjadi array baru yang menampung dua
array di dalamnya. Nah, lantas bagaimana jika kita mencoba
menggunakan spread operator?

const favorites = ["Seafood", "Salad", "Nugget", "Soup"];

const others = ["Cake", "Pie", "Donut"];

const allFavorites = [...favorites, ...others];

console.log(allFavorites);
/* output

[ 'Seafood', 'Salad', 'Nugget', 'Soup', 'Cake', 'Pie', 'Donut' ]

*/

Destructuring Object & Array

Iterasi object dan array adalah dua hal yang paling banyak
digunakan dalam mengelola data di JavaScript. JSON (JavaScript
Object Notation) merupakan format data paling populer yang
digunakan dalam transaksi data saat ini.

1. [

2. {

3. "id": 14,

4. "title": "Belajar Fundamental Aplikasi Android",

5. "author": "Google ATP"

6. },

7. {

8. "id": 51,

9. "title": "Belajar Membuat Aplikasi Android untuk Pemula",

10. "author": "Google ATP"

11. },

12. {

13. "id": 123,

14. "title": "Belajar Dasar Pemrograman Web",

15. "author": "Dicoding Indonesia"

16. },
 17. {

18. "id": 163,

19. "title": "Belajar Fundamental Front-End Web

Development",

20. "author": "Dicoding Indonesia"

21. }

22. ]

Sesuai namanya “spread”, fitur ini digunakan untuk menyebarkan

nilai array atau lebih tepatnya iterable object menjadi beberapa
elemen. Spread operator dituliskan dengan tiga titik (...). Mari kita
lihat contoh kode berikut:

Destructuring Object
Penulisan sintaksis destructuring object pada ES6 menggunakan
object literal ({ }) di sisi kiri dari operator assignment.

const profile = {
2
firstName: "John",
3
lastName: "Doe",
 4
age: 18
5
}
6

7
const { firstName, lastName, age } = profile;
8

9
console.log(firstName, lastName, age);
10

11
/* output:
12
John Doe 18
13
*/

Pada contoh di atas tanda kurung kurawal merepresentasikan

object yang akan didestrukturisasi. Di dalamnya
terdapat firstName, lastName, dan age yang merupakan variabel
untuk menyimpan nilai properti dari object profile. Kita juga perlu
perhatikan penamaan variabelnya. Pastikan penamaannya sama
seperti properti object-nya. Melalui nama variabel inilah nilai-nilai
properti object akan dimasukkan secara otomatis. Sehingga
variabel firstName akan berisikan
nilai profile.firstName, lastName akan berisikan
nilai profile.lastName, begitu juga dengan variabel age akan
berisikan nilai profile.age.

Dalam destructuring object, kita bisa menentukan salah satu nilai

yang ingin kita desktrukturisasikan. Sehingga kita tidak perlu
membuat variabel sebanyak properti yang dimiliki objeknya,
contohnya:

Saat melakukan destructuring assignment, kita perlu menuliskan

destructuring object di dalam tanda kurung. Jika tidak menuliskan
tanda kurung, tanda kurung kurawal akan membuat JavaScript
mengira kita membuat block statement, sementara block statement
tidak bisa berada pada sisi kiri assignment.
 1. // tidak bisa karena JavaScript mengira kita membuat block

statement

2. // block statement tidak bisa berada pada sisi kiri assignment

3. { firstName, age } = profile;

Destructuring Array
Destructuring array serupa dengan destructuring object. Object
menggunakan tanda kurung kurawal { } sedangkan array
menggunakan tanda kurung siku [ ]. Perbedaan lainnya adalah
destructuring array bekerja berdasarkan posisi daripada penamaan
propertinya. Berikut contoh dari destructuring array pada ES6:

Map
Map adalah tipe data yang menyimpan koleksi data dengan format
key-value layaknya Object. Yang membedakan adalah Map
memperbolehkan key dengan tipe data apa pun, dibandingkan
Object yang hanya mengizinkan key bertipe String atau Symbol.

Untuk mendefinisikan Map gunakan constructor seperti di bawah

ini:

Set
Struktur data yang akan kita bahas berikutnya adalah Set. Set
sederhananya merupakan kumpulan nilai (set of values). Hal yang
membedakan Set dengan struktur data yang lain adalah data pada
Set tidak berurutan dan juga tidak diindeks. Selain itu, data di
dalam Set juga bersifat unik dan tidak ada duplikasi. Perhatikan
contoh deklarasi Set di bawah ini:
  main.js

WeakMap & WeakSet

WeakMap merupakan varian dari Map yang mendukung garbage
collection. Garbage collection adalah proses di mana interpreter
JavaScript mengambil kembali memori yang tidak lagi “dapat
dijangkau” dan tidak dapat digunakan oleh program [ 3]. Garbage
collection di JavaScript dilakukan secara otomatis dan bukan
menjadi urusan dari developer.

Yang dimaksud weak dalam WeakMap adalah referensi terhadap

nilai yang disimpan. Apabila suatu nilai yang disimpan di WeakMap
sudah tidak terjangkau atau tidak bisa lagi diakses, maka referensi
ke memorinya akan dihapus.

Berikut ini adalah beberapa hal yang membedakan antara Map dan
WeakMap:

 Key dari WeakMap harus berupa object atau array. Nilai primitif
tidak bisa digunakan sebagai key karena tidak mendukung
garbage collection.
 WeakMap memiliki method get(), set(), has(), dan delete().
Namun, WeakMap tidak termasuk kategori iterable sehingga
tidak memiliki method keys(), values(), atau forEach().
 WeakMap juga tidak memiliki property size. Ini karena ukuran
WeakMap dapat berubah karena proses garbage collection.

Masih bingung? Mari kita lihat contoh kode dan perbedaan antara
Map dan WeakMap.
Pengenalan Function
Pada modul ini salah satu konsep yang tidak kalah penting pada
JavaScript, yaitu Function.

Di sini kita akan mempelajari beberapa hal terkait function, seperti:

 Apa itu function?

 Tujuan dan alasan kenapa kita menggunakan function.
 Bagaimana membuat function pada JavaScript.

Mari kita mulai!

Declaring Function
Fungsi merupakan bagian penting dalam bahasa pemrograman.
Tanpa sadar, sebenarnya kita sudah menggunakan sebuah fungsi
pada contoh kode yang ada
sebelumnya. log() pada console.log() merupakan sebuah function
yang berguna untuk menampilkan data pada konsol. Tapi
sebenarnya apa itu function? Bagaimana ia bisa bekerja?

Mirip dengan fungsi pada matematika, fungsi dalam pemrograman

juga digunakan untuk menghasilkan output berdasarkan input
tertentu.
Namun, fungsi juga bisa digunakan sebagai blok kode atau
prosedur yang dapat digunakan secara berulang. Dalam arti lain,
kita dapat berpikir bahwa function merupakan sebuah variabel yang
berisi blok logika. Blok logika tersebut akan dieksekusi ketika
variabelnya dipanggil.

Semua fungsi memiliki struktur yang sama. Fungsi dideklarasikan

dengan keyword function dan nama fungsinya. Nama fungsi selalu
diikuti dengan tanda kurung (parentheses) tanpa spasi, lalu
terdapat sepasang kurung kurawal yang berisi logika dari fungsi
tersebut.

Terkadang di dalam tanda kurung kita membutuhkan sebuah

informasi tambahan yang disebut dengan parameter. Parameter
merupakan data yang digunakan pada fungsi untuk diproses di
dalamnya. Sebagai contoh, fungsi console.log() dapat
menerima argument berupa string atau data lain untuk ditampilkan
ke konsol.

Berikut merupakan ilustrasi dari struktur fungsi dengan parameter:

Parameter & Argument

Di dalam fungsi kita akan banyak bertemu

istilah parameter & argument. Penggunaan istilah ini sering kali
tertukar, bahkan di kalangan developer.

Perbedaan mendasar antara keduanya antara lain:

Parameter merupakan variabel yang didefinisikan sebagai input

dari sebuah fungsi. Contoh:

1. function multiply(a, b) {

2. return a * b;

3. }

Argument merupakan nilai atau expression yang dimasukkan ke

dalam fungsi. Contohnya:

1. multiply(3, 4);

Setelah membuat fungsi kita dapat memanggilnya dengan

menuliskan nama fungsi diikuti tanda kurung dan memasukkan
argumen di dalamnya (jika ada).

function greeting() {

console.log("Good Morning!")

greeting();

/* output
Good Morning!

*/

Tetapi jika sebuah fungsi hanya menjalankan baris kode yang sama
dirasa kurang fungsional, bukan? Kita dapat membuat fungsi
tersebut untuk menerima dan memanfaatkan parameter untuk
mengubah perilaku dari fungsinya.

Untuk menambahkan parameter pada fungsi, tambahkan variabel

di dalam tanda kurung fungsi. Namun, variabel tersebut tidak
memerlukan keyword var, let, ataupun const. Kita juga bisa
menambahkan lebih dari satu parameter dengan memberikan
tanda koma antar variabel parameternya. Contohnya fungsi
greeting akan kita tambahkan
parameter name dan language seperti ini:

1. function greeting(name, language) {

2. if(language === "English") {

3. console.log(`Good Morning ${name}!`);

4. } else if (language === "French") {

5. console.log(`Bonjour ${name}!`);

6. } else {

7. console.log(`Selamat Pagi ${name}!`);

8. }

9. }

Sehingga dalam memanggilnya pun kita perlu mengirimkan dua

buah nilainya sebagai argumen:

function greeting(name, language) {

if(language === "English") {

 console.log(`Good Morning ${name}!`);

} else if (language === "French") {

console.log(`Bonjour ${name}!`);

} else {

console.log(`Selamat Pagi ${name}!`);

Satu hal lagi, function dapat menghasilkan output atau

mengembalikan sebuah nilai. Dengan nilai kembalian, kita dapat
membuat function yang berfungsi untuk melakukan perhitungan
matematika dan hasilnya dapat kita masukkan ke dalam sebuah
variabel. Contohnya seperti ini:

function multiply(a, b) {

return a * b;

let result = multiply(10, 2)

console.log(result)

/* output

20

*/

Agar fungsi bisa mengembalikan nilai,

gunakan keyword return diikuti dengan nilai yang akan
dikembalikan. Nilai kembalian tidak hanya number, bisa juga
berupa string, boolean, object, array, atau tipe yang lain. Seperti
inilah fungsi greeting() jika kita ubah agar mengembalikan nilai
string:

function greeting(name, language) {

if(language === "English") {

return `Good Morning ${name}!`

} else if (language === "French") {

return `Bonjour ${name}!`;

} else {

return `Selamat Pagi ${name}!`;

let greetingMessage = greeting("Harry", "French");

console.log(greetingMessage);

/* output

Bonjour Harry!

*/

Expression Function

Cara lain untuk membuat sebuah fungsi pada JavaScript

adalah expression function. Ingat kembali bahwa expression adalah
kode atau instruksi yang mengembalikan nilai, sehingga expression
function bisa disimpan dalam sebuah variabel.

Pada expression function umumnya kita tidak perlu menuliskan

nama fungsinya. Fungsi yang tidak bernama juga dikenal
dengan anonymous function. Berikut ini merupakan contoh
penulisan expression function:

const greeting = function(name, language) {

if(language === "English") {

return "Good Morning " + name + "!";

} else if (language === "French") {

return "Bonjour " + name + "!";

} else {

return "Selamat Pagi " + name + "!";

console.log(greeting('Ron', 'English'));

/* output

Good Morning Ron!

*/
Function Parameter
Pada materi sebelumnya, kita telah berkenalan dengan fungsi yang
merupakan suatu blok kode yang dapat menerima input dan
menghasilkan output tertentu. Input ke dalam sebuah fungsi
dikirimkan melalui parameter.

Di dalam fungsi kita akan banyak bertemu istilah parameter &

argument. Penggunaan istilah ini sering kali tertukar, bahkan di
kalangan developer.

Perbedaan mendasar antara keduanya antara lain:

Parameter merupakan variabel yang didefinisikan sebagai input

dari sebuah fungsi. Contoh:

1. function multiply(a, b) {

2. return a * b;

3. }

Argument merupakan nilai atau expression yang dimasukkan ke

dalam fungsi. Contohnya:

1. multiply(3, 4);

Parameter dari fungsi dapat berupa tipe data apa pun, mulai dari
string, number, object, bahkan fungsi lain.

Jika parameter dari fungsi adalah sebuah object, kita juga bisa
memanfaatkan destructuring object untuk mendapatkan nilainya.
Contohnya seperti berikut:

const user = {

id: 24,

displayName: 'kren',
 fullName: 'Kylo Ren',

};

function introduce({displayName, fullName}) {

console.log(`${displayName} is ${fullName}`);

introduce(user);

/* output

kren is Kylo Ren

*/

Default Parameters

Fungsi pada JavaScript tidak melakukan pengecekan terhadap

jumlah maupun tipe argumen yang dimasukkan ke dalam
parameter. Ini berarti kita bisa memasukkan argumen meskipun
tidak sesuai dengan parameter yang telah didefinisikan.

function exponentsFormula(baseNumber, exponent) {

const result = baseNumber ** exponent;

console.log(`${baseNumber}^${exponent} = ${result}`);

}
exponentsFormula(2);

/* output

2^undefined = NaN

*/

Seperti yang kita lihat pada contoh kode di atas, ketika argumen
lebih sedikit dari parameternya, maka parameter yang tidak
terdefinisi akan bernilai undefined. Sebagai solusi jika
memungkinkan, kita bisa memberikan nilai default pada parameter.
Nilai ini akan digunakan jika kita tidak memasukkan parameter.

function exponentsFormula(baseNumber, exponent = 2) {

const result = baseNumber ** exponent;

console.log(`${baseNumber}^${exponent} = ${result}`);

exponentsFormula(3);

/* output

3^2 = 9

*/

Variable Scope
Sejauh ini kita sudah mengenal function. Setelah kita memisahkan
kode ke dalam blok atau fungsi terpisah, ada satu hal penting yang
perlu kita tahu, yaitu variable scoping. Ada banyak keadaan di
mana kita membutuhkan variabel untuk diakses di seluruh script
yang kita buat. Tetapi ada juga keadaan di mana kita ingin variabel
tersebut hanya dapat diakses pada cakupan fungsi dan fungsi
turunannya saja.

Variabel yang dapat diakses dari seluruh script disebut dengan

“globally scoped”, sementara variabel yang hanya diakses hanya
pada fungsi tertentu disebut dengan “locally scoped”.

Variabel JavaScript menggunakan fungsi untuk mengelola

cakupannya. Jika variabel didefinisikan di luar fungsi, maka variabel
tersebut bersifat global. Jika variabel didefinisikan di dalam fungsi,
maka variabel bersifat lokal dan cakupannya hanya pada fungsi
tersebut beserta turunannya.

Berikut ini merupakan contoh scoping dalam kode:

1. // global variable, dapat diakses pada parent() dan child()

2. const a = 'a';

3.

4. function parent() {

5. // local variable, dapat diakses pada parent() dan child(),

tetapi tidak dapat diakses di luar dari fungsi tersebut.

6. const b = 'b';

7.

8. function child() {

9. // local variable, dapat diakses hanya pada fungsi child().

 10. const c = 'c';

11. }

12. }

Kita harus berhati-hati dalam mendefinisikan variabel di dalam

fungsi. Pasalnya, kita bisa mendapatkan hasil yang tidak
diperkirakan, contohnya seperti berikut:

 main.js


1.

function multiply(num) {

total = num * num;

return total;

let total = 9;

let number = multiply(20);

8
 9

console.log(total)

10

11

/* output

12

400

13

*/

Input Reset
Jalankan

Mungkin kita berharap nilai total akan tetap 9, mengingat

variabel total pada fungsi multiply seharusnya tidak akan
berpengaruh untuk kode di luar dari fungsi tersebut. Hal ini bisa
terjadi karena pada fungsi multiply() kita tidak menetapkan variabel
total sebagai cakupan lokal. Kita tidak
menggunakan keyword const atau let ketika mendeklarasikan
variabel total pada fungsi multiply() sehingga variabel total menjadi
global.

Perlu kita perhatikan, jika kita lupa menuliskan keyword let, const,
atau var pada script ketika membuat sebuah variabel, maka
variabel tersebut akan menjadi global.

Sebisa mungkin kita harus menghindari pembuatan variabel global,

karena variabel global dapat diakses pada seluruh script yang kita
tuliskan. Semakin banyak variabel global yang kita tuliskan,
semakin tinggi kemungkinan tabrakan (collision) terjadi.
Pengantar Object-Oriented Programming di JavaScript
Object-oriented programming atau disingkat OOP merupakan
paradigma pemrograman yang banyak diterapkan ketika
membangun aplikasi. Paradigma OOP kental dengan konsep objek
yang mengandung dua hal, yaitu atribut dan method. Selain itu,
OOP juga kental dengan konsep object blueprint yang akrab dikenal
dengan sebutan class.

Meskipun JavaScript bukan bahasa pemrograman yang berbasis

class seperti Java, tetapi di JavaScript kita juga bisa menerapkan
paradigma OOP.

Di modul ini kita akan membahas beberapa hal terkait OOP, seperti:

 Pengertian paradigma Object-Oriented Programming.

 Constructor function dan sintaks class di JavaScript.
 Properti dan Method di dalam class.
 Pewarisan.
 Constructor dan method overriding.
 Object composition.
 Built-in class.

Object-Oriented Programming
Object-Oriented Programming (OOP) adalah salah satu paradigma
dalam pemrograman yang berfokus pada pembuatan sebuah objek
dan interaksi dengan objek-objek tersebut. Di OOP, objek
merupakan sebuah entitas yang terdiri dari dua hal, yakni
properties dan methods.

 Properti merupakan nilai di dalam objek yang menyimpan

informasi tentang objek tersebut.
  Method merupakan fungsi yang menggambarkan aksi yang
dapat dilakukan oleh objek tersebut.

Paradigma OOP kerap digambarkan dengan kehidupan dunia nyata.

Objek di dalam OOP, bisa kita anggap seperti objek yang ada di
dunia nyata. Kita ambil contoh, mobil. Dalam OOP, sebuah mobil
dapat dilihat sebagai objek yang memiliki beberapa properti seperti
merek, warna, kecepatan maksimal, dan nomor rangka. Objek
tersebut memiliki kemampuan atau method seperti maju, mundur,
dan belok.

Object Mobil

Properties Merek

Warna

Kecepatan maksimal

Nomor rangka

Methods Maju

Mundur

Belok

Lalu, seperti apa bentuk objek mobil dalam bentuk JavaScript?

Sama seperti yang sudah Anda ketahui di modul Struktur Data,
objek mobil dibuat dengan menggunakan tanda kurung kurawal dan
untuk method-nya, Anda cukup buat properti yang merupakan
sebuah fungsi, contohnya seperti ini.

1. const car = {

2. // properties

3. brand: 'Ford',

4. color: 'red',

5. maxSpeed: 200,
6. chassisNumber: 'f-1',

7. // methods

8. drive: () => {

9. console.log('driving');

10. },

11. reverse: () => {

12. console.log('reversing');

13. },

14. turn: () => {

15. console.log('turning');

16. }

17. }

18.

19. console.log(car.brand); // Ford

20. console.log(car.color); // red

21. console.log(car.maxSpeed); // 200

22. console.log(car.chassisNumber); // f-1

 23. car.drive(); // driving

24. car.reverse(); // reversing

25. car.turn(); // turning

Kode di atas merupakan contoh objek mobil atau car di JavaScript.

Seperti yang Anda lihat, objek car memiliki
properti brand, color, maxSpeed, dan chassisNumber; dan juga
method drive, reverse, dan turn. Kita bisa akses nilai properti dan
panggil method yang ada di dalam objek tersebut.

Di JavaScript untuk membuat sebuah objek terlihat mudah, bukan?

Namun, masalah yang dipecahkan oleh paradigma OOP tidak hanya
sebatas membuat objek sederhana saja. Seiring berkembangnya
aplikasi, pembuatan objek akan semakin banyak dan saling
berinteraksi satu dengan yang lainnya. Sehingga, kita harus
mengetahui cara efektif mengelola objek termasuk cara
membuatnya.

Mari kita angkat sebuah masalah baru dari contoh kode di atas.
Bagaimana jika Anda ingin membuat objek dua mobil baru dengan
nilai yang berbeda? Haruskah Anda mendefinisikan properti dan
method yang sama secara berulang seperti contoh kode di bawah
ini?

1. const car = {

2. brand: 'Ford',

3. color: 'red',

4. maxSpeed: 200,

5. chassisNumber: 'f-1',

6. drive: () => {
7. console.log('driving');

8. },

9. reverse: () => {

10. console.log('reversing');

11. },

12. turn: () => {

13. console.log('turning');

14. }

15. }

16.

17. const myCar = {

18. brand: 'Tesla',

19. color: 'black',

20. maxSpeed: 250,

21. chassisNumber: 't-1',

22. drive: () => {

23. console.log('driving');
24. },

25. reverse: () => {

26. console.log('reversing');

27. },

28. turn: () => {

29. console.log('turning');

30. }

31. }

32.

33. const yourCar = {

34. brand: 'BMW',

35. color: 'white',

36. maxSpeed: 300,

37. chassisNumber: 'b-1',

38. drive: () => {

39. console.log('driving');

40. },
 41. reverse: () => {

42. console.log('reversing');

43. },

44. turn: () => {

45. console.log('turning');

46. }

47. }

Kami rasa kode di atas sungguh tidak efektif. Bagaimana jika ada
banyak mobil yang harus Anda buat? Contoh, Anda membangun
aplikasi yang memiliki entitas pelanggan. Jika Anda menggunakan
cara di atas, mampukah Anda membuat objek pelanggan jika
aplikasi sudah digunakan oleh 100 pelanggan?

Dalam memecahkan masalah ini, OOP menawarkan sebuah solusi

yakni dengan membuat object blueprint. Melalui object blueprint,
kita bisa membuat cetakan untuk membuat objek yang sudah
terdefinisikan macam-macam properti dan method-nya. Sehingga
kita cukup menggunakan cetakan tersebut untuk membuat objek
yang serupa, tetapi kita bisa menentukan nilai-nilai properti yang
berbeda.

Contohnya, Anda bisa membuat sebuah blueprint bernama Car. Di

dalam blueprint tersebut, Anda bisa definisikan properti-properti
dan method yang ingin dimiliki objek mobil nantinya. Setelah
membuat sebuah blueprint, Anda bisa dengan mudah membuat
banyak objek mobil contohnya myCar, yourCar,
dan dicodingCar dengan lebih mudah.
Constructor Function
Kebanyakan paradigma OOP diterapkan pada class-based
programming languages, seperti Java, C++, C#, dan bahasa
pemrograman berbasis class lainnya. JavaScript sendiri bukanlah
bahasa pemrograman berbasis class karena sebelum hadirnya
sintaks ES6, JavaScript tidak mengenal class. Namun, walaupun
demikian, konsep-konsep yang ada di OOP masih bisa diterapkan di
JavaScript.

JavaScript bukanlah class-based language, melainkan prototype-

based language. Menariknya, konsep-konsep OOP yang
memanfaatkan class seperti pewarisan dapat dilakukan dengan
memanfaatkan prototype. Alih-alih menggunakan class, prototype-
lah yang diadaptasi JavaScript.

Kita akan membahas konsep pewarisan di beberapa materi

mendatang, semantara kita fokus ke masalah sebelumnya, yaitu
object blueprint.

Pertanyaannya, bagaimana cara membuat object blueprint di

JavaScript? Fitrahnya, object blueprint dapat dibuat dengan
menggunakan constructor function yang tampak seperti ini.