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.

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.

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

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

/* Ini merupakan komentar dengan lebih dari satu baris

Teks apapun yang berada disini akan dijadikan komentar.

Ketika menggunakan ini, jangan lupa untuk menutupnya.

*/

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

let lastName;

lastName = "Skywalker";

console.log(lastName);
/* output

Skywalker

*/

Anda juga bisa langsung menginisialisasi nilai variabel setelah

mendeklarasikannya seperti berikut:

let lastName = "Skywalker";

console.log(lastName);
/* output

Skywalker

*/

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.

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

const z = 100;
console.log(z);

z = 200;

console.log(z)

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

1
let x;

console.log(typeof(x));

/* output: undefined */

 Input  Reset

 Jalankan
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:
1. 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))

/* output: number */

let y = 17.25;
 7

console.log(typeof(y))

/* output: number */

 Input  Reset

 Jalankan

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 Con

+ Penjumlahan 10 + 10 = 20

- Pengurangan 15 - 7 = 8

/ Pembagian 21 / 7 = 3

* Perkalian 9 * 9 = 81

% Sisa hasil bagi 5%2=1

** Perpangkatan 3 ** 3 = 27

 main.js

 1.

let a = 12;

let b = 9;

3
 4

console.log(a + b)

console.log(a - b)

console.log(a * b)

console.log(a / b)

8
console.log(a % b)

10

/* output:

11

21

12

13
108

14

1.3333333333333333

15

16

*/

 Input  Reset

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

3
let postfix = 5;

console.log(postfix++);

/* output: 5 */

console.log(postfix);

/* output: 6 */

8
 9

let prefix = 5;

10

console.log(++prefix);

11

/* output: 6 */

 Input  Reset

 Jalankan
BigInt
Pada JavaScript, tipe data “Number” hanya mencakup nilai dari -(2 53 - 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;

const myInt = 1234567890123456789012345678901234567890;

3
 4

console.log(bigNumber);

console.log(myInt);

/* output

8
1234567890123456789012345678901234567890n

1.2345678901234568e+39

10

*/

 Input  Reset

 Jalankan

Meskipun digunakan untuk menyimpan angka dengan nilai besar, namun

BigInt tetap bisa digunakan untuk nilai yang lebih kecil.
1. 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.

1
console.log(5n + 2n);

console.log(5n - 2n);

console.log(5n * 2n);

console.log(5n / 2n);

console.log(5n % 2n);

6
 7

/* output

7n

3n

10

10n

11
2n; Bukan 2.5n

12

1n

13

*/

 Input  Reset

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

1
let greet = "Hello";

console.log(typeof(greet))

/* output: string */

 Input  Reset

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

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

console.log(question)

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

 Input  Reset
 Jalankan

Lalu bagaimana jika teks memiliki kedua tanda petik seperti ini?

 main.js


1.

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

console.log(answer);

 Input  Reset

 Jalankan

Tentunya kode di atas akan menghasilkan eror. Solusinya,

gunakan backslash(\) untuk mengurangi ambiguitas dalam tanda petik.
Mekanisme ini juga dikenal dengan nama escape string. Sehingga kode di
atas akan menjadi seperti berikut:
 1. const answer = '"I think it\'s awesome!" he answered confidently';

Backslash sebelum tanda petik akan memberitahukan interpreter bahwa

itu hanyalah tanda petik dan tidak boleh ditafsirkan sebagai pembatas
string. Selain tanda petik, backslash juga berguna untuk mengabaikan
simbol lain yang menimbulkan ambigu di dalam string, contohnya seperti
backslash itu sendiri.
1. console.log("Windows path: C:\\Program Files\\MyProject");

Pada String, kita juga dapat menggunakan operator plus (+). Operator
tersebut berfungsi untuk menggabungkan dua teks yang terpisah menjadi
satu buah teks. Contohnya seperti ini:

 main.js

 1.

let greet = "Hello";

let moreGreet = greet + greet;

3
console.log(moreGreet);

/* output: HelloHello */

 Input  Reset

 Jalankan

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.

1
const myName = "Luke";

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

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

 Input  Reset

 Jalankan
Perhatikan bahwa untuk mendefinisikan string template, Anda perlu
menggunakan backticks (`), biasanya terletak di keyboard di bawah tombol
Esc . 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;

let y = false;

3
 4

console.log(typeof(x))

console.log(typeof(y))

/* output:

8
boolean

boolean

10

*/

 Input  Reset

 Jalankan

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

 main.js

 1.

const a = 10;

const b = 12;

3
 4

let isGreater = a > b;

let isLess = a < b;

console.log(isGreater);

8
console.log(isLess);

10

/* output:

11

false

12

true

13
*/

 Input  Reset

 Jalankan

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

/* output:

null

*/
 Input  Reset

 Jalankan

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

3
console.log(id);

/* output

Symbol(id)

*/

 Input  Reset
 Jalankan

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.

1
const id1 = Symbol("id");

const id2 = Symbol("id");

console.log(id1 == id2);

6
/* output

false

*/

 Input  Reset

 Jalankan

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.
 1. x = y;

Expression di atas berarti kita menginisialisasikan nilai y pada variabel x,

sehingga nilai x sekarang memiliki nilai yang sama dengan y.

Ada beberapa assignment operator tambahan lain dalam

menginisialisasikan nilai pada variabel. Kita bisa menyebutnya
sebagai shortcut dalam menentukan nilai. Contohnya:

 main.js

 1.

let x = 10;

let y = 5

x += y;
 5

console.log(x);

/* output

15
 10

*/

 Input  Reset

 Jalankan

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.
1. let x = 10;

2. let y = 5;

3.  

4. x += y; // artinya -> x = x + y;
 5. x -= y; // artinya -> x = x - y;

6. x *= y; // artinya -> x = x * y;

7. x /= y; // artinya -> x = x / y;

8. 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 (tida

!= Membandingkan kedua nilai apakah tidak sama

=== Membandingkan kedua nilai apakah identik.

!== Membandingkan kedua nilai apakah tidak identi

> Membandingkan dua nilai apakah nilai pertama

>= Membandingkan dua nilai apakah nilai pertama

dengan nilai kedua.
 Operator Fungsi

< Membandingkan dua nilai apakah nilai pertama

kedua.

<= Membandingkan dua nilai apakah nilai pertama

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;

let b = 12;

3
 4

console.log(a < b);

console.log(a > b);

/* output

8
true

false

10

*/

 Input  Reset

 Jalankan

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

const aNumber = 10

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

 5

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

/* output

true

false
 10

*/

 Input  Reset

 Jalankan

Logical Operator
Terdapat beberapa operator lain yang dapat kita gunakan untuk
menetapkan logika yang lebih kompleks, yakni dengan logical operators.
Dengan logical operator, kita dapat menggunakan kombinasi dari dua nilai
boolean atau bahkan lebih dalam menetapkan logika.

Pada JavaScript terdapat tiga buah karakter khusus yang berfungsi

sebagai logical operator. Berikut macam-macam logical operator dan
fungsinya:
 Operator Deskripsi

&& Operator dan (and). Logika akan menghasilkan

semua kondisi terpenuhi (bernilai true).

|| Operator atau (or). Logika akan menghasilkan n

salah satu kondisi terpenuhi (bernilai true).

! Operator tidak (not). Digunakan untuk membal

Berikut contoh penerapannya pada JavaScript:

 main.js

 1.

let a = 10;

let b = 12;

3
 4

/* AND operator */

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

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

8
/* OR operator */

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

10

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

11

12

/* NOT operator */

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

14

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

15

16

/* output

17

true

18
false

19

true

20

true

 Input  Reset

 Jalankan

Mungkin sebagian dari kita bertanya, sebenarnya apa kegunaan dari nilai
boolean selain hanya menampilkan nilai true dan false saja? Pada
pembahasan tipe data sudah pernah disebutkan bahwa boolean
merupakan salah satu kunci dari logika pemrograman, karena boolean
dapat mengontrol bagaimana alur program kita akan berjalan.
Lantas bagaimana cara boolean mengontrol sebuah aliran program? Pada
materi selanjutnya, kita akan membahas mengenai if/else statement yang
dapat mengontrol flow pada program, tentunya pada
penggunaan statement boolean ini sangat berguna.

let firstName = "candra";

let lastName = "fahmi";

const age = 25;

let isMarried = false;

console.log(firstName);

console.log(lastName);

console.log(age);

console.log(isMarried);