Visualisasi Dasar Syntax JavaScript

Memahami Syntax JavaScript Lengkap

JavaScript adalah bahasa pemrograman inti dari web modern. Untuk menguasai pengembangan web (baik front-end maupun back-end melalui Node.js), pemahaman mendalam mengenai sintaksisnya adalah fondasi utama. Sintaksis merujuk pada aturan tata bahasa yang harus dipatuhi agar kode Anda dapat dieksekusi oleh mesin JavaScript.

1. Deklarasi Variabel (Variables)

Variabel digunakan untuk menyimpan data. Dalam sintaksis modern, kita menggunakan let, const, dan (jarang digunakan untuk deklarasi baru) var.

`let` vs `const`

let: Digunakan untuk variabel yang nilainya dapat diubah (re-assigned).
const: Digunakan untuk konstanta; nilainya tidak boleh diubah setelah inisialisasi.

Setiap pernyataan dalam JavaScript (kecuali beberapa kasus khusus) harus diakhiri dengan titik koma (;), meskipun JavaScript modern terkadang bisa mengabaikannya (Automatic Semicolon Insertion/ASI), namun praktik terbaik adalah tetap menggunakannya.


// Deklarasi dan Inisialisasi
let namaPengguna = "Budi";
const TAHUN_LAHIR = 1995;

// Perubahan nilai (hanya untuk 'let')
namaPengguna = "Andi";

// Ini akan menyebabkan error jika dijalankan:
// TAHUN_LAHIR = 1996;

2. Tipe Data Dasar

JavaScript memiliki beberapa tipe data primitif yang harus Anda kenali:

String: Teks, diapit kutip tunggal (') atau ganda (").
Number: Angka, baik integer maupun floating-point.
Boolean: Hanya bisa bernilai true atau false.
Null: Merepresentasikan ketiadaan nilai yang disengaja.
Undefined: Variabel yang telah dideklarasikan tetapi belum diberi nilai.
Symbol & BigInt: Tipe data yang lebih baru untuk nilai unik dan bilangan bulat yang sangat besar.

Tipe data kompleks (Non-primitif) mencakup Object (termasuk Array dan Function).


// Contoh Tipe Data
let pesan = "Halo Dunia"; // String
let usia = 25; // Number
const aktif = true; // Boolean
let dataKosong = null; // Null
let variabelBelumDiisi; // Undefined

3. Struktur Kontrol (Control Flow)

Struktur kontrol menentukan urutan eksekusi kode Anda. Ini melibatkan percabangan (kondisional) dan perulangan (loop).

Kondisional: `if/else` dan `switch`

Kondisi harus ditulis di dalam tanda kurung (), dan blok kode yang dieksekusi harus berada di dalam kurung kurawal {}.


let nilai = 75;

if (nilai >= 80) {
    console.log("Lulus dengan A");
} else if (nilai >= 70) {
    console.log("Lulus dengan B");
} else {
    console.log("Gagal");
}

// Switch Case
let hari = 3;
switch (hari) {
    case 1:
        console.log("Senin");
        break; // Penting untuk keluar dari blok switch
    case 3:
        console.log("Rabu");
        break;
    default:
        console.log("Hari lain");
}

Perulangan: `for` dan `while`

Perulangan sangat penting untuk mengulang tugas.


// Perulangan for dasar
for (let i = 0; i < 5; i++) {
    console.log("Hitungan ke: " + i);
}

// Perulangan While
let hitung = 0;
while (hitung < 3) {
    console.log("Looping...");
    hitung++;
}

4. Fungsi (Functions)

Fungsi adalah blok kode yang dapat digunakan kembali. Sintaksis fungsi telah berkembang dari deklarasi tradisional ke fungsi panah (arrow functions) yang lebih ringkas.

Fungsi Tradisional


function sapa(nama) {
    return "Halo, " + nama + "!";
}
console.log(sapa("Dewi"));

Fungsi Panah (Arrow Function)

Ini adalah cara penulisan yang populer dan ringkas, terutama untuk fungsi satu baris.


// Fungsi panah dengan banyak baris
const hitungLuas = (panjang, lebar) => {
    return panjang * lebar;
};

// Fungsi panah implisit (return otomatis untuk satu ekspresi)
const kuadrat = angka => angka * angka;

console.log(kuadrat(9)); // Output: 81

5. Objek dan Array

Objek menggunakan sintaks kurung kurawal {} dan Array menggunakan kurung siku []. Akses properti objek menggunakan titik (.) atau kurung siku ([]).


// Array
const daftarBuah = ["Apel", "Jeruk", "Mangga"];
console.log(daftarBuah[0]); // Akses indeks pertama

// Objek
const pengguna = {
    id: 101,
    nama: "Rina",
    email: "[email protected]"
};
console.log(pengguna.nama); // Akses properti

// Menggunakan Destructuring (Sintaks modern)
const { nama, email } = pengguna;
console.log(nama);

Menguasai sintaks dasar ini memungkinkan Anda untuk mulai membangun logika aplikasi dengan JavaScript. Ingatlah bahwa konsistensi dalam penggunaan titik koma dan kurung kurawal adalah kunci untuk kode yang mudah dibaca dan bebas dari kesalahan sintaks.