Pengenalan Logika Scripting

Kenapa ini penting

Sekarang kamu mulai benar-benar menulis program. Program JavaScript tersusun dari statement yang dijalankan berurutan dari atas ke bawah. Kamu juga butuh cara melihat apa yang terjadi di dalam program (console.log), cara meninggalkan catatan untuk dirimu atau orang lain (komentar), dan cara menyimpan data supaya bisa dipakai ulang (variabel). Ketiga hal ini akan kamu pakai di setiap baris kode yang kamu tulis mulai hari ini sampai bertahun-tahun ke depan.

Konsep inti

Statement dan urutan eksekusi

Statement adalah satu perintah lengkap, seperti satu kalimat dalam resep. Statement biasanya diakhiri titik koma ;. JavaScript sebenarnya bisa menyisipkan titik koma otomatis (Automatic Semicolon Insertion), tapi menulisnya sendiri secara konsisten membuat kode lebih jelas dan menghindari kasus-kasus aneh.

let skor = 10;     // statement 1
skor = skor + 5;   // statement 2
console.log(skor); // statement 3 → 15

Komputer menjalankan statement dari atas ke bawah, satu per satu. Kalau urutannya ditukar, hasilnya berubah. Nanti kamu akan belajar cara mengubah alur ini dengan percabangan dan perulangan.

JavaScript juga case-sensitive: nama, Nama, dan NAMA adalah tiga hal berbeda. Console.log (C besar) akan error.

console.log dan kawan-kawannya

console.log() mencetak nilai ke konsol. Ini alat debugging nomor satu untuk melihat isi variabel di titik tertentu. Variasinya:

Template literal (string dengan backtick `) memudahkan menyisipkan nilai ke teks dengan ${...}.

Komentar

Komentar adalah teks yang diabaikan komputer, ditulis untuk manusia.

• Satu baris: // ini komentar
• Banyak baris: /* ... */

Komentar yang baik menjelaskan kenapa, bukan mengulang apa yang sudah jelas dari kodenya. // tambah 1 di atas i = i + 1 tidak berguna. // diskon member hanya berlaku hari Jumat berguna.

Variabel: kotak berlabel

Variabel adalah nama yang menunjuk ke sebuah nilai yang disimpan di memori. Bayangkan kotak berlabel: labelnya umur, isinya 21. JavaScript punya tiga kata kunci untuk membuat variabel:

Kenapa var dihindari? Karena var tidak mengenal batas blok { } dan bisa dipakai sebelum dideklarasikan (bernilai undefined karena hoisting). Ini sering menimbulkan bug yang membingungkan. let dan const lebih ketat: memakainya sebelum dideklarasikan langsung menghasilkan error yang jelas.

Catatan penting: const berarti variabelnya tidak bisa diarahkan ke nilai lain, bukan berarti isinya beku. Array atau object yang disimpan di const tetap bisa diubah isinya (dibahas di modul berikutnya).

Aturan dan konvensi penamaan

• Boleh berisi huruf, angka, _, dan $. Tidak boleh diawali angka (1nama salah).
• Tidak boleh memakai kata kunci bahasa (let, if, class, return, dan sebagainya).
• Konvensi JavaScript: camelCase untuk variabel dan function (totalHarga, jumlahSiswa).
• Konstanta tetap yang "konfigurasi" sering ditulis UPPER_SNAKE_CASE (MAKS_PERCOBAAN).
• Pakai nama yang bermakna. hargaSetelahDiskon jauh lebih jelas daripada x2.

Deklarasi, inisialisasi, assignment

• Deklarasi: membuat variabel, misalnya let skor; (nilainya undefined).
• Inisialisasi: memberi nilai awal, misalnya let skor = 0;.
• Assignment: mengganti nilai, misalnya skor = 10;. Tanda = artinya "isi dengan", bukan "sama dengan" seperti di matematika.

Contoh kode

// Komentar satu baris: program menghitung total belanja

/*
  Komentar multi-baris:
  harga dalam rupiah, diskon dalam persen
*/
const NAMA_TOKO = "Toko Maju";
const hargaBuku = 45000;
const jumlah = 3;
let diskonPersen = 10;

let total = hargaBuku * jumlah;          // 135000
total = total - (total * diskonPersen) / 100;

console.log("Toko:", NAMA_TOKO);         // → Toko: Toko Maju
console.log(`Total bayar: Rp${total}`);  // → Total bayar: Rp121500

// let boleh diisi ulang
diskonPersen = 20;
console.log(diskonPersen);               // → 20

// console.table untuk data berbentuk daftar
console.table([
  { produk: "Buku", harga: 45000 },
  { produk: "Pena", harga: 5000 },
]);
// → (tabel dengan kolom (index), produk, harga)

Perbedaan const, let, dan var:

const pi = 3.14;
// pi = 3.1416;  // → TypeError: Assignment to constant variable.

// Block scope: let/const hanya hidup di dalam { }
if (true) {
  let pesan = "di dalam blok";
  var bocor = "var bocor keluar blok";
}
// console.log(pesan); // → ReferenceError: pesan is not defined
console.log(bocor);    // → var bocor keluar blok

// Hoisting: var bisa dipakai sebelum deklarasi (bernilai undefined)
console.log(lama);     // → undefined
var lama = 5;

// let tidak bisa (error yang jelas lebih baik daripada undefined diam-diam)
// console.log(baru);  // → ReferenceError: Cannot access 'baru' before initialization
let baru = 5;

// const pada array: isinya tetap boleh diubah
const keranjang = ["apel"];
keranjang.push("jeruk");
console.log(keranjang); // → [ 'apel', 'jeruk' ]

Kesalahan umum

1. Menggunakan var karena ikut tutorial lama. Biasakan const sebagai default, dan let kalau nilainya harus berubah.
2. Mengira = adalah perbandingan. = adalah assignment. Untuk membandingkan pakai === (dibahas di modul operator).
3. Salah huruf besar/kecil. Console.log atau consol.log menghasilkan ReferenceError. JavaScript case-sensitive.
4. Mengisi ulang const. Menghasilkan TypeError: Assignment to constant variable. Kalau memang perlu berubah, pakai let.
5. Nama variabel tidak bermakna. a, b, data1 membuat kode sulit dibaca bahkan oleh dirimu sendiri seminggu kemudian.

Latihan

1. Mudah, Buat variabel nama, umur, dan kota (pilih const atau let yang tepat), lalu cetak kalimat "Saya Budi, 20 tahun, dari Bandung" memakai template literal.
2. Sedang, Buat variabel saldo bernilai 500000. Kurangi 150000 untuk belanja, tambahkan 75000 dari cashback, lalu cetak saldo akhir. Tambahkan komentar yang menjelaskan setiap langkah.
3. Menantang, Tukar isi dua variabel a = 5 dan b = 9 sehingga a menjadi 9 dan b menjadi 5. Lakukan dengan dua cara: memakai variabel bantuan, dan memakai destructuring [a, b] = [b, a].

const nama = "Budi";
let umur = 20;      // let karena umur bisa bertambah
const kota = "Bandung";
console.log(`Saya ${nama}, ${umur} tahun, dari ${kota}`);
// → Saya Budi, 20 tahun, dari Bandung

let saldo = 500000;   // saldo awal
saldo = saldo - 150000; // belanja bulanan
saldo = saldo + 75000;  // cashback dari promo
console.log(`Saldo akhir: Rp${saldo}`); // → Saldo akhir: Rp425000

// Cara 1: variabel bantuan
let a = 5;
let b = 9;
let sementara = a;
a = b;
b = sementara;
console.log(a, b); // → 9 5

// Cara 2: destructuring (lebih ringkas)
let x = 5;
let y = 9;
[x, y] = [y, x];
console.log(x, y); // → 9 5

Ringkasan

• Program tersusun dari statement yang dijalankan berurutan dari atas ke bawah. JavaScript case-sensitive.
• console.log adalah alat utama untuk melihat isi program. Template literal memudahkan menyusun teks.
• Komentar (// dan /* */) diabaikan komputer. Pakai untuk menjelaskan kenapa.
• Gunakan const sebagai default, let untuk nilai yang berubah, dan hindari var.
• Gunakan nama variabel camelCase yang bermakna.