Menulis Kode JavaScript Pertama
Menulis Kode JavaScript Pertama
1. console.log(“Hello World!”);
Expression adalah unit kode yang dapat dievaluasi menjadi suatu nilai. Untuk lebih
mudahnya, perhatikan contoh kode berikut:
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:
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.
*/
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;
let lastName;
lastName = "Skywalker";
console.log(lastName);
/* output
Skywalker
*/
console.log(lastName);
/* output
Skywalker
*/
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.
const z = 100;
console.log(z);
z = 200;
console.log(z)
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.
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
** 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:
main.js
1.
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.
3
4
console.log(bigNumber);
console.log(myInt);
/* output
8
1234567890123456789012345678901234567890n
1.2345678901234568e+39
10
*/
Input Reset
Jalankan
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)
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
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.
3
console.log(moreGreet);
/* output: HelloHello */
Input Reset
Jalankan
main.js
1.
1
const myName = "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
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”.
main.js
1.
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
main.js
1.
1
const id1 = Symbol("id");
console.log(id1 == id2);
6
/* output
false
*/
Input Reset
Jalankan
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;
main.js
1.
let x = 10;
let y = 5
x += y;
5
console.log(x);
/* output
15
10
*/
Input Reset
Jalankan
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
main.js
1.
let a = 10;
let b = 12;
3
4
/* output
8
true
false
10
*/
Input Reset
Jalankan
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 ===.
main.js
1.
const aNumber = 10
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.
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 */
10
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.
console.log(firstName);
console.log(lastName);
console.log(age);
console.log(isMarried);