JavaScript: Variabel, Tipe & Kontrol Aliran

Mengapa JavaScript

Halaman web punya tiga lapisan. HTML menyusun struktur, CSS memberi tampilan, JavaScript memberi perilaku. Tanpa JavaScript, halaman hanya menampilkan teks dan gambar yang tetap. Dengan JavaScript, halaman bisa menghitung, memutuskan, dan mengubah isinya saat pembaca berinteraksi.

JavaScript adalah bahasa pemrograman yang berjalan di browser. Bahasa pemrograman adalah cara memberi perintah ke komputer dengan aturan yang jelas. Browser membaca perintah itu dan menjalankannya baris demi baris. Setiap baris perintah disebut pernyataan. Bab ini membahas tiga fondasi JavaScript: variabel, tipe data, dan kontrol aliran.

Variabel

Program menyimpan nilai agar bisa dipakai lagi. Tempat menyimpan nilai itu disebut variabel. Variabel seperti kotak berlabel: kamu menulis nama di luar kotak, lalu meletakkan isi di dalamnya. Nama itu yang kamu pakai untuk mengambil isinya nanti.

Dua cara membuat variabel di JavaScript: let dan const.

let umur = 25;
const nama = "Kuka";

let membuat variabel yang isinya bisa diganti. const membuat variabel yang isinya tetap, tidak bisa diganti setelah diisi. Kata const singkatan dari constant, tetap. Aturan praktisnya: pakai const sebagai bawaan, dan let hanya saat kamu tahu isinya akan berubah. Ada juga var, cara lama yang sebaiknya dihindari.

Tipe data

Setiap nilai di JavaScript punya macam, yang disebut tipe data. Tipe data menentukan apa yang bisa dilakukan dengan nilai itu. Lima tipe dasar yang sering dipakai.

String adalah teks, ditulis di antara tanda kutip. "halo" dan 'Kuka' adalah string. Number adalah angka, ditulis tanpa kutip, seperti 25 dan 3.14. Boolean adalah nilai benar atau salah, ditulis true atau false. Boolean dipakai untuk keputusan.

Dua tipe untuk keadaan kosong. null berarti sengaja kosong, kamu yang mengosongkannya. undefined berarti belum diisi sama sekali. Bedanya halus tapi penting: null adalah pilihan sadar, undefined adalah belum sempat.

let teks = "halo";      // string
let angka = 25;         // number
let aktif = true;       // boolean
let kosong = null;      // null
let belum;              // undefined

Kontrol aliran: if dan else

Program berjalan baris demi baris dari atas ke bawah. Kontrol aliran mengubah urutan itu. Kontrol aliran adalah cara memberi tahu program kapan menjalankan perintah tertentu. Yang paling dasar adalah if dan else.

if menjalankan perintah hanya bila sebuah kondisi benar. Kondisi adalah pertanyaan yang jawabannya true atau false. else menjalankan perintah lain bila kondisi itu salah.

let umur = 25;
if (umur >= 18) {
  console.log("Sudah dewasa");
} else {
  console.log("Masih muda");
}

console.log adalah perintah untuk menulis pesan ke panel konsol browser, tempat pengembang melihat hasil. >= adalah operator, simbol untuk membandingkan, di sini berarti lebih besar atau sama dengan.

Kontrol aliran: loop

Ada kalanya kamu ingin mengulang perintah. Loop adalah cara mengulang perintah beberapa kali. Yang paling sering dipakai adalah for.

for (let i = 1; i <= 3; i++) {
  console.log("Hitung: " + i);
}

for menerima tiga bagian dalam kurung: nilai awal i = 1, kondisi lanjut i <= 3, dan langkah i++ yang menambah i satu setiap putaran. Selama kondisi benar, perintah di dalam kurung kurawal dijalankan. Hasilnya tiga baris: Hitung: 1, Hitung: 2, Hitung: 3.

Kontrol aliran: switch

Saat kamu membandingkan satu nilai dengan banyak kemungkinan, if berantai jadi panjang. switch memilih satu dari banyak cabang berdasarkan nilai.

let hari = "senin";
switch (hari) {
  case "senin":
    console.log("Mulai minggu");
    break;
  case "jumat":
    console.log("Akhir minggu");
    break;
  default:
    console.log("Hari biasa");
}

switch membandingkan nilai hari dengan tiap case. Yang cocok dijalankan, lalu break menghentikan. default menangkap nilai yang tidak cocok dengan cabang mana pun. switch tidak wajib, tapi membuat kode lebih rapi saat cabangnya banyak.

Analogi: dapur dan resep

Satu gambar merangkum ketiganya. Bayangkan dapur dan resep. Variabel adalah stoples berlabel di rak: satu berlabel "gula", satu "telur", satu "jumlah tamu". Kamu menaruh isi di stoples dan memanggilnya lewat label. Tipe data adalah macam isi stoples: gula adalah bubuk, telur adalah butir, jumlah tamu adalah angka. Kamu memperlakukan bubuk dan angka secara berbeda, sama seperti program memperlakukan string dan number secara berbeda.

Kontrol aliran adalah resepnya. "Kalau oven sudah panas, masukkan adonan" adalah if. "Ulangi untuk tiap telur" adalah loop. "Kalau hari jumat, buat kue spesial" adalah switch. Resep menentukan urutan dan keputusan, sama seperti kontrol aliran menentukan urutan perintah program.

Pasangan contoh

Kode di bawah membuat program kecil yang menilai umur dan menghitung. Versi vanilla menulis variabel, if, dan loop langsung di file JavaScript. Versi React membungkus logika yang sama dalam komponen, dan variabelnya menjadi state yang bisa berubah saat halaman berinteraksi.

let nama = "Kuka";
let umur = 25;

if (umur >= 18) {
  console.log(nama + " sudah dewasa");
} else {
  console.log(nama + " masih muda");
}

for (let i = 1; i <= 3; i++) {
  console.log("Hitung: " + i);
}

function KartuUmur() {
  const [umur, setUmur] = React.useState(25);
  let pesan;
  if (umur >= 18) {
    pesan = "Sudah dewasa";
  } else {
    pesan = "Masih muda";
  }
  return <p>{pesan}</p>;
}

Perbedaan inti ada pada tempat logika hidup. Di vanilla, kamu menulis variabel dan keputusan langsung, lalu browser menjalankannya. Di React, logika yang sama tinggal di dalam komponen, dan variabelnya menjadi state, nilai yang bisa berubah dan membuat komponen dijalankan ulang. if dan else tetap bekerja sama di kedua versi. React hanya membungkus cara logika itu dipakai, tidak mengubah cara variabel dan keputusan bekerja.

Demo Hidup

Demo di bawah adalah taman bermain kecil. Kamu mengetik ekspresi JavaScript di kotak, menekan tombol, dan melihat hasil serta tipe datanya. Ekspresi adalah potongan kode yang menghasilkan nilai. Coba let umur = 25; umur + 5, lalu coba if (10 > 5) { "ya" } else { "tidak" }.

Begini cara baca demonya. Kotak berisi ekspresi yang bisa kamu ubah. Tombol Jalankan menjalankan ekspresi itu. Baris pertama hasil menampilkan nilai akhir, baris kedua menampilkan tipe datanya. Kalau ekspresi salah, muncul pesan error. Coba ganti isi kotak dengan let nama = "Kuka"; nama untuk melihat tipe string, atau 10 > 5 untuk melihat boolean.

Ringkasan bab ini. JavaScript membuat halaman bertindak. Variabel menyimpan nilai, let untuk yang berubah dan const untuk yang tetap. Tipe data mengenal macam nilai: string, number, boolean, null, dan undefined. Kontrol aliran mengubah urutan perintah: if dan else untuk keputusan, for untuk pengulangan, switch untuk banyak cabang. Bab berikutnya membahas fungsi, array, dan objek.

Rujukan

• MDN: JavaScript first steps
• MDN: Storing the information you need, variables
• MDN: JavaScript data types and structures
• MDN: Making decisions in your code, conditionals
• MDN: Looping code
• MDN: switch
• web.dev: Learn JavaScript