Javascript

JavaScript Dasar

Pengenalan JavaScript

• Bahasa pemrograman yang berjalan di browser dan juga server (Node.js).
• Tidak perlu kompilasi, langsung dijalankan oleh mesin JavaScript.
• Digunakan untuk membuat halaman web interaktif. Contoh:

console.log("Hello JavaScript");

Variabel

• Tempat menyimpan data sementara di memori.
• Gunakan let untuk nilai yang bisa berubah, const untuk nilai tetap.
• var sudah tidak direkomendasikan karena masalah scope. Contoh:

let nama = "Ali";
const umur = 21;

Tipe Data

• Primitif: string, number, boolean, null, undefined.
• Kompleks: object, array, function.
• JavaScript adalah dynamic typing (tipe bisa berubah). Contoh:

let aktif = true;

Operator

• Aritmatika: + - * / %
• Perbandingan: == === != !==
• Logika: && || !
  Contoh:

5 === 5;

Kondisional

• Menjalankan kode berdasarkan kondisi tertentu.
• Menggunakan if...else dan switch.
• Alternatif singkat menggunakan ternary. Contoh:

if (nilai > 80) console.log("Bagus");

Perulangan

• Menjalankan aksi berulang kali.
• for, while, for...of untuk array, for...in untuk object. Contoh:

for (let i = 0; i < 3; i++) console.log(i);

Fungsi

• Blok kode yang bisa digunakan ulang.
• Bentuk: deklarasi, ekspresi, dan arrow function.
• Bisa menerima parameter dan mengembalikan nilai. Contoh:

const tambah = (a, b) => a + b;

Scope & Hoisting

• Scope menentukan dimana variabel bisa diakses (global, function, block).
• Hoisting mengangkat deklarasi ke atas, tapi let dan const tidak dapat diakses sebelum deklarasi.
• var berbeda karena dihoist penuh. Contoh:

function demo() { return x; let x = 5; }

Struktur Data

Array

• Struktur data untuk menyimpan banyak nilai berurutan.
• Method penting: map, filter, reduce.
• Bisa menyimpan tipe data apa pun. Contoh:

const angka = [1, 2, 3];

Object

• Struktur data key-value.
• Bisa memuat data dan fungsi (method).
• Cocok untuk representasi data kompleks. Contoh:

const user = { nama: "Amin", umur: 20 };

JSON

• Format data ringan untuk mengirim/menyimpan data.
• Hanya mendukung string property dan tipe dasar.
• Umum digunakan pada API. Contoh:

{ "nama": "Amin", "umur": 20 }

DOM & Browser API

DOM Selector

• Mengambil elemen HTML untuk dimanipulasi.
• Menggunakan querySelector dan getElementById.
• Bisa mengambil elemen tunggal atau banyak. Contoh:

const el = document.querySelector("#judul");

Manipulasi DOM

• Mengubah tampilan halaman secara dinamis.
• Bisa mengubah teks, style, dan membuat elemen baru. Contoh:

el.textContent = "Halo!";

Event Handling

• Menangani aksi pengguna seperti klik, scroll, input.
• Menggunakan addEventListener.
• Event object memberi informasi tambahan. Contoh:

button.addEventListener("click", () => alert("ok"));

LocalStorage & SessionStorage

• Menyimpan data dalam browser dengan bentuk key-value.
• localStorage bertahan lama, sessionStorage hanya selama tab aktif.
• Data harus berupa string. Contoh:

localStorage.setItem("nama", "Fahri");

Fetch API

• Digunakan untuk mengambil data dari server.
• Berbasis promise.
• Hasil response perlu di-parse ke JSON. Contoh:

const data = await fetch("/api").then(r => r.json());

JavaScript Modern (ES6+)

Template Literals

• Ditulis menggunakan backtick.
• Mendukung interpolasi variabel dan multiline string.
• Memudahkan pembuatan string kompleks. Contoh:

`Halo ${nama}`

Destructuring

• Teknik mengambil nilai dari array atau object dengan mudah.
• Membuat kode lebih ringkas dan jelas. Contoh:

const { nama, umur } = user;

Spread & Rest

• Spread memecah array/object menjadi elemen.
• Rest mengumpulkan sisa elemen menjadi satu variabel.
• Berguna pada fungsi dan penggabungan data. Contoh:

const baru = [...angka, 4, 5];

Modules

• Memecah kode ke file terpisah agar lebih rapi.
• Menggunakan import dan export. Contoh:

// export const a = 1;

Promise

• Representasi proses asynchronous.
• Memiliki state: pending → fulfilled/rejected.
• Umumnya digunakan pada operasi seperti fetch. Contoh:

const p = new Promise(res => res(1));

Async / Await

• Cara penulisan asynchronous yang lebih mudah dibaca.
• Await menunggu promise selesai. Contoh:

const data = await fetch(url);