Panduan Singkat: Contoh Syntax JavaScript

Simbol Ilustrasi JavaScript JS

Ilustrasi sederhana alur logika JavaScript.

JavaScript (JS) adalah bahasa pemrograman inti dari web modern. Bersama HTML dan CSS, JS memungkinkan halaman web menjadi interaktif dan dinamis. Memahami sintaks dasar adalah langkah pertama yang krusial bagi setiap pengembang.

1. Variabel dan Tipe Data

Variabel digunakan untuk menyimpan data. Di JavaScript modern (ES6+), kita menggunakan let atau const untuk mendeklarasikan variabel. Gunakan const jika nilai tidak akan berubah, dan let jika nilainya mungkin diubah.

// Deklarasi Variabel
const namaAplikasi = "My Script"; // Tidak bisa diubah
let hitungan = 10; // Bisa diubah

// Perubahan nilai
hitungan = hitungan + 5; 

// Tipe Data Dasar
let nama = "Budi";          // String
let usia = 25;              // Number (integer atau float)
let isAktif = true;         // Boolean
let dataKosong = null;      // Null
let hasil;                  // Undefined (belum diberi nilai)

console.log(nama + " usianya " + usia);

2. Struktur Kontrol: Kondisional (If/Else)

Struktur kondisional memungkinkan program membuat keputusan berdasarkan kondisi tertentu. Sintaks if, else if, dan else adalah tulang punggung logika alur program.

let skor = 75;

if (skor >= 80) {
    console.log("Nilai Anda A. Sangat Baik!");
} else if (skor >= 65) {
    console.log("Nilai Anda B. Memuaskan.");
} else {
    console.log("Perlu belajar lebih giat.");
}

3. Struktur Kontrol: Perulangan (Loops)

Perulangan sangat berguna untuk menjalankan blok kode berulang kali. for loop adalah yang paling umum digunakan untuk iterasi yang sudah diketahui jumlahnya.

// Contoh For Loop: Menghitung dari 1 sampai 5
for (let i = 1; i <= 5; i++) {
    console.log("Iterasi ke: " + i);
}

// Contoh For...of untuk array
const daftarBuah = ["Apel", "Jeruk", "Mangga"];
for (const buah of daftarBuah) {
    console.log("Saya suka " + buah);
}

4. Fungsi (Functions)

Fungsi adalah blok kode yang dapat digunakan kembali (reusable). Mendefinisikan fungsi membantu menjaga kode tetap terorganisir dan modular. Fungsi dapat menerima input (parameter) dan mengembalikan output (return value).

// Fungsi Deklarasi Tradisional
function sapaPengguna(nama) {
    return "Halo, " + nama + "! Selamat datang.";
}

// Fungsi Ekspresi (Arrow Function - Sintaks modern)
const hitungLuasPersegi = (sisi) => {
    return sisi * sisi;
};

// Memanggil Fungsi
let salam = sapaPengguna("Andi");
console.log(salam); // Output: Halo, Andi! Selamat datang.

let luas = hitungLuasPersegi(12);
console.log("Luasnya adalah: " + luas); // Output: Luasnya adalah: 144

5. Objek

Objek adalah koleksi properti (key: value pairs). Ini adalah cara JavaScript merepresentasikan entitas dunia nyata. Properti diakses menggunakan notasi titik (dot notation) atau notasi kurung siku (bracket notation).

const mobil = {
    merek: "Toyota",
    model: "Avanza",
    tahun: 2020,
    start: function() {
        console.log(this.merek + " " + this.model + " dinyalakan.");
    }
};

// Mengakses properti
console.log("Merek mobil saya: " + mobil.merek);

// Memanggil metode (fungsi di dalam objek)
mobil.start();

Menguasai dasar-dasar sintaks di atas—variabel, kontrol alur, dan fungsi—akan memberikan fondasi yang kuat untuk mulai membangun interaktivitas pada aplikasi web Anda menggunakan JavaScript.

Related Posts