Dasar Pemrograman 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 di berbagai lingkungan pengembangan. Sehingga, tidak hanya sebatas browser/client, namun JavaScript juga bisa berjalan di server 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.

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.neuvoo.com rata-rata gaji seorang Front End Developer adalah Rp 7.500.000 per bulan [1] dan untuk Back End Developer adalah Rp 8.500.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!

Rangkuman Materi

Sebelum mempelajari sesuatu tentunya penting untuk mengetahui apa yang akan kita pelajari serta bagaimana sejarahnya dan bagaimana perkembangannya.

Kita telah membahas beberapa hal di modul ini, antara lain:

• JavaScript dibuat dengan tujuan awal agar website menjadi lebih interaktif.
• JavaScript termasuk ke dalam kategori scripting language, sehingga kode tidak perlu dikompilasi untuk bisa dijalankan. Terdapat interpreter untuk menerjemahkan kode kita agar bisa dimengerti oleh mesin.
• Terdapat dua lingkungan umum untuk menjalankan JavaScript, yaitu browser dan Node.js
• JavaScript dikembangkan dengan standar ECMAScript. Update besar terakhir tersaji dalam versi ES6 pada tahun 2015. Sejak saat itu, tiap tahun JavaScript melakukan update bersifat minor.

Materi Pendukung

Ulas beberapa sumber di bawah ini untuk mempelajari lebih lanjut tentang JavaScript:

• JavaScript MDN Web Docs
• An Introduction to JavaScript
• Introduction to Node.js
• Differences between Node.js and the Browser

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

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.

• main.js

1

console.log("Hello, World!");

2

​

3

// Tampilkan nama Anda ke layar pada kode di bawah:

 

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:

5; // Baris kode ini merupakan expression karena interpreter akan membaca kode ini dan menghasilkan nilai 5.
2 + 3; // Baris kode ini juga merupakan expression. Interpreter mengevaluasi kode dan juga akan menghasilkan nilai 5.

Sementara itu, statement adalah instruksi untuk melakukan sebuah aksi tertentu. Aksi ini bisa termasuk membuat variabel, melakukan perulangan, pengecekan kondisi, dll.

var yourName;
let yourAge;
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.

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

2

​

3

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

 

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

2

Teks apapun yang berada disini akan dijadikan komentar.

3

Ketika menggunakan ini, jangan lupa untuk menutupnya.

4

*/

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.

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

• main.js

1

let lastName;

2

lastName = "Skywalker";

3

​

4

console.log(lastName);

5

​

6

/* output

7

Skywalker

8

*/

 

Anda juga bisa langsung menginisialisasi nilai variabel setelah mendeklarasikannya seperti berikut:

• main.js

1

let lastName = "Skywalker";

2

​

3

console.log(lastName);

4

​

5

/* output

6

Skywalker

7

*/

 

Kode untuk menginisialisasikan nilai ke dalam sebuah variabel dengan tanda sama dengan (=) ini disebut dengan assignment expression.

Tunggu sebentar. Kita kembali bertemu dengan istilah statement dan expression. Karena expression pasti menghasilkan nilai, sehingga mereka bisa muncul di mana pun dalam program JavaScript. Sementara itu, statement merujuk pada aksi. Sehingga, pada bagian kode tertentu yang membutuhkan nilai tidak bisa kita isi dengan sebuah statement. Contohnya seperti kode berikut:

let fullName = let lastName; // Error karena let lastName adalah sebuah statement untuk deklarasi variabel. Statement tidak bisa berada di posisi expression.
let fullName = (lastName = "Skywalker"); // (lastName = "Skywalker") merupakan expression, sehingga kode ini tidak error.
let fullName = "Luke" + "Skywalker"; // "Luke" + "Skywalker" juga merupakan expression, sehingga kode ini tidak error.

---

Melalui contoh kode di atas, kita bisa bayangkan variabel sebagai sebuah kotak atau wadah yang menyimpan nilai. Proses inisialisasi atau assignment berarti kita memasukkan nilai ke dalam kotak tersebut.

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 kode mudah di-maintenance.

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

• main.js

1

const z = 100;

2

console.log(z);

3

z = 200;

4

console.log(z)

5

​

6

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

2

console.log(typeof(x));

3

​

4

/* output: undefined */

 

Pada contoh kode di atas, kita mendeklarasikan variabel x, tetapi kita tidak menginisialisasikan dengan nilai apa pun. Ketika kita memastikan tipe data dengan menggunakan fungsi typeof(), ia akan menghasilkan output undefined.

Fungsi typeof() digunakan untuk memastikan tipe data pada variabel dengan mengembalikan tipe data tersebut dalam bentuk teks.

Numbers

Nilai dari tipe data number adalah angka. Variabel bertipe data number dituliskan seperti angka pada umumnya:

let x = 10;

Jika angka tersebut merupakan sebuah bilangan desimal, maka kita bisa gunakan tanda titik pada pecahan bilangannya.

• main.js

1

let x = 10;

2

console.log(typeof(x))

3

​

4

/* output: number */

5

​

6

let y = 17.25;

7

console.log(typeof(y))

8

​

9

/* output: number */

 

Pada tipe data number, kita juga dapat melakukan perhitungan aritmatika seperti penjumlahan, pengurangan, perkalian, dsb. Berikut operator yang dapat kita gunakan dalam perhitungan aritmatika pada tipe data number:

Operator	Fungsi	Contoh
+	Penjumlahan	10 + 10 = 20
-	Pengurangan	15 - 7 = 8
/	Pembagian	21 / 7 = 3
*	Perkalian	9 * 9 = 81
%	Sisa hasil bagi	5 % 2 = 1

• main.js

1

let a = 12;

2

let b = 9;

3

​

4

console.log(a + b)

5

console.log(a - b)

6

console.log(a * b)

7

console.log(a / b)

8

console.log(a % b)

9

​

10

/* output:

11

21

12

3

13

108

14

1.3333333333333333

15

3

16

*/

 

Pada operator aritmatika juga terdapat operator increment (++) dan decrement (--). Operator increment dan decrement digunakan untuk menambahkan atau mengurangi nilai 1 pada nilai variabel yang ada sekarang.

Operator ini dapat dituliskan sebelum atau sesudah variabel, tetapi hal tersebut bukan berarti sama. Berikut ketentuannya:

• Jika dituliskan setelah variabel (x++), expression akan menghasilkan nilai variabel sebelum ditingkatkan nilainya.
• Jika dituliskan sebelum variabel (++x), expression akan menghasilkan nilai variabel setelah ditingkatkan nilainya.

Untuk lebih jelasnya, berikut adalah contoh kode penerapan operator tersebut, perhatikan hasil yang didapat.

• main.js

1

/* Increment dan Decrement */

2

​

3

let postfix = 5;

4

console.log(postfix++);

5

/* output: 5 */

6

console.log(postfix);

7

/* output: 6 */

8

​

9

let prefix = 5;

10

console.log(++prefix);

11

/* output: 6 */

 

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.

• main.js

1

const bigNumber = 1234567890123456789012345678901234567890n;

2

const myInt = 1234567890123456789012345678901234567890;

3

​

4

console.log(bigNumber);

5

console.log(myInt);

6

​

7

/* output

8

1234567890123456789012345678901234567890n

9

1.2345678901234568e+39

10

*/

 

Meskipun digunakan untuk menyimpan angka dengan nilai besar, namun BigInt tetap bisa digunakan untuk nilai yang lebih kecil.

const bigIntButSmall = 7n;

Kita juga bisa menggunakan BigInt untuk operasi aritmatika pada umumnya. Yang membedakan adalah pada operasi pembagian, hasilnya akan dibulatkan ke bawah dan tanpa mengandung nilai desimal. Contohnya adalah seperti ini:

• main.js

1

console.log(5n + 2n);

2

console.log(5n - 2n);

3

console.log(5n * 2n);

4

console.log(5n / 2n);

5

console.log(5n % 2n);

6

​

7

/* output

8

7n

9

3n

10

10n

11

2n; Bukan 2.5n

12

1n

13

*/

 

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:

• main.js

1

let greet = "Hello";

2

console.log(typeof(greet))

3

​

4

/* output: string */

 

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.

• main.js

1

const question = '"What do you think of JavaScript?" I asked';

2

​

3

console.log(question)

4

​

5

/* output: "What do you think of JavaScript?" he asked */

 

Lalu bagaimana jika teks memiliki kedua tanda petik seperti ini?

• main.js

1

const answer = '"I think it's awesome!" he answered confidently';

2

​

3

console.log(answer);

 

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:

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.

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:

• main.js

1

let greet = "Hello";

2

let moreGreet = greet + greet;

3

console.log(moreGreet);

4

​

5

/* output: HelloHello */

 

Ingat, string concatenation seperti di atas akan menggabungkan string apa adanya, sehingga jika Anda ingin menggabungkan dua kata atau lebih perlu menambahkan spasi sendiri.

Selain concatenation, string pada JavaScript juga mendukung string interpolation. Sederhananya, kita bisa memasukkan variabel ke dalam sebuah string template. Contohnya adalah seperti berikut:

• main.js

1

const myName = "Luke";

2

console.log(`Hello, my name is ${myName}.`);

3

​

4

/* output: Hello, my name is Luke. */

 

Perhatikan bahwa untuk mendefinisikan string template, Anda perlu menggunakan backticks (`), biasanya terletak di keyboard di sebelah kiri tombol 1). Di dalam string letakkan variabel yang ingin dimasukkan ke dalam placeholder ${myName}.

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.

• main.js

1

let x = true;

2

let y = false;

3

​

4

console.log(typeof(x))

5

console.log(typeof(y))

6

​

7

/* output: 

8

boolean

9

boolean

10

*/

 

Kita juga bisa menggunakan operator komparasi seperti lebih dari (>) atau kurang dari (<). Contohnya:

• main.js

1

const a = 10;

2

const b = 12;

3

​

4

let isGreater = a > b;

5

let isLess = a < b;

6

​

7

console.log(isGreater);

8

console.log(isLess);

9

​

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.

• main.js

1

let someLaterData = null;

2

console.log(someLaterData);

3

​

4

/* output:

5

null

6

*/

 

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:

• main.js

1

const id = Symbol("id");

2

​

3

console.log(id);

4

​

5

/* output

6

Symbol(id)

7

*/

 

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:

• main.js

1

const id1 = Symbol("id");

2

const id2 = Symbol("id");

3

​

4

console.log(id1 == id2);

5

​

6

/* output

7

false

8

*/

 

Symbol ini umumnya digunakan sebagai nama property dari Object. Object sendiri merupakan tipe data kompleks untuk menyimpan berbagai struktur data. Kita akan segera bertemu dan mempelajari tentang object pada modul Data Structure.

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.

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:

• main.js

1

let x = 10;

2

let y = 5

3

​

4

x += y;

5

​

6

console.log(x);

7

​

8

/* output

9

15

10

*/

 

Pada contoh kode di atas, terdapat expression x += y; Apa artinya? Assignment operator tersebut digunakan sebagai shortcut dari x = x + y. Cara ini juga dapat digunakan pada operator aritmatika lain seperti, perkalian, pengurangan, pembagian, dan lainnya.

let x = 10;
let y = 5;
 
x += y; // artinya -> x = x + y;
x -= y; // artinya -> x = x - y;
x *= y; // artinya -> x = x * y;
x /= y; // artinya -> x = x / y;
x %= y; // artinya -> x = x % y;

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 apakah sama. (tidak identik).
!=	Membandingkan kedua nilai apakah tidak sama. (tidak identik).
===	Membandingkan kedua nilai apakah identik.
!==	Membandingkan kedua nilai apakah tidak identik.
>	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.
<=	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:

• main.js

1

let a = 10;

2

let b = 12;

3

​

4

console.log(a < b);

5

console.log(a > b);

6

​

7

/* output

8

true

9

false

10

*/

 

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:

• main.js

1

const aString = '10';

2

const aNumber = 10

3

​

4

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

5

console.log(aString === aNumber) // false, karena walaupun nilainya sama, tetapi tipe datanya berbeda

6

​

7

/* output

8

true

9

false

10

*/

 

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 nilai true apabila semua kondisi terpenuhi (bernilai true).
||	Operator atau (or). Logika akan menghasilkan nilai true apabila ada salah satu kondisi terpenuhi (bernilai true).
!	Operator tidak (not). Digunakan untuk membalikkan suatu kondisi.

Berikut contoh penerapannya pada JavaScript:

• main.js

1

let a = 10;

2

let b = 12;

3

​

4

/* AND operator */

5

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

6

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

7

​

8

/* OR operator */

9

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

 

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:

• main.js

1

const isRaining = true;

2

​

3

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

4

if (isRaining) {

5

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

6

}

7

console.log("Berangkat kegiatan.");

8

​

9

/* output:

10

Persiapan sebelum berangkat kegiatan.

11

Hari ini hujan. Bawa payung.

12

Berangkat kegiatan.

13

 */

 

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.

• main.js

1

let x = 50;

2

​

3

if(x > 70) {

4

    console.log(x);

5

} else {

6

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

7

}

8

​

9

/* output

10

Nilai kurang dari 70

11

*/

 

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

1

let language = "French";

2

let greeting = "Selamat Pagi"

3

​

4

if(language === "English") {

5

    greeting = "Good Morning!";

6

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

7

    greeting = "Bonjour!"

8

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

9

    greeting = "Ohayou Gozaimasu!"

10

}

11

​

12

console.log(greeting);

13

​

14

/* output

15

Bonjour!

16

*/

 

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.

• main.js

1

// condition ? true expression : false expression

2

​

3

const isMember = false;

4

const discount = isMember ? 0.1 : 0;

5

console.log(`Anda mendapatkan diskon sebesar ${discount * 100}%`)

6

​

7

/* output

8

Anda mendapatkan diskon sebesar 0%

9

 */

 

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:

• main.js

1

let name = "";

2

​

3

if (name) {

4

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

5

} else {

6

    console.log("Nama masih kosong");

7

}

8

​

9

/* output:

10

Nama masih kosong

11

 */

 

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.

switch (expression) {
  case value1:
    // do something
    break;
  case value2:
    // do something
    break;
  ...
  ...
  default:
    // do something else
}

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:

• main.js

1

let language = "French";

2

let greeting = null;

3

​

4

switch (language) {

5

    case "English":

6

        greeting = "Good Morning!";

7

        break;

8

    case "French":

9

        greeting = "Bonjour!";

10

        break;

11

    case "Japanese":

12

        greeting = "Ohayou Gozaimasu!";

13

        break;

14

    default:

15

        greeting = "Selamat Pagi!";

16

}

17

​

18

console.log(greeting);

/* output
Bonjour!
*/

 

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:

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

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:

for(inisialisasi variabel; test kondisi; perubahan nilai variabel) {
    // do something
}

Berikut ini contoh penerapannya secara nyata:

• main.js

1

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

2

    console.log(i);

3

}

4

​

5

/* output

6

0

7

1

8

2

9

3

10

4

11

*/

 

Lebih 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 berjalan selamanya karena kondisi akan terus 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:

for(arrayItem of myArray) {
    // do something
}

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.

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.

Agak sulit memang menjelaskan dengan kata-kata, mari kita terjemahkan dalam kode secara langsung.

• main.js

1

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

2

​

3

for(const arrayItem of myArray) {

4

    console.log(arrayItem)

5

}

6

​

7

/* output

8

Luke

9

Han

10

Chewbacca

11

Leia

12

*/

 

Lebih mudah dan simpel bukan?

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:

• main.js

1

let i = 1;

2

​

3

while (i <= 100) {

4

    console.log(i);

5

    i++;

6

}

 

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.

• main.js

1

let i = 1;

2

​

3

do {

4

    console.log(i);

5

    i++;

6

} 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

let i = 1;
 
while (i <= 5) {
    console.log(i);
}

Dapatkah Anda menemukan apa yang salah dari kode di atas sehingga terjadi infinite loop?

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.

Kuis Coding : Variabel dan Tipe Data

Untuk menguji kemampuan praktikal Anda dalam memahami materi variabel dan tipe data di JavaScript, silakan selesaikan kuis berikut.

Sebelum Anda mengerjakan kuis, ada beberapa hal yang perlu Anda perhatikan.

• Mohon untuk membaca secara seksama perintah, kriteria, atau soal pada komentar kode yang diberi tanda TODO. 
• Lakukan pengujian pada kode yang Anda tulis contohnya dengan menggunakan console.log() untuk memastikan hasil sesuai dengan yang Anda harapkan. Gunakan tombol Jalankan.

Bila sudah yakin dengan pekerjaan yang Anda lakukan, silakan submit kode dengan klik tombol Submit kode. Jika kode yang di-submit benar, Anda bisa melanjutkan ke modul berikutnya. Jika tidak, Anda bisa memperbaiki kembali kode sebanyak yang Anda mau.

Batas waktu tunggu untuk mengirimkan kembali perbaikan kode adalah 1 menit. Jadi pastikan kode yang Anda tulis sudah memenuhi perintah, kriteria, atau soal pada kuis kali ini.

Good luck!

Selamat, Anda telah menyelesaikan modul ini.
Kode yang Anda kirimkan telah berfungsi dengan baik.

• main.js

1

/**

2

 * TODO:

3

 * Buatlah variabel firstName, lastName, age, isMarried dengan ketentuan:

4

 *  - firstName: bertipe data string, dengan nilai nama depan Anda.

5

 *  - lastName: bertipe data string, dengan nilai nama belakang Anda.

6

 *  - age: bertipe data number, dengan nilai umur Anda.

7

 *  - isMarried: bertipe data boolean, dengan bebas Anda tentukan.

8

 */

9

​

10

// TODO

11

const firstName = 'A';

12

const lastName = 'F';

13

const age = 17;

14

const isMarried = false;

15

/**

16

 * Hiraukan kode di bawah ini

17

 */

18

​

19

module.exports = {

20

  firstName, lastName, age, isMarried,

21

};

22

​

 

 

Kuis Coding : Logika Operator dan If Else

Untuk menguji kemampuan praktikal Anda dalam memahami materi Logika Operator dan If Else di JavaScript, silakan selesaikan kuis berikut.

Sebelum Anda mengerjakan kuis, ada beberapa hal yang perlu Anda perhatikan.

• Mohon untuk membaca secara seksama perintah, kriteria, atau soal pada komentar kode yang diberi tanda TODO. 
• Lakukan pengujian pada kode yang Anda tulis contohnya dengan menggunakan console.log() untuk memastikan hasil sesuai dengan yang Anda harapkan. Gunakan tombol Jalankan.

Bila sudah yakin dengan pekerjaan yang Anda lakukan, silakan submit kode dengan klik tombol Submit kode. Jika kode yang di-submit benar, Anda bisa melanjutkan ke modul berikutnya. Jika tidak, Anda bisa memperbaiki kembali kode sebanyak yang Anda mau.

Batas waktu tunggu untuk mengirimkan kembali perbaikan kode adalah 1 menit. Jadi pastikan kode yang Anda tulis sudah memenuhi perintah, kriteria, atau soal pada kuis kali ini.

Good luck!

Selamat, Anda telah menyelesaikan modul ini.
Kode yang Anda kirimkan telah berfungsi dengan baik.

• main.js

18

​/**
 * Buatlah logika if untuk mengevaluasi nilai score dengan ketentuan:
 *  1. Jika nilai score lebih atau sama dengan 90
 *      - Isi variabel result dengan nilai: 'Selamat! Anda mendapatkan nilai A.'
 *  2. Jika nilai score ada di antara 80 hingga 89
 *      - Isi variabel result dengan nilai: 'Anda mendapatkan nilai B.'
 *  3. Jika nilai score ada di antara 70 hingga 79
 *      - Isi variabel result dengan nilai: 'Anda mendapatkan nilai C.'
 *  4. Jika nilai score ada di antara 60 hingga 69:
 *      - Isi variabel result dengan nilai: 'Anda mendapatkan nilai D.'
 *  5. Jika nilai score di bawah 60:
 *      - Isi variabel result dengan nilai: 'Anda mendapatkan nilai E.'
 *
 *
 *  Note: - Mohon untuk tidak menghapus kode yang sudah ada sebelumnya.
 *        - Anda tidak perlu membuat variabel result dan score secara manual.
 *          Gunakan variabel yang sudah disediakan.
 *
 */

function scoreChecker(score) {
  let result;

  // TODO



  // Jangan hapus kode ini
  return result;
}

/**
 * Hiraukan kode di bawah ini
 */
module.exports = scoreChecker;

 

 

Rangkuman Materi

Pada modul ini kita telah mempelajari logika dan sintaksis dasar JavaScript sebelum membuat aplikasi yang lebih kompleks ke depannya.

Beberapa hal yang telah kita bahas pada modul ini, antara lain:

• Gunakan comments untuk memberitahu interpreter supaya mengabaikan kode atau teks yang kita tulis. Ini akan berguna untuk membuat dokumentasi atau penjelasan atas kode yang kita tulis.
• Kita dapat menyimpan suatu nilai ke dalam variabel. ES6 mengenalkan dua cara baru untuk mendefinisikan variabel, yaitu let dan const. Gunakan const untuk menyimpan nilai yang tidak akan berubah setelah diinisialisasi. Gunakan let apabila nilai di dalam variabel bisa berubah atau diinisialisasi ulang.
• Terdapat tujuh (7) tipe data primitif yang mendefinisikan suatu nilai dalam JavaScript. Ketujuh nilai tersebut antara lain: Undefined, Number, BigInt, String, Boolean, Null, dan Symbol.
• JavaScript memiliki beragam operator yang memberi tahu interpreter untuk melakukan operasi matematika, relasional, atau logika untuk memberikan hasil akhir.
• Pengambilan keputusan adalah hal yang penting dalam pemrograman. Kita bisa memanfaatkan if-else statement atau switch-case untuk memilih satu opsi berdasarkan kondisi yang diberikan.
• Pemrograman juga membantu kita untuk melakukan pekerjaan yang berulang. Dengan kode for atau while, kita bisa melakukan perulangan terhadap suatu kode sebanyak ratusan bahkan ribuan kali hanya dengan beberapa baris saja.

Materi Pendukung

Berikut ini adalah beberapa materi tambahan yang bisa Anda pelajari terkait modul JavaScript Fundamentals:

• Grammar and types
• Expressions and operators
• Control flow and error handling
• Loops and iteration

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

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:

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 di akhir properti 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 (,).

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.

const user = {
    firstName: "Luke",
    lastName: "Skywalker",
    age: 19,
    isJedi: true,
};

Kemudian untuk mengakses nilai dari properti object, kita dapat memanggil nama object lalu tanda titik dan diikuti nama propertinya. Contoh:

• main.js

1

const user = {

2

    firstName: "Luke",

3

    lastName: "Skywalker",

4

    age: 19,

5

    isJedi: true,

6

};

7

​

8

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

9

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

10

​

11

/* output

12

Halo, nama saya Luke Skywalker

13

Umur saya 19 tahun

14

*/

 

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

user[“home world”];

Untuk mengakses key yang memiliki spasi atau karakter khusus lainnya maka kita perlu menggunakan bracket seperti di atas.

• main.js

1

const user = {

2

    firstName: "Luke",

3

    lastName: "Skywalker",

4

    age: 19,

5

    isJedi: true,

6

    "home world": "Tattooine"

7

};

8

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

9

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

10

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

11

/* output

12

Halo, nama saya Luke Skywalker

13

Umur saya 19 tahun

14

Saya berasal dari Tattooine

15

*/

 

Setelah mempelajari bagaimana membuat object dan menampilkan property di dalamnya, selanjutnya kita akan memodifikasi sebuah object. Untuk mengubah nilai properti di dalam object kita gunakan assignment operator (=).

• main.js

1

const spaceship = {

2

    name: "Millenium Falcon",

3

    manufacturer: "Corellian Engineering Corporation",

4

    maxSpeed: 1200,

5

    color: "Light gray"

6

};

7

​

8

spaceship.color = "Glossy red";

9

spaceship["maxSpeed"] = 1300;

10

console.log(spaceship);

11

​

12

/* output

13

{

14

  name: 'Millenium Falcon',

15

  manufacturer: 'Corellian Engineering Corporation',

16

  maxSpeed: 1300,

17

  color: 'Glossy red'

18

}

 

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.

const spaceship = {
    name: "Millenium Falcon",
    manufacturer: "Corellian Engineering Corporation",
    maxSpeed: 1200,
    color: "Light gray"
};
 
spaceship = { name: "New Millenium Falcon" }; // Error

Ketika kita mengubah object menggunakan assignment operator dan property/key-nya sudah ada, maka nilai di dalamnya akan tergantikan dengan nilai yang baru. Sedangkan, jika property dengan nama key yang ditentukan tidak ditemukan, maka property baru akan ditambahkan ke object.

• main.js

1

const spaceship = {

2

    name: "Millenium Falcon",

3

    manufacturer: "Corellian Engineering Corporation",

4

    maxSpeed: 1200,

5

    color: "Light gray"

6

};

7

​

8

spaceship.color = "Glossy red";

9

spaceship["maxSpeed"] = 1300;

10

spaceship.class = "Light freighter";

11

​

12

console.log(spaceship);

13

​

14

/* output

15

{

16

  name: 'Millenium Falcon',

17

  manufacturer: 'Corellian Engineering Corporation',

18

  maxSpeed: 1300,

 

Kita juga dapat menghapus property pada object menggunakan keyword delete seperti berikut:

• main.js

1

const spaceship = {

2

    name: "Millenium Falcon",

3

    manufacturer: "Corellian Engineering Corporation",

4

    maxSpeed: 1200,

5

    color: "Light gray"

6

};

7

​

8

spaceship.color = "Glossy red";

9

spaceship["maxSpeed"] = 1300;

10

​

11

delete spaceship.manufacturer;

12

​

13

console.log(spaceship);

14

​

15

/* output

16

{ name: 'Millenium Falcon', maxSpeed: 1300, color: 'Glossy red' }

17

 */

Array

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

• main.js

1

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

2

console.log(myArray);

3

​

4

/* output:

5

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

6

*/

 

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.

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.

• main.js

1

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

2

console.log(myArray[1]);

3

​

4

/* output:

5

42.5

6

*/

 

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.

• main.js

1

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

2

console.log(myArray[0]);

3

console.log(myArray[1]);

4

console.log(myArray[2]);

5

console.log(myArray[3]);

6

console.log(myArray[4]);

7

console.log(myArray[5]);

8

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

9

​

10

/* output:

11

Coklat

12

42.5

13

22

14

true

15

Programming

16

undefined

17

Panjang nilai myArray adalah 5.

18

*/

 

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.

• main.js

1

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

2

​

3

myArray.push('JavaScript');

4

console.log(myArray);

5

​

6

/* output

7

[ 'Coklat', 42.5, 22, true, 'Programming', 'JavaScript' ]

8

 */

 

Sedangkan untuk mengeluarkan data atau elemen terakhir dari array, kita bisa gunakan metode pop().

• main.js

1

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

2

​

3

myArray.pop();

4

console.log(myArray);

5

​

6

/* output

7

[ Orange, 42.5, 22, true ]

8

*/

 

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.

• main.js

1

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

2

​

3

myArray.shift();

4

myArray.unshift("Apple");

5

​

6

console.log(myArray);

7

​

8

/* output

9

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

10

*/

 

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

• main.js

1

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

2

​

3

delete myArray[1];

4

console.log(myArray);

5

​

6

/* output

7

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

8

*/

 

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:

• main.js

1

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

2

​

3

myArray.splice(2, 1);   // Menhapus dari index 2 sebanyak 1 elemen

4

console.log(myArray);

5

​

6

/* output

7

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

8

*/

Spread Operator

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

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:

const favorites = ["Seafood", "Salad", "Nugget", "Soup"];
 
console.log(favorites);
 
/* output
[ 'Seafood', 'Salad', 'Nugget', 'Soup' ]
*/

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

1

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

2

​

3

console.log(...favorites);

4

​

5

/* output

6

Seafood Salad Nugget Soup

7

*/

 

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:

console.log(...favorites);

Sama seperti kita menuliskan kode seperti ini:

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:

• main.js

1

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

2

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

3

​

4

const allFavorites = [favorites, others];

5

​

6

console.log(allFavorites);

7

​

8

/* output

9

[

10

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

11

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

12

]

13

*/

 

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?

• main.js

1

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

2

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

3

​

4

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

5

​

6

console.log(allFavorites);

7

​

8

/* output

9

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

10

*/

 

Yup, dengan menggunakan spread operator nilai dua array tersebut berhasil tergabung.

Selain array, spread operator juga bisa digunakan untuk object literals. Hal ini memungkinkan kita dapat menggabungkan beberapa object dengan kode yang lebih ringkas.

• main.js

1

const obj1 = { firstName: 'Obi-Wan', age: 30 };

2

const obj2 = { lastName: 'Kenobi', gender: 'M' };

3

​

4

const newObj = { ...obj1, ...obj2 };

5

​

6

console.log(newObj);

7

​

8

/* output

9

{ firstName: 'Obi-Wan', age: 30, lastName: 'Kenobi', gender: 'M' }

10

*/

Destructuring Object & Array

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

[
    {
        "id": 14,
        "title": "Belajar Fundamental Aplikasi Android",
        "author": "Google ATP"
    },
    {
        "id": 51,
        "title": "Belajar Membuat Aplikasi Android untuk Pemula",
        "author": "Google ATP"
    },
    {
        "id": 123,
        "title": "Belajar Dasar Pemrograman Web",
        "author": "Dicoding Indonesia"
    },
    {
        "id": 163,
        "title": "Belajar Fundamental Front-End Web Development",
        "author": "Dicoding Indonesia"
    }
]

Jika kita lihat pada struktur JSON di atas, kita dapat menyimpulkan struktur tersebut dibangun dari array dan object. Karena kedua hal ini banyak digunakan untuk mengelola data pada JavaScript untuk memudahkan developer, ES6 menambahkan fitur untuk destructuring object dan array.

Apa sebenarnya destructuring object dan array itu? Destructuring dalam JavaScript merupakan sintaksis yang dapat mengeluarkan nilai dari array atau properties dari sebuah object ke dalam satuan yang lebih kecil.

Secara tidak sadar mungkin kita pernah melakukan destructuring. Namun, sebelum ES6 hal tersebut dilakukan dengan cara seperti ini:

• Array
• Object

const foods = ['Pie', 'Cake', 'Honey']
 
const myFood = foods[0]
const yourFood = foods[1]
const ourFood = foods[2]
 
console.log(myFood, yourFood, ourFood)
 
/* output:
Pie Cake Honey
*/

Perhatikan kode pada destructuring object di atas, Kode tersebut akan mengekstraksi nilai yang berada di dalam object profile dan menyimpannya pada variabel lokal yang memiliki nama sama dengan properti di dalam object profile. Mungkin mengekstraksi nilai dari object dengan langkah ini terlihat mudah, tetapi bayangkan jika object memiliki banyak properti dan harus melakukan hal tersebut secara manual satu persatu. Terlalu banyak kode yang dituliskan berulang, bukan?

Itulah alasan ES6 menambahkan fitur yang memudahkan kita untuk destructuring object maupun array. Ketika kita ingin memecah struktur data menjadi bagian-bagian yang lebih kecil, kita akan dipermudah untuk mendapatkan data yang diinginkan.

Lantas bagaimana cara melakukan destructuring object dan array pada ES6? Mari kita simak materi berikutnya.

Destructuring Object

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

• main.js

1

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:

const {lastName} = profile;

Destructuring Assignment

Pada contoh sebelumnya, kita telah melakukan destructuring object pada deklarasi variabel. Namun, pada kasus tertentu mungkin kita perlu melakukannya pada variabel yang sudah dideklarasikan.

• main.js

1

const profile = {

2

    firstName: "John",

3

    lastName: "Doe",

4

    age: 18

5

}

6

7

let firstName = "Dimas";

8

let age = 20;

9

10

// menginisialisasi nilai baru melalui object destruction

11

({firstName, age} = profile);

12

13

console.log(firstName);

14

console.log(age);

15

16

/* output:

17

John

18

18

19

*/

 

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.

// tidak bisa karena JavaScript mengira kita membuat block statement
// block statement tidak bisa berada pada sisi kiri assignment
{firstName, age} = profile;

Nah, inilah fungsinya tanda kurung. Ia akan memberi tahu JavaScript bahwa tanda kurawal di dalamnya bukan sebuah block statement melainkan sebuah expression, sehingga assignment dapat dilakukan.

({firstName, age} = profile);

Default Values

Ketika kita mendestruksikan objek dan menetapkan variabel dengan nama yang bukan merupakan properti dari objek, maka nilai dari variabel tersebut menjadi undefined. Contohnya:

• main.js

1

const profile = {

2

    firstName: "John",

3

    lastName: "Doe",

4

    age: 18

5

}

6

7

8

const {firstName, age, isMale} = profile;

9

10

console.log(firstName)

11

console.log(age)

12

console.log(isMale)

13

14

/* output:

15

John

16

18

17

undefined

18

*/

 

Alternatifnya, kita bisa secara opsional mendefinisikan nilai default pada properti tertentu jika tidak ditemukan. Untuk melakukanya, tambahkan tanda assignment (=) setelah nama variabel dan tentukan nilai default-nya seperti ini:

• main.js

1

const profile = {

2

    firstName: "John",

3

    lastName: "Doe",

4

    age: 18

5

}

6

7

8

const {firstName, age, isMale = false} = profile;

9

10

console.log(firstName)

11

console.log(age)

12

console.log(isMale)

13

14

/* output:

15

John

16

18

17

false

18

*/

 

Jika nilai properti tidak ditemukan, maka nilai default akan diterapkan pada variabel.

Assigning to Different Local Variable Names

Sampai saat ini kita tahu bahwa untuk melakukan destrukturisasi object pada variabel lokal, kita perlu menyeragamkan penamaan variabel lokal dengan properti object-nya. Namun, sebenarnya dalam proses destrukturisasi object kita bisa menggunakan penamaan variabel lokal yang berbeda. ES6 menyediakan sintaksis tambahan yang membuat kita dapat melakukan hal tersebut. Penulisannya mirip seperti ketika kita membuat properti beserta nilainya pada object.

Contohnya seperti ini:

• main.js

1

const profile = {

2

    firstName: "John",

3

    lastName: "Doe",

4

    age: 18

5

}

6

7

const {firstName: localFirstName, lastName: localLastName, age: localAge} = profile;

8

9

console.log(localFirstName);

10

console.log(localLastName);

11

console.log(localAge);

12

13

14

/* output:

15

John

16

Doe

17

18

18

*/

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:

• main.js

1

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

2

3

const [firstFood, secondFood, thirdFood, fourthFood] = favorites;

4

5

console.log(firstFood);

6

console.log(secondFood);

7

console.log(thirdFood);

8

console.log(fourthFood);

9

10

/* output:

11

Seafood

12

Salad

13

Nugget

14

Soup

15

*/

 

Kode di atas merupakan contoh proses destructuring array. Di dalam array favorites terdapat 4 (empat) nilai string yang masing-masing nilainya dimasukkan ke variabel lokal firstFood, secondFood, thirdFood, dan fourthFood. Nilai dari array yang dimasukkan ke variabel lokal dipilih berdasarkan posisi di mana ia dideklarasikan pada array.

const [firstFood, secondFood, thirdFood, fourthFood] = favorites;

Sebenarnya kita bebas untuk menentukan nama dari variabel lokal. Yang terpenting adalah urutan ketika deklarasi variabelnya saja.

Kita juga bisa memilih nilai pada index tertentu untuk destrukturisasi pada array. Contohnya, jika ingin mengambil nilai ketiga dari array, kita tidak perlu menyiapkan variabel lokal untuk menampung nilai array pertama, kedua, atau pun keempat. Kita bisa melakukannya dengan membiarkan index array yang tidak kita inginkan tetap kosong (tanpa menulis variabel lokal). Lebih lanjut, tanda koma (,) tetap diperlukan untuk menunjukkan posisi index-nya seperti ini:

• main.js

1

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

2

3

const [, , thirdFood ] = favorites;

4

5

console.log(thirdFood);

6

7

/* output:

8

Nugget

9

*/

 

Destructuring Assignment

Kita juga bisa melakukan destructuring assignment pada array. Namun, tidak seperti object, kita tidak perlu membungkusnya dengan tanda kurung. Contohnya seperti berikut:

• main.js

1

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

2

3

let myFood = "Ice Cream";

4

let herFood = "Noodles";

5

6

[myFood, herFood] = favorites;

7

8

console.log(myFood);

9

console.log(herFood);

10

11

/* output:

12

Seafood

13

Salad

14

*/

 

Array destructuring assignment sangat berguna ketika kita hendak menukar nilai antara dua variabel. Sebelum ES6, untuk melakukan hal ini kita menggunakan cara manual menggunakan algoritma sorting seperti ini:

• main.js

1

var a = 1;

2

var b = 2;

3

var temp;

4

5

console.log("Sebelum swap");

6

console.log("Nilai a: " + a);

7

console.log("Nilai b: " + b);

8

9

temp = a;

10

a = b;

11

b = temp;

12

13

console.log("Setelah swap");

14

console.log("Nilai a: " + a);

15

console.log("Nilai b: " + b);

16

17

/* output

18

Sebelum swap

19

Nilai a: 1

20

Nilai b: 2

21

Setelah swap

22

Nilai a: 2

23

Nilai b: 1

24

*/

 

Untuk melakukan pertukaran nilai, kita membutuhkan variabel penengah. Pada contoh kode di atas menggunakan variabel temp. Variabel penengah dibutuhkan untuk menyimpan data sementara pada variabel yang akan ditukar. Hal ini menjadi kurang efektif karena kita harus membuat variabel baru yang sebenarnya hanya bersifat sementara.

Dengan array destructuring assignment, kita bisa menukar nilai variabel dengan mudah tanpa membuat variabel tambahan.

• main.js

1

let a = 1;

2

let b= 2;

3

4

console.log("Sebelum swap");

5

console.log("Nilai a: " + a);

6

console.log("Nilai b: " + b);

7

8

[a, b] = [b, a]

9

10

console.log("Setelah swap");

11

console.log("Nilai a: " + a);

12

console.log("Nilai b: " + b);

13

14

/* output

15

Sebelum swap

16

Nilai a: 1

17

Nilai b: 2

18

Setelah swap

19

Nilai a: 2

20

Nilai b: 1

21

*/

 

Default Values

Ketika melakukan destructuring array, tetapi terdapat variabel yang posisinya tidak dapat terjangkau oleh array, maka variabel tersebut akan bernilai undefined. Contohnya:

const favorites = ["Seafood"];
const [myFood, herFood] = favorites
 
console.log(myFood);
console.log(herFood);
 
/* output:
Seafood
undefined
*/

Sama seperti object, pada destructuring array kita juga dapat memberikan nilai default pada variabel yang tidak dapat terjangkau oleh array, sehingga nilai pada variabel tidak akan menjadi undefined.

• main.js

1

const favorites = ["Seafood"];

2

3

const [myFood, herFood = "Salad"] = favorites

4

5

console.log(myFood);

6

console.log(herFood);

7

8

/* output:

9

Seafood

10

Salad

11

*/

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:

const myMap = new Map();

Apabila ingin menetapkan nilai dari Map secara langsung, gunakan array multi dimensi seperti ini:

• main.js

1

const myMap = new Map([

2

    ['1', 'a String key'],

3

    [1, 'a number key'],

4

    [true, true]

5

]);

6

​

7

console.log(myMap);

8

​

9

/* output

10

Map(3) { '1' => 'a String key', 1 => 'a number key', true => true }

11

*/

 

Array pertama (luar) menyimpan masing-masing elemen atau pasangan key-value dari Map. Kemudian array di dalamnya memiliki dua elemen, di mana elemen pertama adalah key dan array keduanya merupakan value.

Ketika sudah membuat objek Map, kita bisa mendapatkan nilainya berdasarkan key tertentu dengan metode get(). Lalu, untuk menambahkan pasangan key-value baru gunakan metode set().

• main.js

1

const capital = new Map([

2

    ["Jakarta", "Indonesia"],

3

    ["London", "England"],

4

    ["Tokyo", "Japan"]

5

]);

6

​

7

console.log(capital.size);

8

console.log(capital.get("London"));

9

capital.set("New Delhi", "India");

10

console.log(capital.size);

11

console.log(capital.get("New Delhi"));

12

​

13

/* output

14

3

15

England

16

4

17

India

18

 */

 

Note:
Meskipun kita bisa menetapkan dan mendapatkan data pada map seperti ini:

const wrongMap = new Map();
 
wrongMap["My Key"] = "My Value";
console.log(wrongMap["My Key"]);

Namun, kode di atas bukanlah cara yang sesuai untuk mengoperasikan Map. Ketika kita menetapkan nilai map seperti di atas, data akan disimpan sebagai generic object. Ini akan mengakibatkan data tidak tersimpan dalam Map query dan tidak bisa menggunakan fitur dari Map seperti .has atau .delete.

• main.js

1

const wrongMap = new Map();

2

wrongMap["My Key"] = "My Value";

3

​

4

console.log(wrongMap.has("My Key"));

5

console.log(wrongMap.delete("My Key"));

6

​

7

/* output

8

false

9

false

10

 */

 

Jadi, pastikan untuk menggunakan metode .set() dan .get() untuk Map.

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

1

const numberSet = new Set([1, 4, 6, 4, 1]);

2

​

3

console.log(numberSet);

4

​

5

/* output

6

Set(3) { 1, 4, 6 }

7

*/

 

Pada kode di atas terdapat beberapa angka yang duplikat, yaitu angka 1 dan 4. Secara otomatis Set akan membuang angka yang sama, sehingga nilai yang tersimpan adalah {1, 4, 6}.

Untuk menambahkan data ke dalam Set kita bisa memanfaatkan fungsi add().

• main.js

1

const numberSet = new Set([1, 4, 6, 4, 1]);

2

numberSet.add(5);

3

numberSet.add(10);

4

numberSet.add(6);

5

​

6

console.log(numberSet);

7

​

8

/* output

9

Set(5) { 1, 4, 6, 5, 10 }

10

*/

 

Fungsi add() hanya menerima satu argumen. Jika Anda memasukkan array, maka array tersebut akan dianggap sebagai satu elemen sendiri. Nilai yang duplikat akan diabaikan.

• main.js

1

const numberSet = new Set([1, 4, 6, 4, 1]);

2

numberSet.add(5);

3

numberSet.add(10);

4

numberSet.add(6);

5

​

6

numberSet.delete(4);

7

​

8

console.log(numberSet);

9

​

10

/* output

11

Set(4) { 1, 6, 5, 10 }

12

*/

 

Ingat bahwa Set tidak memiliki urutan atau index, sehingga argumen yang dimasukkan ke dalam fungsi delete adalah nilai yang ingin dihapus, bukan index-nya.

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 methodget(), 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.

let visitsCountMap = new Map(); // Menyimpan daftar user
 
function countUser(user) {
    let count = visitsCountMap.get(user) || 0;
    visitsCountMap.set(user, count + 1);
}
 
let jonas = { name: "Jonas" };
countUser(jonas);                // Menambahkan user "Jonas"
 
jonas = null;                    // Data object "Jonas" dihapus
 
console.log(visitsCountMap);
 
/* output
Map(1) { { name: 'Jonas' } => 1 }
*/

Ketika reference objek jonas dihapus dengan mengubahnya menjadi null, seharusnya map tidak lagi menyimpan data user (garbage collected). Namun, kenyataannya data jonas masih tersedia di dalam Map. Artinya, data jonas masih tersimpan di dalam memori sampai kita benar-benar menghapusnya.

Berbeda jika kita menggunakan WeakMap seperti inI:

let visitsCountMap = new WeakMap();

Ketika nilai jonas sudah tidak bisa dijangkau, object jonas akan dihapus dari memori termasuk informasi yang disimpan di dalam WeakMap.

• main.js

1

let visitsCountMap = new WeakMap(); // Menyimpan daftar user

2

​

3

function countUser(user) {

4

    let count = visitsCountMap.get(user) || 0;

5

    visitsCountMap.set(user, count + 1);

6

}

7

​

8

let jonas = { name: "Jonas" };

9

countUser(jonas);                // Menambahkan user "Jonas"

10

​

11

jonas = null;                    // Data object "Jonas" dihapus

12

​

13

console.log(visitsCountMap);

14

​

15

/* output

16

WeakMap { <items unknown> }

17

*/

 

Seperti halnya WeakMap, WeakSet adalah versi weak reference dari Set. Perbedaan antara WeakSet dan Set antara lain:

• WeakSet tidak bisa menyimpan nilai primitif.
• WeakSet bukan iterable dan hanya memiliki method add(), has(), dan delete().
• WeakSet tidak memiliki properti size.

Kuis Coding : Object

Untuk menguji kemampuan praktikal Anda dalam memahami materi object di JavaScript, silakan selesaikan kuis berikut.

Sebelum Anda mengerjakan kuis, ada beberapa hal yang perlu Anda perhatikan.

• Mohon untuk membaca secara seksama perintah, kriteria, atau soal pada komentar kode yang diberi tanda TODO. 
• Lakukan pengujian pada kode yang Anda tulis contohnya dengan menggunakan console.log() untuk memastikan hasil sesuai dengan yang Anda harapkan. Gunakan tombol Jalankan.

Bila sudah yakin dengan pekerjaan yang Anda lakukan, silakan submit kode dengan klik tombol Submit kode. Jika kode yang di-submit benar, Anda bisa melanjutkan ke modul berikutnya. Jika tidak, Anda bisa memperbaiki kembali kode sebanyak yang Anda mau.

Batas waktu tunggu untuk mengirimkan kembali perbaikan kode adalah 1 menit. Jadi pastikan kode yang Anda tulis sudah memenuhi perintah, kriteria, atau soal pada kuis kali ini.

Selamat, Anda telah menyelesaikan modul ini.
Kode yang Anda kirimkan telah berfungsi dengan baik.

• main.js

1

/**

2

 * TODO

3

 * 1. Buatlah variabel dengan nama restaurant yang object dengan ketentuan berikut:

4

 *    - Memiliki properti bernama "name"

5

 *       - Bertipe data string

6

 *       - Bernilai apa pun, asalkan tidak string kosong atau null.

7

 *    - Memiliki properti bernama "city"

8

 *       - Bertipe data string

9

 *       - Bernilai apa pun, asalkan tidak string kosong atau null.

10

 *    - Memiliki properti "favorite drink"

11

 *       - Bertipe data string

12

 *       - Bernilai apa pun, asalkan tidak string kosong atau null.

13

 *    - Memiliki properti "favorite food"

14

 *       - Bertipe data string

15

 *       - Bernilai apa pun, asalkan tidak string kosong atau null.

16

 *    - Memiliki properti "isVegan"

17

 *       - Bertipe data boolean

18

 *       - Bernilai boolean apa pun.

19

 *

20

 * 2. Buatlah variabel bernama name.

21

 *    Kemudian isi dengan nilai name dari properti object restaurant

22

 * 3. Buatlah variabel bernama favoriteDrink.

23

 *    Kemudian isi dengan nilai "favorite drink" dari properti object restaurant

24

 */

25

​

26

​

27

// TODO

28

const restaurant = {

29

​

30

name: "Orion",

31

​

32

  city: "Garut",

33

​

34

  "favorite drink": "Pepsi",

35

​

36

  "favorite food": "Burger",

37

​

38

  isVegan: true

39

​

40

};

41

​

42

let name = "Orion";

43

​

44

let favoriteDrink = "Pepsi";

45

​

46

/**

47

 * Hiraukan kode di bawah ini

48

 */

49

module.exports = { restaurant, name, favoriteDrink };

Kuis Coding : Array

Untuk menguji kemampuan praktikal Anda dalam memahami materi Array di JavaScript, silakan selesaikan kuis berikut.

Sebelum Anda mengerjakan kuis, ada beberapa hal yang perlu Anda perhatikan.

• Mohon untuk membaca secara seksama perintah, kriteria, atau soal pada komentar kode yang diberi tanda TODO. 
• Lakukan pengujian pada kode yang Anda tulis contohnya dengan menggunakan console.log() untuk memastikan hasil sesuai dengan yang Anda harapkan. Gunakan tombol Jalankan.

Bila sudah yakin dengan pekerjaan yang Anda lakukan, silakan submit kode dengan klik tombol Submit kode. Jika kode yang di-submit benar, Anda bisa melanjutkan ke modul berikutnya. Jika tidak, Anda bisa memperbaiki kembali kode sebanyak yang Anda mau.

Batas waktu tunggu untuk mengirimkan kembali perbaikan kode adalah 1 menit. Jadi pastikan kode yang Anda tulis sudah memenuhi perintah, kriteria, atau soal pada kuis kali ini.

Good luck!

Selamat, Anda telah menyelesaikan modul ini.
Kode yang Anda kirimkan telah berfungsi dengan baik.

• main.js

1

/**

2

 * TODO:

3

 * Buatlah sebuah variabel dengan nama evenNumber yang merupakan sebuah array dengan ketentuan:

4

 *   - Array tersebut menampung bilangan genap dari 1 hingga 100

5

 *

6

 * Catatan:

7

 *   - Agar lebih mudah, gunakanlah for loop dan logika if untuk mengisi bilangan genap pada array.

8

 */

9

​

10

// TODO

11

const evenNumber = [];

12

​

13

let angka;

14

​

15

for(let angka = 1; angka <= 100; angka++){

16

​

17

 if((angka%2)==0){

18

​

19

   evenNumber.push(angka);

20

​

21

 }

22

​

23

}

24

​

25

console.log(evenNumber);

26

​

27

/**

28

 * Hiraukan kode di bawah ini

29

 */

30

​

31

module.exports = evenNumber;

32

​

Kuis Coding : Map

Untuk menguji kemampuan praktikal Anda dalam memahami materi Map di JavaScript, silakan selesaikan kuis berikut.

Sebelum Anda mengerjakan kuis, ada beberapa hal yang perlu Anda perhatikan.

• Mohon untuk membaca secara seksama perintah, kriteria, atau soal pada komentar kode yang diberi tanda TODO. 
• Lakukan pengujian pada kode yang Anda tulis contohnya dengan menggunakan console.log() untuk memastikan hasil sesuai dengan yang Anda harapkan. Gunakan tombol Jalankan.

Bila sudah yakin dengan pekerjaan yang Anda lakukan, silakan submit kode dengan klik tombol Submit kode. Jika kode yang di-submit benar, Anda bisa melanjutkan ke modul berikutnya. Jika tidak, Anda bisa memperbaiki kembali kode sebanyak yang Anda mau.

Batas waktu tunggu untuk mengirimkan kembali perbaikan kode adalah 1 menit. Jadi pastikan kode yang Anda tulis sudah memenuhi perintah, kriteria, atau soal pada kuis kali ini.

Good luck!

Selamat, Anda telah menyelesaikan modul ini.
Kode yang Anda kirimkan telah berfungsi dengan baik.

• main.js

1

/**

2

 * TODO:

3

 * 1. Buatlah variabel currency yang merupakan Map dengan kriteria:

4

 *   - key "USD", value 14000

5

 *   - key "JPY", value 131

6

 *   - key "SGD", value 11000

7

 *   - key "MYR", value 3500

8

 * 2. Buatlah variabel priceInIDR yang bernilai dari hasil perkalian:

9

 *     - priceInJPY dengan nilai currency JPY

10

 */

11

​

12

const priceInJPY = 5000;

13

​

14

// TODO

15

const currency = new Map([

16

    ["USD", 14000],

17

    ["JPY", 131],

18

    ["SGD", 11000],

19

    ["MYR", 3500]

20

]);

21

const priceInIDR = currency.get("JPY") * priceInJPY

22

​

23

console.log(priceInIDR)

24

​

25

/**

26

 * Hiraukan kode di bawah ini

27

 */

28

module.exports = { currency, priceInJPY, priceInIDR };

29

​

Rangkuman Materi

Untuk menyelesaikan masalah yang lebih kompleks secara efisien, kita membutuhkan struktur data yang lebih canggih dibandingkan variabel primitif. JavaScript memiliki tipe data lain yang dapat menyimpan banyak data sekaligus, contohnya seperti Object, Arrays, Map, dan Set.

Beberapa hal yang telah kita bahas pada modul ini, antara lain:

• Object adalah tipe data kompleks untuk menyimpan banyak data dengan format key-value. Key pada object harus berupa string.
• Array digunakan untuk menyimpan banyak data. Data pada array disusun secara berurutan dan diakses menggunakan index.
• Map menyimpan banyak data dengan format key-value seperti object. Namun, key pada Map dapat bertipe apa pun.
• Set digunakan untuk menyimpan banyak data secara unik, tidak ada duplikasi, tidak berurutan, dan tidak diindeks.

Materi Pendukung

Berikut ini adalah beberapa sumber materi tambahan yang bisa Anda pelajari:

• Object
• Array
• Map
• Set
• WeakMap and WeakSet
• Garbage collection

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.

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 inputan dari sebuah fungsi. Contoh:

function multiply(a, b) {
    return a * b;
}

Argument merupakan nilai atau expression yang dimasukkan ke dalam fungsi. Contohnya:

multiply(3, 4);

---

Setelah membuat fungsi kita dapat memanggilnya dengan menuliskan nama fungsi diikuti tanda kurung dan memasukkan argumen di dalamnya (jika ada).

• main.js

1

function greeting() {

2

    console.log("Good Morning!")

3

}

4

​

5

greeting();

6

​

7

/* output

8

Good Morning!

9

*/

 

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:

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}!`);
    }
}

Sehingga dalam memanggilnya pun kita perlu mengirimkan dua buah nilainya sebagai argumen:

• main.js

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

}

10

​

11

greeting("Harry", "French");

12

​

13

/* output

14

Bonjour Harry!

15

*/

 

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:

• main.js

1

function multiply(a, b) {

2

    return a * b;

3

}

4

​

5

let result = multiply(10, 2)

6

console.log(result)

7

​

8

/* output

9

20

10

*/

 

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:

• main.js

1

function greeting(name, language) {

2

    if(language === "English") {

3

        return `Good Morning ${name}!`

4

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

5

        return `Bonjour ${name}!`;

6

    } else {

7

        return `Selamat Pagi ${name}!`;

8

    }

9

}

10

​

11

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

12

console.log(greetingMessage);

13

​

14

/* output

15

Bonjour Harry!

16

*/

 

Yang perlu kita perhatikan lagi, ketika statement return tereksekusi, maka fungsi akan langsung terhenti dan mengembalikan nilai.

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:

• main.js

1

const greeting = function(name, language) {

2

    if(language === "English") {

3

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

4

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

5

        return "Bonjour " + name + "!";

6

    } else {

7

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

8

    }

9

}

10

​

11

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

12

​

13

/* output

14

Good Morning Ron!

15

 */

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 inputan dari sebuah fungsi. Contoh:

function multiply(a, b) {
    return a * b;
}

Argument merupakan nilai atau expression yang dimasukkan ke dalam fungsi. Contohnya:

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:

• main.js

1

const user = {

2

    id: 24,

3

    displayName: 'kren',

4

    fullName: 'Kylo Ren',

5

};

6

​

7

function introduce({displayName, fullName}) {

8

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

9

}

10

​

11

introduce(user);

12

​

13

/* output

14

kren is Kylo Ren

15

*/

 

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.

• main.js

1

function exponentsFormula(baseNumber, exponent) {

2

    let result = baseNumber ** exponent;

3

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

4

}

5

​

6

exponentsFormula(2);

7

​

8

/* output

9

2^undefined = NaN

10

*/

 

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.

• main.js

1

function exponentsFormula(baseNumber, exponent = 2) {

2

    let result = baseNumber ** exponent;

3

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

4

}

5

​

6

exponentsFormula(3);

7

​

8

/* output

9

3^2 = 9

10

*/

 

Rest Parameter

Masih ingat dengan spread operator (...)? Jika spread operator menyebarkan array menjadi beberapa elemen berbeda, rest parameter ini adalah kebalikan dari operator tersebut. Penasaran?

Rest parameter juga dituliskan menggunakan three consecutive dots (...). Dengan rest parameter, kita dapat menggabungkan beberapa elemen menjadi satu array. Tentu teknik ini sangat bermanfaat ketika kita hendak membuat sebuah fungsi dengan parameter yang tidak pasti.

Sebagai contoh adalah fungsi yang menjumlahkan seluruh nilai argumen seperti berikut:

• main.js

1

function sum(...numbers) {

2

    let result = 0;

3

    for (let number of numbers) {

4

        result += number;

5

    }

6

    return result;

7

}

8

​

9

console.log(sum(1, 2, 3, 4, 5));

10

​

11

/* output

12

15

13

*/

Arrow Function

ES6 memperkenalkan fungsi baru yang dinamakan arrow function expression atau lebih dikenal sebagai arrow function. Arrow function mirip seperti regular function secara perilaku, tetapi berbeda dalam penulisannya. Sesuai namanya, fungsi didefinisikan menggunakan tanda panah atau fat arrow ( => ). Tentunya penulisan arrow function ini akan lebih singkat.

Selain perbedaan sintaksis, terdapat perbedaan perilaku antara arrow function dan regular function. Regular function dapat berupa function declaration dan function expression. Namun, arrow function hanya berupa expression function saja. Itu sebabnya arrow function memiliki nama lengkap “arrow function expression”.

• Regular function
• Arrow function

// function declaration
function sayHello(greet) {
    console.log(`${greet}!`);
}
 
// function expression
const sayName = function (name) {
    console.log(`Nama saya ${name}`)
}

Arrow Function 

1. // function expression
2. const sayHello = (greet) => {
3.     console.log(`${greet}!`)
4. }
5.  
6. const sayName = (name) => {
7.     console.log(`Nama saya ${name}`)
8. }

Pada arrow function kita tidak perlu menuliskan keyword function setiap membuat fungsi. Kita tetap menuliskan parameter di dalam tanda kurung lalu diikuti dengan tanda panah (=>) sebelum kurung kurawal.

const sayName = (name) => {
    console.log(`Nama saya ${name}`)
}

Apabila fungsi hanya memiliki satu parameter, maka kita bisa menghapuskan tanda kurung seperti berikut:

• main.js

1

const sayName = name => {

2

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

3

}

4

​

5

sayName("Leia");

6

​

7

/* output

8

Nama saya Leia

9

 */

 

Namun, jika kita sama sekali tidak membutuhkan parameter, maka kita tetap menuliskan tanda kurung namun kosong seperti ini:

• main.js

1

const sayHello = () => {

2

    console.log("Selamat pagi semuanya!")

3

};

4

​

5

sayHello();

6

​

7

/* output

8

Selamat pagi semuanya!

9

 */

 

Satu hal yang menarik, ketika body dari function hanya terdiri dari satu baris, kita bisa menghapus tanda kurung kurawal. Tentunya ini akan menghemat baris kode yang kita tulis.

• main.js

1

const sayName = name => console.log(`Nama saya ${name}`);

2

sayName("Leia");

3

​

4

const sayHello = () => console.log("Selamat pagi semuanya!");

5

sayHello();

6

​

7

/* output

8

Nama saya Leia

9

Selamat pagi semuanya!

10

 */

 

Ketika sebuah fungsi perlu mengembalikan nilai, kita tidak perlu lagi menuliskan return (hanya bekerja untuk fungsi satu baris).

• main.js

1

const multiply = (a, b) => a * b;

2

console.log(multiply(3, 4));

3

​

4

/* output

5

12

6

 */

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:

// global variable, dapat diakses pada parent() dan child()
const a = 'a'; 
 
function parent() {
    // local variable, dapat diakses pada parent() dan child(), tetapi tidak dapat diakses di luar dari fungsi tersebut.
    const b = 'b'; 
    
    function child() {
        // local variable, dapat diakses hanya pada fungsi child().
        const c = 'c';
    }
}

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

2

    total = num * num;

3

    return total;

4

}

5

​

6

let total = 9;

7

let number  = multiply(20);

8

​

9

console.log(total)

10

​

11

/* output

12

400

13

*/

 

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.

Closure

Setelah mempelajari tentang scope pada materi selanjutnya, kali ini kita akan membahas seputar closure. Sebelumnya kita telah tahu bahwa fungsi dapat didefinisikan dalam lingkup global atau di dalam fungsi lain. Suatu fungsi yang dapat mengakses variabel di dalam lexical scope-nya disebut dengan closure. Lexical scope berarti pada sebuah fungsi bersarang, fungsi yang berada di dalam memiliki akses ke variabel di lingkup induknya.

• main.js

1

function init() {

2

    var name = 'Obi Wan';   // Variabel lokal di dalam scope fungsi init

3

4

    function greet() {      // Inner function, merupakan contoh closure

5

        console.log(`Halo, ${name}`);   // Memanggil variabel yang dideklarasikan di parent function

6

    }

7

​

8

    greet();

9

}

10

​

11

init();

12

​

13

/* output

14

Halo, Obi Wan

15

 */

 

Fungsi init() memiliki variabel lokal name dan fungsi greet(). Fungsi greet() adalah inner function yang didefinisikan di dalam init() dan hanya bisa diakses dari dalam fungsi init(). Perhatikan bahwa fungsi greet() tidak memiliki variabel lokal. Namun, karena inner function memiliki akses ke variabel di parent function-nya, sehingga greet() dapat mengakses variabel name. Itulah yang dimaksud dengan lexical scope.

Sekarang perhatikan contoh kode berikut:

• main.js

1

function init() {

2

    var name = 'Obi Wan';

3

​

4

    function greet() {

5

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

6

    }

7

​

8

    return greet;

9

}

10

​

11

let myFunction = init();

12

myFunction();

13

​

14

/* output

15

Halo, Obi Wan

16

 */

 

Kode di atas akan menghasilkan output yang sama. Perbedaannya adalah fungsi greet() dikembalikan (return) dari outer function-nya sebelum dieksekusi. Karena variabel name berada dalam scope init(), maka umumnya variabel tersebut akan hilang atau dihapus ketika fungsinya selesai dijalankan. Namun, pada kasus di atas fungsi greet() yang diakses melalui fungsi MyFunction() masih memiliki referensi atau akses ke variabel name. Variabel pada mekanisme di atas telah tertutup (close covered), yang berarti variabel tersebut berada di dalam closure.

Memang di awal cukup sulit untuk memahami closure. Jadi, mari kita lihat langsung untuk apa closure ini digunakan pada suatu program yang nyata.

JavaScript tidak memiliki cara untuk mendeklarasikan suatu fungsi atau variabel menjadi private seperti bahasa Java. Sehingga sebuah fungsi atau variabel bisa diakses dari mana pun. Kenapa kita membutuhkan private method? Salah satunya adalah untuk membatasi akses ke fungsi atau variabel. Perhatikan contoh berikut:

• main.js

1

let counter = 0;

2

​

3

let add = () => {

4

    return ++counter;

5

}

6

​

7

console.log(add());

8

console.log(add());

9

counter = 23;

10

console.log(add());

11

​

12

/* output

13

1

14

2

15

24

16

 */

 

Nilai counter akan bertambah ketika kita memanggil fungsi add(). Namun, kita juga bisa mengubah nilai counter secara langsung dengan assignment operator. Pada contoh program yang lebih kompleks, sebaiknya hal ini dihindari karena perubahan langsung pada nilai counter bisa saja memunculkan bug.

Closure memungkinkan kita membuat fungsi dan variabel seolah menjadi private. Seperti inilah contoh program counter yang dibuat dengan closure:

• main.js

1

let add = () => {

2

    let counter = 0;

3

    return () => {

4

        return ++counter;

5

    };

6

}

7

​

8

let addCounter = add();

9

​

10

console.log(addCounter());

11

console.log(addCounter());

12

console.log(addCounter());

13

​

14

/* output

15

1

16

2

17

3

18

 */