JavaScript

Variabel

Variabel adalah wadah untuk menyimpan nilai data. Di JavaScript modern, kita menggunakan let untuk variabel yang nilainya bisa berubah, dan const untuk variabel yang nilainya tetap (konstan).

Contoh Kode:

// Variabel yang bisa diubah
let umur = 20;
umur = 21; // Sah

// Variabel konstan (tidak bisa diubah)
const nama = "Budi";
// nama = "Andi"; // Ini akan menyebabkan error

console.log("Nama:", nama);
console.log("Umur:", umur);

Perintah console.log() sangat berguna untuk menampilkan nilai variabel di konsol developer browser untuk keperluan debugging.

Fungsi

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

Contoh Kode:

function sapa(namaPengguna) {
    return "Halo, " + namaPengguna + "! Selamat datang.";
}

// Memanggil fungsi dan menyimpan hasilnya
let pesanSapaan = sapa("Miyamura");
console.log(pesanSapaan); // Output: "Halo, Miyamura! Selamat datang."

Mengubah Teks Elemen

Kita bisa memilih elemen HTML menggunakan document.getElementById() dan mengubah konten di dalamnya dengan properti .innerHTML atau .textContent.

Contoh Kode:

<!-- HTML -->
<h2 id="judul-sapaan">Halo!</h2>
<button id="tombol-ubah">Ubah Teks</button>

<!-- JavaScript -->
<script>
    const tombol = document.getElementById('tombol-ubah');
    const judul = document.getElementById('judul-sapaan');

    tombol.addEventListener('click', function() {
        judul.textContent = 'Teks Sudah Berubah!';
    });
</script>

Hasil Tampilan Interaktif:

Mengubah Gaya CSS

JavaScript juga dapat mengubah gaya CSS dari sebuah elemen secara langsung melalui properti .style.

Contoh Kode:

<!-- HTML -->
<div id="kotak-ajaib">Ini adalah sebuah kotak.</div>
<button id="tombol-warna">Ubah Warna</button>

<!-- JavaScript -->
<script>
    const tombolWarna = document.getElementById('tombol-warna');
    const kotak = document.getElementById('kotak-ajaib');

    tombolWarna.addEventListener('click', function() {
        kotak.style.backgroundColor = '#4a90e2';
        kotak.style.color = 'white';
        kotak.style.fontWeight = 'bold';
    });
</script>

Hasil Tampilan Interaktif:

Tipe Data Fundamental

JavaScript memiliki beberapa tipe data dasar:

• String: Teks yang diapit oleh tanda kutip. Contoh: "Halo Dunia".
• Number: Angka, baik bilangan bulat maupun desimal. Contoh: 100, 3.14.
• Boolean: Hanya memiliki dua nilai, true atau false.
• Array: Kumpulan data yang terurut, diapit oleh kurung siku []. Contoh: ["apel", "pisang", "ceri"].
• Object: Kumpulan data yang tidak terurut dalam bentuk pasangan kunci-nilai, diapit oleh kurung kurawal {}.

Contoh Kode (Object):

const pengguna = {
    nama: "Miyamura",
    umur: 21,
    isMember: true
};

console.log(pengguna.nama); // Mengakses nilai dengan notasi titik

Hasil di Konsol:

Operator

Operator adalah simbol yang digunakan untuk melakukan operasi pada variabel dan nilai.

• Aritmatika: + (tambah), - (kurang), * (kali), / (bagi).
• Perbandingan: == (sama dengan), === (sama dengan dan sama tipe), != (tidak sama dengan), > (lebih besar dari), < (lebih kecil dari).
• Logika: && (dan), || (atau), ! (bukan/negasi).

Contoh Kode:

let nilaiA = 10;
let nilaiB = 5;

console.log(nilaiA + nilaiB); // Output: 15
console.log(nilaiA > nilaiB); // Output: true

Struktur Kondisi (If/Else)

Memungkinkan program untuk menjalankan blok kode yang berbeda berdasarkan kondisi yang benar (true) atau salah (false).

Contoh Kode:

let jam = 14;

if (jam < 12) {
    console.log("Selamat pagi!");
} else if (jam < 18) {
    console.log("Selamat siang!");
} else {
    console.log("Selamat malam!");
}

Hasil di Konsol:

Perulangan (Loops)

Dua jenis perulangan yang paling umum adalah for dan while.

• For Loop: Digunakan ketika Anda tahu persis berapa kali Anda ingin mengulang sebuah aksi.
• While Loop: Digunakan ketika Anda ingin mengulang selama kondisi tertentu masih bernilai true.

Contoh Kode (For Loop):

// Perulangan ini akan berjalan 5 kali (dari 0 hingga 4)
for (let i = 0; i < 5; i++) {
    console.log("Perulangan ke-" + i);
}

Hasil di Konsol:

Bekerja dengan Array

Perulangan sangat berguna untuk memproses setiap item dalam sebuah array. Metode .forEach() adalah cara modern dan lebih mudah dibaca untuk melakukan ini.

Contoh Kode:

const buah = ["Apel", "Mangga", "Jeruk"];

buah.forEach(function(item) {
    console.log("Saya suka buah " + item);
});

Hasil di Konsol:

Fitur Modern ES6: Template Literals & Arrow Functions

Template Literals (menggunakan back-tick `` ` ``) memungkinkan Anda menyisipkan variabel langsung ke dalam string dengan lebih mudah. Arrow Functions (=>) menyediakan sintaks yang lebih pendek untuk menulis fungsi.

Contoh Kode (Menggabungkan Keduanya):

const buah = ["Apel", "Mangga", "Jeruk"];

// Menggunakan Arrow Function dan Template Literals
buah.forEach(item => {
    console.log(`Saya sangat suka buah ${item}!`);
});

Hasil di Konsol:

Callbacks

Callback adalah sebuah fungsi yang diteruskan sebagai argumen ke fungsi lain, yang kemudian akan "dipanggil kembali" (called back) setelah operasi selesai. Ini adalah cara dasar untuk menangani kode asinkron.

Contoh Kode:

function ambilData(callback) {
    // Simulasi mengambil data dari server selama 2 detik
    setTimeout(function() {
        const data = { id: 1, nama: "Produk A" };
        callback(data); // Panggil kembali fungsi callback dengan data
    }, 2000);
}

ambilData(function(hasil) {
    console.log("Data diterima via callback:", hasil);
});

console.log("Menunggu data...");

Hasil di Konsol:

Catatan: Jika terlalu banyak callback bersarang, ini bisa menyebabkan "Callback Hell", yaitu kode yang sulit dibaca dan dikelola.

Promises

Promise adalah objek yang merepresentasikan keberhasilan (fulfillment) atau kegagalan (rejection) dari sebuah operasi asinkron. Ini adalah cara yang lebih modern dan terstruktur untuk menghindari Callback Hell.

Contoh Kode:

function ambilDataPromise() {
    return new Promise((resolve, reject) => {
        setTimeout(() => {
            const data = { id: 2, nama: "Produk B" };
            // Jika berhasil, panggil resolve()
            resolve(data); 
            // Jika gagal, panggil reject('Error!')
        }, 2000);
    });
}

ambilDataPromise()
    .then(hasil => {
        console.log("Data diterima via Promise:", hasil);
    })
    .catch(error => {
        console.error("Terjadi error:", error);
    });

Async/Await

Async/Await adalah sintaks modern yang dibangun di atas Promises. Ini memungkinkan Anda menulis kode asinkron seolah-olah itu adalah kode sinkron, membuatnya sangat mudah dibaca dan dipahami.

• async: Diletakkan sebelum sebuah fungsi untuk menandakan bahwa fungsi tersebut akan selalu mengembalikan Promise.
• await: Hanya bisa digunakan di dalam fungsi async. Ini akan "menjeda" eksekusi fungsi sampai Promise selesai.

Contoh Kode:

async function prosesData() {
    console.log("Mulai memproses data...");
    try {
        // Tunggu sampai ambilDataPromise() selesai
        const hasil = await ambilDataPromise();
        console.log("Data diterima via Async/Await:", hasil);
    } catch (error) {
        console.error("Gagal memproses data:", error);
    }
    console.log("Selesai memproses data.");
}

prosesData();

Web Storage: localStorage

localStorage adalah bagian dari Web Storage API yang memungkinkan Anda menyimpan data dalam bentuk pasangan kunci-nilai (key-value pairs) di browser pengguna. Data ini akan tetap tersimpan bahkan setelah browser ditutup dan dibuka kembali.

• localStorage.setItem('kunci', 'nilai'): Untuk menyimpan data.
• localStorage.getItem('kunci'): Untuk mengambil data.
• localStorage.removeItem('kunci'): Untuk menghapus data.

Penting: localStorage hanya dapat menyimpan string. Untuk menyimpan objek atau array, Anda harus mengubahnya menjadi string JSON dengan JSON.stringify() dan mengembalikannya dengan JSON.parse().

Contoh Kode Interaktif:

// Menyimpan nama pengguna
const namaInput = document.getElementById('namaPengguna');
localStorage.setItem('namaDisimpan', namaInput.value);

// Mengambil dan menampilkan nama pengguna
const namaTersimpan = localStorage.getItem('namaDisimpan');
document.getElementById('display').textContent = `Halo, ${namaTersimpan}!`;

Hasil Tampilan Interaktif:

JavaScript Modules (ES6 Modules)

Modul memungkinkan Anda memecah kode menjadi file-file kecil dan terorganisir. Anda bisa menggunakan export untuk mengekspos fungsi atau variabel dari satu file, dan import untuk menggunakannya di file lain. Ini adalah praktik standar untuk aplikasi skala besar.

Contoh Kode:

// File: helpers.js
export function sapa(nama) {
    return `Halo, ${nama}!`;
}

// File: main.js
import { sapa } from './helpers.js';

const pesan = sapa('Miyamura');
console.log(pesan); // Output: Halo, Miyamura!

// File: index.html
// Perhatikan 'type="module"' pada tag script
<script type="module" src="main.js"></script>

Catatan: Contoh ini menggambarkan struktur file dan tidak dapat dijalankan langsung di sini, tetapi ini adalah cara kerja modul di proyek nyata.

Penanganan Error dengan try...catch

Blok try...catch memungkinkan Anda untuk menguji sebuah blok kode untuk mencari error (di dalam try). Jika error terjadi, Anda dapat menangkapnya dan menjalankan kode untuk menanganinya (di dalam catch) tanpa menghentikan eksekusi seluruh skrip.

Contoh Kode:

try {
    // Mencoba menjalankan kode yang mungkin error
    let hasil = variabelTidakAda;
    console.log(hasil);
} catch (error) {
    // Blok ini akan berjalan jika ada error di blok try
    console.error("Terjadi sebuah error!");
    console.error("Pesan error:", error.message);
}

console.log("Program tetap berjalan setelah error.");

Hasil di Konsol:

Mengambil Data dengan Fetch API

Fetch API menyediakan cara yang mudah dan logis untuk mengambil sumber daya (seperti data JSON) dari jaringan secara asinkron. Fetch mengembalikan sebuah Promise, sehingga sangat cocok digunakan dengan async/await.

Contoh Kode (Mengambil data dari API publik):

async function ambilPengguna() {
    const url = 'https://jsonplaceholder.typicode.com/users/1';
    
    try {
        const respons = await fetch(url);
        
        // Periksa apakah permintaan berhasil (status code 200-299)
        if (!respons.ok) {
            throw new Error(`HTTP error! status: ${respons.status}`);
        }
        
        const dataPengguna = await respons.json(); // Mengubah respons menjadi objek JSON
        console.log("Data Pengguna:", dataPengguna);
        
        // Tampilkan nama pengguna di halaman
        document.getElementById('nama-api').textContent = dataPengguna.name;

    } catch (error) {
        console.error('Gagal mengambil data pengguna:', error);
        document.getElementById('nama-api').textContent = 'Gagal memuat data.';
    }
}

// Panggil fungsi saat halaman dimuat
ambilPengguna();

Hasil Tampilan Interaktif:

Metode Array Lanjutan: map, filter, reduce

Selain .forEach(), ada metode lain yang sangat kuat untuk memanipulasi array tanpa mengubah array aslinya (prinsip imutabilitas).

• .map(): Membuat array baru dengan menerapkan sebuah fungsi pada setiap elemen dari array asli.
• .filter(): Membuat array baru yang berisi elemen-elemen yang "lulus" sebuah tes kondisi.
• .reduce(): "Mereduksi" semua elemen dalam array menjadi satu nilai tunggal (misalnya, menjumlahkan semua angka).

Contoh Kode:

const angka = [1, 2, 3, 4, 5];

// map: kalikan setiap angka dengan 2
const angkaKaliDua = angka.map(n => n * 2);
console.log(angkaKaliDua); // Output: [2, 4, 6, 8, 10]

// filter: ambil hanya angka yang genap
const angkaGenap = angka.filter(n => n % 2 === 0);
console.log(angkaGenap); // Output: [2, 4]

// reduce: jumlahkan semua angka
const total = angka.reduce((akumulator, nilaiSekarang) => akumulator + nilaiSekarang, 0);
console.log(total); // Output: 15

Pemrograman Berorientasi Objek dengan Class

ES6 memperkenalkan sintaks class, yang merupakan cara yang lebih bersih dan mudah untuk membuat objek dan menangani pewarisan (inheritance). Class adalah "cetak biru" untuk membuat objek.

Contoh Kode:

class Hewan {
    // Constructor berjalan saat objek baru dibuat
    constructor(nama) {
        this.nama = nama;
    }

    // Method (fungsi di dalam class)
    bersuara() {
        console.log(`${this.nama} mengeluarkan suara.`);
    }
}

// Membuat objek (instance) baru dari class Hewan
const kucing = new Hewan('Meong');
const anjing = new Hewan('Gukguk');

kucing.bersuara(); // Output: Meong mengeluarkan suara.
anjing.bersuara(); // Output: Gukguk mengeluarkan suara.