Memahami Sintaks Dasar JavaScript

Panduan Lengkap untuk Pemula

Dipublikasikan pada:

Apa Itu JavaScript?

JavaScript adalah bahasa pemrograman tingkat tinggi, ringan, dan ditafsirkan (interpreted) yang paling dikenal sebagai bahasa skrip untuk halaman web. Namun, penggunaannya telah meluas jauh melampaui browser web, berkat lingkungan runtime seperti Node.js.

Singkatnya, JavaScript adalah bahasa yang membuat halaman web menjadi interaktif. Tanpa JavaScript, halaman web akan statis, seperti brosur digital. Dengan JavaScript, kita bisa membuat animasi, memvalidasi formulir, memuat konten secara dinamis, dan banyak lagi.

Beberapa karakteristik utama JavaScript:

• Interpreted: Kode dieksekusi baris per baris oleh browser atau runtime, tanpa perlu kompilasi sebelumnya.
• Object-Oriented: Mendukung pemrograman berorientasi objek melalui prototipe.
• Event-Driven: Sering digunakan untuk merespons interaksi pengguna seperti klik mouse atau penekanan tombol.
• Versatile: Dapat digunakan untuk pengembangan frontend (browser), backend (Node.js), mobile (React Native), dan bahkan desktop (Electron).

Sintaks Dasar JavaScript

Sintaks adalah seperangkat aturan yang menentukan bagaimana pernyataan JavaScript yang terbentuk dengan baik harus ditulis. Memahami sintaks dasar sangat penting untuk menulis kode yang benar dan dapat dieksekusi.

1. Komentar (Comments)

Komentar digunakan untuk menjelaskan kode dan membuatnya lebih mudah dibaca. Komentar diabaikan oleh JavaScript engine.

Disalin!
// Ini adalah komentar satu baris

/*
Ini adalah komentar
multi-baris
*/
console.log("Hello, World!"); // Anda juga bisa menambahkan komentar di akhir baris

2. Variabel (Variables)

Variabel digunakan untuk menyimpan data. JavaScript memiliki beberapa cara untuk mendeklarasikan variabel: var, let, dan const.

• var: Deklarasi lama, memiliki masalah hoisting dan scope.
• let: Deklarasi modern, block-scoped, dapat diubah nilainya.
• const: Deklarasi modern, block-scoped, nilai tidak dapat diubah setelah diinisialisasi (konstanta).

Disalin!
// Menggunakan var (hindari jika memungkinkan)
var namaLama = "Budi";
console.log(namaLama); // Output: Budi

// Menggunakan let
let usia = 30;
console.log(usia); // Output: 30
usia = 31; // Nilai bisa diubah
console.log(usia); // Output: 31

// Menggunakan const
const PI = 3.14;
console.log(PI); // Output: 3.14
// PI = 3.14159; // Ini akan menyebabkan error: Assignment to constant variable.

const namaDepan = "Alice";
const namaBelakang = "Smith";
const namaLengkap = namaDepan + " " + namaBelakang;
console.log(namaLengkap); // Output: Alice Smith

3. Tipe Data (Data Types)

JavaScript memiliki beberapa tipe data dasar:

• String: Teks (misal: "Hello", 'World').
• Number: Angka (misal: 10, 3.14).
• Boolean: Nilai benar atau salah (true atau false).
• Null: Variabel yang sengaja tidak memiliki nilai.
• Undefined: Variabel yang dideklarasikan tetapi belum diberi nilai.
• Symbol: Tipe data unik yang diperkenalkan di ES6.
• BigInt: Untuk angka yang sangat besar.

Selain itu, ada tipe data kompleks:

• Object: Kumpulan pasangan kunci-nilai (misal: { nama: "Ani", usia: 25 }).
• Array: Kumpulan nilai yang diurutkan (misal: [1, 2, 3], ["apel", "pisang"]).

Disalin!
let nama = "John Doe"; // String
let umur = 25; // Number
let isStudent = true; // Boolean
let mobil = null; // Null
let pekerjaan; // Undefined

console.log(typeof nama); // Output: string
console.log(typeof umur); // Output: number
console.log(typeof isStudent); // Output: boolean
console.log(typeof mobil); // Output: object (ini adalah keanehan JavaScript, null sebenarnya adalah tipe primitif)
console.log(typeof pekerjaan); // Output: undefined

let person = {
    firstName: "Jane",
    lastName: "Doe",
    age: 30
}; // Object
console.log(person.firstName); // Output: Jane

let fruits = ["Apel", "Pisang", "Ceri"]; // Array
console.log(fruits[0]); // Output: Apel

4. Operator (Operators)

Operator digunakan untuk melakukan operasi pada nilai dan variabel.

• Aritmatika: +, -, *, /, % (modulus), ** (eksponen).
• Perbandingan: == (sama nilai), === (sama nilai dan tipe), != (tidak sama nilai), !== (tidak sama nilai atau tipe), >, <, >=, <=.
• Logika: && (AND), || (OR), ! (NOT).
• Penugasan: =, +=, -=, *=, /=, dll.

Disalin!
let a = 10;
let b = 5;

// Aritmatika
console.log(a + b); // Output: 15
console.log(a - b); // Output: 5
console.log(a * b); // Output: 50
console.log(a / b); // Output: 2
console.log(a % b); // Output: 0 (sisa bagi)

// Perbandingan
console.log(a == 10); // Output: true
console.log(a === "10"); // Output: false (tipe berbeda)
console.log(a != 5); // Output: true
console.log(a !== "10"); // Output: true
console.log(a > b); // Output: true

// Logika
let x = true;
let y = false;
console.log(x && y); // Output: false
console.log(x || y); // Output: true
console.log(!x); // Output: false

// Penugasan
let c = 20;
c += 5; // c = c + 5;
console.log(c); // Output: 25

5. Struktur Kontrol (Control Structures)

Struktur kontrol memungkinkan Anda mengontrol alur eksekusi kode.

If-Else Statements

Digunakan untuk menjalankan blok kode berdasarkan suatu kondisi.

Disalin!
let nilai = 75;

if (nilai >= 90) {
    console.log("Nilai A");
} else if (nilai >= 80) {
    console.log("Nilai B");
} else if (nilai >= 70) {
    console.log("Nilai C");
} else {
    console.log("Nilai D");
}

Switch Statements

Alternatif untuk if-else if yang panjang, cocok untuk banyak kondisi berdasarkan satu nilai.

Disalin!
let hari = "Senin";

switch (hari) {
    case "Senin":
        console.log("Hari kerja pertama.");
        break;
    case "Sabtu":
    case "Minggu":
        console.log("Akhir pekan!");
        break;
    default:
        console.log("Hari kerja.");
}

Loops (Perulangan)

Digunakan untuk mengulang blok kode berkali-kali.

• for loop: Mengulang blok kode sejumlah kali yang ditentukan.
• while loop: Mengulang blok kode selama kondisi tertentu benar.
• do...while loop: Mirip dengan while, tetapi blok kode dieksekusi setidaknya sekali.
• for...of: Mengulang elemen dari objek yang dapat diulang (seperti Array).
• for...in: Mengulang properti dari objek.

Disalin!
// For loop
for (let i = 0; i < 5; i++) {
    console.log("Iterasi for: " + i);
}

// While loop
let count = 0;
while (count < 3) {
    console.log("Iterasi while: " + count);
    count++;
}

// Do...while loop
let j = 0;
do {
    console.log("Iterasi do-while: " + j);
    j++;
} while (j < 2);

// For...of (untuk array)
const angka = [10, 20, 30];
for (const num of angka) {
    console.log("Angka: " + num);
}

// For...in (untuk objek)
const mobilSaya = {
    merk: "Toyota",
    model: "Corolla",
    tahun: 2020
};
for (const key in mobilSaya) {
    console.log(`${key}: ${mobilSaya[key]}`);
}

6. Fungsi (Functions)

Fungsi adalah blok kode yang dirancang untuk melakukan tugas tertentu. Fungsi dapat dipanggil berulang kali.

Disalin!
// Deklarasi fungsi tradisional
function sapa(nama) {
    return "Halo, " + nama + "!";
}
console.log(sapa("Dunia")); // Output: Halo, Dunia!

// Ekspresi fungsi
const kaliDua = function(angka) {
    return angka * 2;
};
console.log(kaliDua(5)); // Output: 10

// Arrow function (ES6+)
const tambah = (a, b) => a + b;
console.log(tambah(3, 7)); // Output: 10

const cetakPesan = () => {
    console.log("Ini adalah pesan dari arrow function tanpa parameter.");
};
cetakPesan();

7. Objek (Objects)

Objek adalah kumpulan properti, di mana setiap properti memiliki nama (kunci) dan nilai. Objek sangat fundamental dalam JavaScript.

Disalin!
// Membuat objek literal
const buku = {
    judul: "Filosofi Teras",
    penulis: "Henry Manampiring",
    tahunTerbit: 2018,
    genre: ["Filosofi", "Self-help"],
    info: function() { // Metode dalam objek
        return `${this.judul} oleh ${this.penulis}, terbit tahun ${this.tahunTerbit}.`;
    }
};

console.log(buku.judul); // Mengakses properti: Filosofi Teras
console.log(buku["penulis"]); // Cara lain mengakses properti: Henry Manampiring
console.log(buku.info()); // Memanggil metode: Filosofi Teras oleh Henry Manampiring, terbit tahun 2018.

// Menambahkan properti baru
buku.penerbit = "Kompas";
console.log(buku.penerbit); // Output: Kompas

// Menghapus properti
delete buku.genre;
console.log(buku.genre); // Output: undefined

Cara Menggunakan Kode JavaScript

Ada beberapa cara untuk menyertakan JavaScript dalam halaman web Anda:

• Inline: Langsung di dalam tag HTML (tidak disarankan untuk kode banyak).
• Internal: Di dalam tag <script> di dalam file HTML.
• Eksternal: Dalam file .js terpisah yang dihubungkan ke HTML. Ini adalah praktik terbaik.

Disalin!
<!-- Contoh penggunaan internal JavaScript -->
<!DOCTYPE html>
<html>
<head>
    <title>Contoh Internal JS</title>
</head>
<body>
    <h1>Halo dari HTML!</h1>

    <script>
        // Kode JavaScript Anda di sini
        console.log("Ini dari script internal.");
        document.getElementById('myHeading').innerText = "Teks diubah oleh JS!";
    </script>
</body>
</html>

Disalin!
<!-- Contoh penggunaan eksternal JavaScript -->
<!DOCTYPE html>
<html>
<head>
    <title>Contoh Eksternal JS</title>
</head>
<body>
    <h1>Halo dari HTML!</h1>

    <!-- Hubungkan file script.js -->
    <script src="script.js"></script>
</body>
</html>

Dan isi dari script.js:

Disalin!
// Isi dari script.js
console.log("Ini dari script eksternal.");
// Anda bisa menambahkan DOM manipulation di sini, misalnya:
// document.body.style.backgroundColor = "lightblue";

Kesimpulan

Memahami sintaks dasar JavaScript adalah langkah pertama yang krusial dalam perjalanan Anda menjadi pengembang web. Dengan menguasai variabel, tipe data, operator, struktur kontrol, fungsi, dan objek, Anda akan memiliki fondasi yang kuat untuk membangun aplikasi web yang dinamis dan interaktif.

Teruslah berlatih, bereksperimen dengan kode, dan jangan ragu untuk mencari sumber daya tambahan. Dunia JavaScript sangat luas dan terus berkembang!

© 2025 Artikel JavaScript. Semua Hak Dilindungi.

Dibuat oleh Revaldy.

Dibuat dengan ❤️ untuk para pembelajar.

Berbagi :