## Kenapa Harus Belajar JavaScript? **Analogi sederhana:** Website itu kayak rumah. HTML = struktur rumah (dinding, pintu), CSS = cat dan dekorasi (warna, gaya), JavaScript = semua yang bergerak dan berfungsi (lampu nyala, pintu otomatis, AC). Tanpa JavaScript, website cuma bisa diliat aja. Dengan JavaScript, website bisa: - Bereaksi saat diklik (tombol, menu) - Validasi form (cek email valid atau nggak) - Animasi yang smooth - Load data tanpa refresh halaman **Bonus:** JavaScript bukan cuma buat website! Kamu bisa pakai untuk: - Backend/Server (Node.js) - Mobile App (React Native) - Desktop App (Electron) **Satu bahasa, banyak platform = investasi waktu yang worth it!** ## Fundamental JavaScript ### 1. Variable & Data Types **Apa itu Variable?** Bayangin variable kayak kotak penyimpanan dengan label. Kamu bisa simpen data di dalamnya dan ambil lagi kapan aja. **3 Cara Bikin Variable:** ```javascript // var (old school, jangan pakai lagi) var nama = "Budi"; // let (kalau nilai bakal berubah) let umur = 20; umur = 21; // OK, bisa diubah // const (kalau nilai tetap/constant) const PI = 3.14; // PI = 3.15; // Error! const ga bisa diubah ``` **Kapan pakai let vs const?** - Pakai `const` sebagai default (95% waktu) - Pakai `let` cuma kalau nilai pasti berubah (counter, loop, dll) - Jangan pernah pakai `var` **Data Types - Jenis-jenis Data:** ```javascript // String (text) // Gunanya: nama, alamat, pesan, dll const nama = "Galih"; const quote = 'JavaScript is awesome'; const template = `Hello ${nama}`; // Template literal (bisa masukkin variable!) // Number (angka) // Gunanya: umur, harga, jumlah, dll const angka = 42; const desimal = 3.14; const negatif = -10; // Boolean (true/false) // Gunanya: status on/off, sudah login?, admin?, dll const isOnline = true; const isAdmin = false; // Array (daftar/list) // Gunanya: kumpulan data yang sejenis const hobi = ["coding", "gaming", "music"]; const numbers = [1, 2, 3, 4, 5]; // Akses: hobi[0] → "coding", hobi[1] → "gaming" // Object (data terstruktur) // Gunanya: data yang kompleks dengan banyak property const user = { nama: "Galih", umur: 25, skills: ["JavaScript", "React", "Node.js"] }; // Akses: user.nama → "Galih", user.umur → 25 // Null & Undefined (kosong) const kosong = null; // Sengaja dikosongkan let belumDiisi; // Belum diberi nilai → undefined ``` **Bedanya Array vs Object:** - **Array** = daftar berurutan (kayak daftar belanja) - **Object** = data dengan label (kayak KTP: nama, alamat, dll) ### 2. Operators (Simbol untuk Operasi) **A. Arithmetic (Matematika)** ```javascript const a = 10 + 5; // 15 (tambah) const b = 10 - 5; // 5 (kurang) const c = 10 * 5; // 50 (kali) const d = 10 / 5; // 2 (bagi) const e = 10 % 3; // 1 (modulo = sisa bagi) // Modulo (%) berguna untuk: const isEven = 10 % 2 === 0; // true (angka genap) const lastDigit = 12345 % 10; // 5 (ambil digit terakhir) ``` **B. Comparison (Perbandingan)** ```javascript 10 === 10; // true (sama persis - PAKAI INI!) 10 == "10"; // true (loose - JANGAN PAKAI!) 10 !== 5; // true (tidak sama) 10 > 5; // true (lebih besar) 10 >= 10; // true (lebih besar atau sama) 10 < 20; // true (lebih kecil) 10 <= 10; // true (lebih kecil atau sama) ``` **PENTING:** Selalu pakai `===` dan `!==`, jangan `==` atau `!=` - `===` = cek nilai DAN tipe data - `==` = cek nilai aja (bisa bikin bug!) **C. Logical (Logika)** ```javascript // AND (&&) - Semua harus true true && true; // true true && false; // false // Gunanya: cek multiple kondisi (contoh: login DAN admin) // OR (||) - Salah satu true sudah cukup true || false; // true false || false; // false // Gunanya: alternative (contoh: bayar pake gopay ATAU ovo) // NOT (!) - Kebalikan !true; // false !false; // true // Gunanya: negasi kondisi (contoh: !isLoggedIn) ``` **D. Increment/Decrement** ```javascript let x = 5; x++; // x = 6 (tambah 1) x--; // x = 5 (kurang 1) // Gunanya: counter, loop ``` ### 3. Control Flow (Pengaturan Alur) **Apa itu Control Flow?** Kode yang bikin program kamu bisa "memutuskan" berdasarkan kondisi. Kayak GPS yang milih jalur berdasarkan kondisi jalan. **A. If-Else (Kalau... Maka...)** ```javascript const score = 85; if (score >= 90) { console.log("Grade A - Perfect!"); } else if (score >= 80) { console.log("Grade B - Great job!"); } else if (score >= 70) { console.log("Grade C - Not bad"); } else { console.log("Grade D - Study harder!"); } ``` **Kapan pakai If-Else?** - Cek kondisi yang flexible - Kondisi yang kompleks - Range/rentang nilai **B. Switch (Pilih Satu dari Banyak)** ```javascript const day = "Monday"; switch (day) { case "Monday": console.log("Start of the week"); break; // Jangan lupa break! case "Friday": console.log("TGIF!"); break; case "Saturday": case "Sunday": // Multiple case untuk hasil yang sama console.log("Weekend vibes"); break; default: console.log("Regular day"); } ``` **Kapan pakai Switch?** - Banyak pilihan nilai yang exact (hari, bulan, status) - Nilai yang spesifik (bukan range) - Lebih readable daripada banyak if-else **C. Ternary Operator (If-Else Singkat)** ```javascript // Versi panjang let status; if (age >= 18) { status = "Adult"; } else { status = "Minor"; } // Versi singkat (ternary) const age = 20; const status = age >= 18 ? "Adult" : "Minor"; // Lebih clean! ``` **Kapan pakai Ternary?** - Kondisi sederhana (1 kondisi saja) - Assign nilai ke variable - Bikin kode lebih singkat dan readable ### 4. Loops (Perulangan) **Apa itu Loop?** Loop = jalankan kode yang sama berkali-kali. Kayak copy-paste otomatis! **A. For Loop (Yang Klasik)** ```javascript // Ulang 5 kali for (let i = 0; i < 5; i++) { console.log(i); // 0, 1, 2, 3, 4 } // Penjelasan: // let i = 0 → mulai dari 0 // i < 5 → selama i kurang dari 5 // i++ → tiap loop, tambah 1 // Loop array const fruits = ["apple", "banana", "orange"]; for (let i = 0; i < fruits.length; i++) { console.log(fruits[i]); } ``` **B. While Loop (Selama...)** ```javascript let count = 0; while (count < 5) { // Selama count < 5 console.log(count); count++; // Jangan lupa increment! } ``` **Hati-hati:** Kalau lupa increment, loop jalan terus sampe browser crash (infinite loop)! **C. For...of (Modern & Simple)** ```javascript const colors = ["red", "green", "blue"]; // Cara lama (ribet) for (let i = 0; i < colors.length; i++) { console.log(colors[i]); } // Cara modern (clean!) for (const color of colors) { console.log(color); // Langsung dapet value-nya! } ``` **Kapan pakai loop yang mana?** - **For...of** → Loop array (paling recommended) - **For** → Butuh index atau custom iteration - **While** → Ga tau berapa kali loop (sampai kondisi terpenuhi) ### 5. Functions (Fungsi) **Apa itu Function?** Function = blok kode yang bisa dipakai berkali-kali. Kayak resep masakan: tulis sekali, pakai berkali-kali! **Kenapa pakai Function?** - DRY (Don't Repeat Yourself) - ga perlu copy-paste kode - Reusable - bisa dipanggil kapan aja - Organized - kode lebih rapi dan mudah dibaca **A. Function Declaration (Cara Klasik)** ```javascript // Bikin function function greet(name) { // name = parameter (input) return `Hello, ${name}!`; // return = output } // Pakai function console.log(greet("Galih")); // "Hello, Galih!" console.log(greet("Budi")); // "Hello, Budi!" ``` **B. Arrow Function (Cara Modern - Paling Recommended!)** ```javascript // Versi ringkas (1 line) const add = (a, b) => a + b; // Versi lengkap (multi line) const greet = (name) => { const message = `Hello, ${name}!`; return message; }; // Satu parameter (ga perlu kurung) const square = x => x * x; // Pakai function console.log(add(2, 3)); // 5 console.log(square(4)); // 16 ``` **Kenapa Arrow Function lebih baik?** - Lebih singkat dan clean - Lebih modern (ES6+) - Jadi standar di React, Vue, dll **C. Default Parameters** ```javascript // Kalau parameter ga dikasih, pakai default value const greet = (name = "Guest") => { return `Hello, ${name}!`; } console.log(greet()); // "Hello, Guest!" (pakai default) console.log(greet("Galih")); // "Hello, Galih!" (pakai input) ``` **Tips Function:** - Nama function harus jelas: `calculateTotal()` lebih baik dari `calc()` - Satu function = satu tugas aja (jangan terlalu banyak logic) - Pakai arrow function sebagai default ### 6. Array Methods (Super Penting!) Array methods ini adalah "superpower" JavaScript. Must know buat developer! **A. Transform Data** ```javascript const numbers = [1, 2, 3, 4, 5]; // map() - Ubah setiap element // Gunanya: transform data, convert format const doubled = numbers.map(n => n * 2); console.log(doubled); // [2, 4, 6, 8, 10] // Real example: format prices const prices = [10000, 20000, 30000]; const formatted = prices.map(price => `Rp ${price}`); // ["Rp 10000", "Rp 20000", "Rp 30000"] ``` **B. Filter Data** ```javascript // filter() - Ambil yang sesuai kondisi // Gunanya: search, filtering const numbers = [1, 2, 3, 4, 5]; const evens = numbers.filter(n => n % 2 === 0); console.log(evens); // [2, 4] // Real example: filter active users const users = [ { name: "Budi", active: true }, { name: "Ani", active: false }, { name: "Cici", active: true } ]; const activeUsers = users.filter(user => user.active); // [{ name: "Budi", active: true }, { name: "Cici", active: true }] ``` **C. Find Data** ```javascript const numbers = [1, 2, 3, 4, 5]; // find() - Cari 1 element pertama yang match const found = numbers.find(n => n > 3); console.log(found); // 4 (dapat 1 aja) // includes() - Cek keberadaan (return true/false) console.log(numbers.includes(3)); // true console.log(numbers.includes(10)); // false ``` **D. Calculate/Reduce Data** ```javascript // reduce() - Gabungkan jadi 1 nilai // Gunanya: sum, calculate total, dll const numbers = [1, 2, 3, 4, 5]; const sum = numbers.reduce((total, n) => total + n, 0); console.log(sum); // 15 // Real example: total harga const cart = [ { item: "Baju", price: 100000 }, { item: "Celana", price: 150000 } ]; const total = cart.reduce((sum, item) => sum + item.price, 0); // 250000 ``` **E. Loop Array** ```javascript const colors = ["red", "green", "blue"]; // forEach() - Loop tiap element // Gunanya: execute something untuk setiap item colors.forEach(color => { console.log(color); }); ``` **F. Modify Array** ```javascript const fruits = ["apple", "banana"]; // push() - Tambah di belakang fruits.push("orange"); // ["apple", "banana", "orange"] // pop() - Hapus dari belakang fruits.pop(); // ["apple", "banana"] // unshift() - Tambah di depan fruits.unshift("mango"); // ["mango", "apple", "banana"] // shift() - Hapus dari depan fruits.shift(); // ["apple", "banana"] ``` **Cheat Sheet Kapan Pakai yang Mana:** - **map()** → Ubah format semua data - **filter()** → Ambil yang sesuai kondisi - **find()** → Cari 1 item spesifik - **reduce()** → Hitung total/gabungkan jadi 1 - **forEach()** → Loop dengan function - **includes()** → Cek ada atau nggak ### 7. Objects (Data Terstruktur) **Apa itu Object?** Object = data dengan property (kayak KTP: punya nama, alamat, NIK, dll). ```javascript // Bikin object const person = { name: "Galih", // property: value age: 25, skills: ["JavaScript", "React"], greet: function() { // method (function dalam object) return `Hi, I'm ${this.name}`; } }; // Akses property (2 cara) console.log(person.name); // "Galih" (dot notation - recommended) console.log(person["age"]); // 25 (bracket notation) console.log(person.greet()); // "Hi, I'm Galih" // Tambah/ubah property person.job = "Developer"; // Tambah property baru person.age = 26; // Ubah property existing // Hapus property delete person.age; ``` **Destructuring (Ambil Property)** ```javascript // Tanpa destructuring (ribet) const name = person.name; const skills = person.skills; // Dengan destructuring (clean!) const { name, skills } = person; console.log(name); // "Galih" console.log(skills); // ["JavaScript", "React"] ``` **Object Methods (Built-in)** ```javascript const user = { name: "Galih", age: 25, job: "Developer" }; // Ambil semua keys (nama property) const keys = Object.keys(user); console.log(keys); // ["name", "age", "job"] // Ambil semua values const values = Object.values(user); console.log(values); // ["Galih", 25, "Developer"] // Ambil key + value (entries) const entries = Object.entries(user); console.log(entries); // [["name", "Galih"], ["age", 25], ...] ``` **Kapan pakai Object?** - Data yang kompleks dengan banyak property - Data user, product, config, dll - API response biasanya dalam bentuk object ### 8. Modern JavaScript Features (Yang Sering Dipakai) **A. Template Literals (String Modern)** ```javascript const name = "Galih"; const age = 25; // Cara lama (ribet) const message1 = "My name is " + name + " and I'm " + age + " years old"; // Cara baru (clean!) const message2 = `My name is ${name} and I'm ${age} years old`; // Multi-line juga bisa! const html = `

${name}

Age: ${age}

`; ``` **B. Spread Operator (...)** ```javascript // Gabungkan array const arr1 = [1, 2, 3]; const arr2 = [4, 5, 6]; const combined = [...arr1, ...arr2]; // [1, 2, 3, 4, 5, 6] // Copy & update object const user = { name: "Galih", age: 25 }; const updatedUser = { ...user, job: "Developer" }; // { name: "Galih", age: 25, job: "Developer" } ``` **Gunanya Spread:** - Gabungkan array/object - Copy data (immutable) - Add property ke object **C. Optional Chaining (?.)** - Hindari Error! ```javascript const user = { name: "Galih", address: { city: "Jakarta" } }; // Tanpa optional chaining (bisa error!) // const zip = user.location.zipCode; // Error! location undefined // Dengan optional chaining (aman!) const zip = user.address?.zipCode; // undefined (ga error) const country = user.location?.country; // undefined (ga error) ``` **Kapan pakai:** Saat akses nested property yang mungkin ga ada. **D. Nullish Coalescing (??)** ```javascript // ?? = kalau null/undefined, pakai default const value1 = null ?? "default"; // "default" const value2 = undefined ?? "default"; // "default" const value3 = 0 ?? "default"; // 0 (bukan "default"!) const value4 = "" ?? "default"; // "" (bukan "default"!) // Bedanya dengan OR (||) const value5 = 0 || "default"; // "default" (0 dianggap falsy) const value6 = "" || "default"; // "default" ("" dianggap falsy) ``` **Bedanya ?? vs ||:** - `??` = cuma null/undefined yang diganti - `||` = semua falsy (0, "", false, null, undefined) diganti ### 9. DOM Manipulation (Mengubah Website) **Apa itu DOM?** DOM = Document Object Model. Intinya: JavaScript bisa ngubah HTML & CSS secara dinamis! **A. Select Element (Ambil Element HTML)** ```javascript // Select 1 element const button = document.querySelector('#myButton'); // By ID const title = document.querySelector('.title'); // By class const heading = document.querySelector('h1'); // By tag // Select multiple elements const items = document.querySelectorAll('.item'); // Dapat semua .item ``` **B. Ubah Content** ```javascript const title = document.querySelector('#title'); // Ubah text title.textContent = "New Title"; // Plain text (aman) // Ubah HTML title.innerHTML = "Bold Title"; // HTML (hati-hati XSS!) ``` **C. Ubah Style** ```javascript const button = document.querySelector('#btn'); // Ubah CSS button.style.backgroundColor = "blue"; button.style.color = "white"; button.style.padding = "10px 20px"; ``` **D. Manage Classes** ```javascript const button = document.querySelector('#btn'); button.classList.add('active'); // Tambah class button.classList.remove('inactive'); // Hapus class button.classList.toggle('selected'); // Toggle (on/off) // Cek apakah punya class if (button.classList.contains('active')) { console.log('Button is active!'); } ``` **E. Event Listeners (Reaksi terhadap Action)** ```javascript const button = document.querySelector('#btn'); // Click event button.addEventListener('click', () => { console.log('Button clicked!'); }); // Input event const input = document.querySelector('#email'); input.addEventListener('input', (e) => { console.log(e.target.value); // Value yang diketik }); ``` **F. Create & Add Elements** ```javascript // Bikin element baru const newDiv = document.createElement('div'); newDiv.textContent = "Hello World"; newDiv.classList.add('box'); // Tambahkan ke page document.body.appendChild(newDiv); ``` ### 10. Async JavaScript (Untuk Load Data) **Apa itu Async?** Async = operasi yang butuh waktu (fetch API, database, file upload). Kode jalan tanpa nunggu (non-blocking). **A. Async/Await (Cara Modern - Recommended!)** ```javascript // Fetch data dari API async function loadUsers() { try { // await = tunggu sampai selesai const response = await fetch('https://api.example.com/users'); const users = await response.json(); console.log(users); } catch (error) { console.error('Error:', error); } } loadUsers(); ``` **Kapan pakai Async:** - Fetch data dari API - Baca/tulis file - Database operations - Apapun yang butuh "nunggu" **B. Promises (Di balik Async/Await)** ```javascript // Bikin promise const fetchData = () => { return new Promise((resolve, reject) => { setTimeout(() => { resolve("Data loaded!"); }, 1000); }); }; // Pakai promise fetchData() .then(data => console.log(data)) // Kalau sukses .catch(error => console.error(error)); // Kalau error ``` **Tips:** Pakai async/await, lebih readable daripada .then().catch() ## Best Practices ### 1. Use Strict Mode ```javascript "use strict"; // Prevents silent errors x = 10; // Error: x is not defined ``` ### 2. Meaningful Variable Names ```javascript // Bad let x = 10; let d = new Date(); // Good let userAge = 10; let currentDate = new Date(); ``` ### 3. Prefer const, use let, avoid var ```javascript // Default to const const API_URL = "https://api.example.com"; const users = []; // Use let only if value changes let count = 0; count++; // Avoid var (old school) // var name = "bad"; ``` ### 4. Use Arrow Functions ```javascript // Old const double = function(x) { return x * 2; }; // Modern const double = x => x * 2; ``` ### 5. Error Handling ```javascript try { // Code that might throw error const data = JSON.parse(jsonString); } catch (error) { console.error('Failed to parse:', error); } finally { // Always runs console.log('Done'); } ``` ## Kesalahan Umum ### 1. == vs === ```javascript // Jangan pakai == "5" == 5; // true (bikin bingung!) null == undefined; // true (confusing!) // Selalu pakai === "5" === 5; // false (jelas!) null === undefined; // false (jelas!) ``` ### 2. Scope Issues ```javascript // var has function scope (problematic) for (var i = 0; i < 3; i++) { setTimeout(() => console.log(i), 100); } // Output: 3, 3, 3 (confusing!) // let has block scope (better) for (let i = 0; i < 3; i++) { setTimeout(() => console.log(i), 100); } // Output: 0, 1, 2 (expected!) ``` ### 3. this Keyword ```javascript const person = { name: "Galih", greet: function() { console.log(`Hi, I'm ${this.name}`); }, greetArrow: () => { console.log(`Hi, I'm ${this.name}`); // this = undefined! } }; person.greet(); // "Hi, I'm Galih" person.greetArrow(); // "Hi, I'm undefined" ``` ## Tools & Resources ### Developer Tools - **Browser DevTools** - Built-in di Chrome/Firefox (F12) - **Node.js** - JavaScript runtime buat backend - **VSCode** - Code editor paling populer ### Online Playground - [CodePen](https://codepen.io) - Quick prototyping - [JSFiddle](https://jsfiddle.net) - Test code snippets - [StackBlitz](https://stackblitz.com) - Full project environment ### Practice - [freeCodeCamp](https://www.freecodecamp.org) - Interactive lessons - [JavaScript30](https://javascript30.com) - 30 day challenge - [Exercism](https://exercism.org/tracks/javascript) - Practice problems ## Langkah Selanjutnya Setelah master JavaScript fundamental: 1. **Modern JavaScript (ES6+)** - Deep dive into advanced features 2. **DOM & Browser APIs** - Web Storage, Fetch API, etc. 3. **JavaScript Framework** - React, Vue, atau Svelte 4. **TypeScript** - JavaScript with type safety 5. **Node.js** - JavaScript di backend 6. **Testing** - Jest, Vitest untuk testing ## Kesimpulan **JavaScript = Must-Have Skill di 2025!** Dari frontend sampe backend, mobile sampe desktop - semua butuh JavaScript. **Yang Wajib Dikuasai:** 1. Variables (const, let) 2. Data Types (string, number, boolean, array, object) 3. Functions (arrow functions recommended) 4. Array Methods (map, filter, find, reduce) 5. Async/Await (untuk API calls) Langkah Selanjutnya: 1. **Practice!** Bikin project sederhana: - Todo List - Calculator - Weather App (pakai API) 2. **Belajar Framework:** React, Vue, atau Svelte 3. **Backend:** Node.js + Express 4. **TypeScript:** JavaScript with type safety **Tips Sukses:** - Coding tiap hari (consistency > intensity) - Build projects, bukan cuma nonton tutorial - Join community (Discord, forum, dll) - Baca dokumentasi resmi (MDN) Mulai dari kecil, konsisten, dan terus berkembang. JavaScript journey-nya panjang, tapi worth it! Happy coding!