Pengenalan JavaScript

Sebelum mulai belajar suatu hal yang baru, penting bagi Anda untuk
memahami apa yang akan dipelajari dan apa yang bisa dilakukan
dengannya. Dalam hal ini kita akan mulai mengenal JavaScript.

Pada akhir modul ini, Anda diharapkan dapat:

 Mengetahui apa itu JavaScript

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

Apa itu JavaScript

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

Awalnya JavaScript dibuat supaya dapat berjalan di lingkungan

browser dan membuat website menjadi lebih interaktif. Namun, saat
ini Anda sebagai developer dapat menggunakan bahasa pemrograman
JavaScript 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.
 1. console.log(“Hello, World!”);

Sederhana, bukan? Itulah salah satu ciri utama JavaScript sebagai

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

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

Setelah diadopsi di luar Netscape, JavaScript distandarisasi oleh

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

Terdapat beberapa versi JavaScript yang sudah distandarisasi oleh

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

Walaupun begitu, ini bukan akhir dari JavaScript. Pengembangan

berganti menjadi ECMAScript 5 dengan mengurangi ambisinya dan
hanya melakukan perbaikan pada hal yang tidak jadi kontroversi.
Pembaruan tersebut berhasil dan akhirnya ECMAScript 5 rilis pada
tahun 2009.

Lalu, pada tahun 2015 ECMAScript 6 rilis dengan membawa perubahan

yang cukup besar termasuk ide-ide yang sudah direncanakan untuk
versi 4. Sejak saat itu, tiap tahun JavaScript melakukan update bersifat
minor.

Kenapa JavaScript
Jadi, kenapa kita perlu mempelajari JavaScript?

Alasan utamanya karena JavaScript merupakan bahasa yang penting

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

Berikut ini adalah beberapa kelebihan dari JavaScript yang dapat Anda
pertimbangkan sebelum mulai mempelajari JavaScript:

 JavaScript bahasa yang versatile

JavaScript bisa berjalan di lingkungan browser, server, bahkan
desktop. Artinya, jika Anda bisa menguasai bahasa ini, maka skill
Anda bisa digunakan di mana pun.

 Mudah dipelajari oleh pemula

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

Selain itu, sebagai salah satu bahasa pemrograman paling

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

 Potensi karir yang meyakinkan

Mengikuti perkembangan teknologi dan banyaknya bisnis yang
mulai merambah ke ranah digital, JavaScript menjadi salah
satu skill yang paling banyak dicari di industri. Jika Anda mencari
kata kunci “JavaScript” pada laman pencarian kerja seperti
JobStreet, akan muncul hampir 1.500 lowongan pekerjaan di
Indonesia yang bisa Anda lamar.
 Bukan hanya ramai peminat, pekerjaan yang berkaitan dengan
JavaScript juga dihargai cukup tinggi. Menurut data yang diambil
dari situs id.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

Pengenalan Fundamentals JavaScript

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

Pada akhir modul ini, Anda diharapkan dapat:

 Menuliskan kode JavaScript dan menampilkannya ke konsol

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

Menulis Kode JavaScript Pertama

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

1. console.log(“Hello, World!”);

console.log adalah kode bawaan JavaScript untuk menampilkan pesan

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

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

 main.js


1.

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

3
// Tampilkan nama Anda ke layar pada kode di bawah:
 INPUT  RESET
 JALANKAN
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:

1. 5; // Baris kode ini merupakan expression karena interpreter akan

membaca kode ini dan menghasilkan nilai 5.

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

1. var yourName;

2. let yourAge;
 3. const numberOfDays;  // declaration statement

Jika Anda masih bingung untuk membedakan expression dan

statement, tidak perlu khawatir. Saat ini belum banyak kode yang bisa
kita jadikan contoh. Namun, konsep ini akan banyak kita gunakan pada
materi-materi yang akan datang. Yang perlu Anda ingat adalah:

 Expression merupakan kode yang menghasilkan nilai.

 Statement menunjukkan aksi yang dilakukan.

Comments

Pada materi sebelumnya kita telah membahas bahwa kode yang kita tulis

merupakan kumpulan instruksi yang harus dijalankan oleh komputer. Salah satu

instruksi yang penting adalah memberi tahu komputer untuk mengabaikan

perintah yang kita tulis. Instruksi yang ditulis dalam suatu program tetapi tidak

dijalankan oleh komputer disebut “comments”.

Sebuah komentar akan dilewatkan oleh interpreter atau compiler, sehingga tidak

akan memengaruhi alur program yang kita tulis. Komentar ini bisa digunakan

sebagai dokumentasi atau penjelasan dari kode yang kita tulis.

Terdapat dua metode untuk memberikan komentar. Pertama, untuk memberikan

komentar pada satu baris saja, kita bisa gunakan tanda dua garis miring (//) di

awal baris.

 main.js


 1.

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

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

 INPUT  RESET

 JALANKAN

Lalu, untuk memberikan komentar lebih dari satu baris kita bisa menggunakan

tanda /* sebagai pembuka komentar dan tanda */ untuk penutup komentar. Teks

apa pun yang berada di antara tanda tersebut akan dijadikan komentar dan tidak

akan dieksekusi.

 main.js

1.

/* Ini merupakan komentar dengan lebih dari satu baris

Teks apapun yang berada disini akan dijadikan komentar.

3
Ketika menggunakan ini, jangan lupa untuk menutupnya.

*/

 INPUT  RESET

 JALANKAN

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

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

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

Sekarang bagaimana caranya membuat sebuah variabel dalam JavaScript? Cukup mudah.
Ketikkan keyword let yang diikuti dengan nama variabelnya.

1. let lastName;

Kode untuk mendeklarasikan variabel seperti di atas juga dikenal dengan declaration

statement.

Selanjutnya, Anda bisa mengisi nilai variabel di atas menggunakan tanda sama dengan (=).

 main.js


1.

1
let lastName;
2
lastName = "Skywalker";
3

4
console.log(lastName);
5

6
/* output
7
Skywalker
8
*/
 INPUT  RESET
 JALANKAN
Anda juga bisa langsung menginisialisasi nilai variabel setelah mendeklarasikannya seperti
berikut:

 main.js


1.

1
let lastName = "Skywalker";
2

3
console.log(lastName);
4

5
/* output
6
Skywalker
7
*/
 INPUT  RESET
 JALANKAN
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:

1. let fullName = let lastName; // Error karena let lastName adalah

sebuah statement untuk deklarasi variabel. Statement tidak bisa

berada di posisi expression.

2. let fullName = (lastName = "Skywalker"); // (lastName = "Skywalker")

merupakan expression, sehingga kode ini tidak error.

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

1
const z = 100;
2
console.log(z);
3
z = 200;
4
console.log(z)
5

6
/* TypeError: Assignment to constant variable. */
 INPUT  RESET
 JALANKAN