Cara Belajar JavaScript dari Nol untuk Pemula

JavaScript adalah bahasa programming paling populer untuk web development. Mari pelajari dari dasar.

Apa itu JavaScript?

Penggunaan JavaScript

Digunakan untuk:
- Frontend web development
- Backend (Node.js)
- Mobile apps (React Native)
- Desktop apps (Electron)
- Game development

Variables dan Data Types

Deklarasi Variables

// var (old way, avoid)
var name = "John";
// let (can be reassigned)
let age = 25;
age = 26; // OK
// const (cannot be reassigned)
const PI = 3.14;
// PI = 3.15; // Error!

Data Types

// String
let nama = "Budi";
let pesan = "Hello World";
let template = `Halo ${nama}`;
// Number
let umur = 25;
let harga = 99.99;
// Boolean
let aktif = true;
let selesai = false;
// Undefined
let data;
console.log(data); // undefined
// Null
let kosong = null;
// Array
let buah = ["apel", "jeruk", "mangga"];
// Object
let user = {
nama: "Budi",
umur: 25,
aktif: true,
};

Operators

Arithmetic Operators

let a = 10;
let b = 3;
console.log(a + b); // 13 (addition)
console.log(a - b); // 7 (subtraction)
console.log(a * b); // 30 (multiplication)
console.log(a / b); // 3.33 (division)
console.log(a % b); // 1 (modulus)
console.log(a ** b); // 1000 (exponent)

Comparison Operators

let x = 5;
console.log(x == "5"); // true (loose equality)
console.log(x === "5"); // false (strict equality)
console.log(x != 3); // true
console.log(x !== "5"); // true
console.log(x > 3); // true
console.log(x <= 5); // true

Control Flow

If-Else Statement

let nilai = 85;
if (nilai >= 90) {
console.log("A");
} else if (nilai >= 80) {
console.log("B");
} else if (nilai >= 70) {
console.log("C");
} else {
console.log("D");
}
// Ternary operator
let status = nilai >= 70 ? "Lulus" : "Tidak Lulus";

Switch Statement

let hari = "Senin";
switch (hari) {
case "Senin":
console.log("Hari kerja");
break;
case "Sabtu":
case "Minggu":
console.log("Weekend");
break;
default:
console.log("Hari lainnya");
}

Loops

For Loop

// Basic for loop
for (let i = 0; i < 5; i++) {
  console.log(i);
}
// For...of (arrays)
let buah = ["apel", "jeruk", "mangga"];
for (let item of buah) {
console.log(item);
}
// For...in (objects)
let user = { nama: "Budi", umur: 25 };
for (let key in user) {
console.log(
${key}: ${user[key]});
}

While Loop

let i = 0;
while (i < 5) {
  console.log(i);
  i++;
}
// Do...while
let j = 0;
do {
console.log(j);
j++;
} while (j < 5);

Functions

Function Declaration

// Basic function
function sapa(nama) {
  return `Halo, ${nama}!`;
}
console.log(sapa("Budi"));
// Function expression
const tambah = function (a, b) {
return a + b;
};
// Arrow function
const kali = (a, b) => a * b;
// Arrow function dengan body
const hitung = (a, b) => {
let hasil = a + b;
return hasil * 2;
};

Default Parameters

function sapa(nama = "User") {
  return `Halo, ${nama}!`;
}
console.log(sapa()); // Halo, User!
console.log(sapa("Budi")); // Halo, Budi!

Arrays

Array Methods

let angka = [1, 2, 3, 4, 5];
// Add/Remove elements
angka.push(6); // Add to end
angka.pop(); // Remove from end
angka.unshift(0); // Add to beginning
angka.shift(); // Remove from beginning
// Find elements
angka.indexOf(3); // 2
angka.includes(3); // true
// Slice and splice
angka.slice(1, 3); // [2, 3] (tidak mengubah array)
angka.splice(1, 2); // Remove 2 elements from index 1

Array Iteration Methods

let angka = [1, 2, 3, 4, 5];
// forEach
angka.forEach((num) => console.log(num));
// map (return new array)
let doubled = angka.map((num) => num * 2);
// [2, 4, 6, 8, 10]
// filter
let genap = angka.filter((num) => num % 2 === 0);
// [2, 4]
// reduce
let total = angka.reduce((acc, num) => acc + num, 0);
// 15
// find
let found = angka.find((num) => num > 3);
// 4

Objects

Object Basics

// Create object
let user = {
  nama: "Budi",
  umur: 25,
  alamat: {
    kota: "Jakarta",
    kodePos: "12345",
  },
  sapa: function () {
    return `Halo, saya ${this.nama}`;
  },
};
// Access properties
console.log(user.nama); // Budi
console.log(user["umur"]); // 25
console.log(user.alamat.kota); // Jakarta
// Call method
console.log(user.sapa());

Destructuring

// Object destructuring
let { nama, umur } = user;
console.log(nama); // Budi
// Array destructuring
let [pertama, kedua] = [1, 2, 3];
console.log(pertama); // 1
// Spread operator
let newUser = { ...user, email: "[email protected]" };
let newArray = [...angka, 6, 7];

DOM Manipulation

Select Elements

// By ID
let element = document.getElementById("myId");
// By class
let elements = document.getElementsByClassName("myClass");
// Query selector (recommended)
let el = document.querySelector("#myId");
let els = document.querySelectorAll(".myClass");

Modify Elements

let el = document.querySelector("#myElement");
// Content
el.textContent = "New text";
el.innerHTML = "<strong>Bold text</strong>";
// Attributes
el.setAttribute("class", "newClass");
el.classList.add("active");
el.classList.remove("inactive");
el.classList.toggle("visible");
// Styles
el.style.color = "red";
el.style.backgroundColor = "blue";

Event Listeners

let button = document.querySelector("#myButton");
button.addEventListener("click", function (event) {
console.log("Button clicked!");
event.preventDefault();
});
// Arrow function
button.addEventListener("click", (e) => {
console.log("Clicked!");
});

Async JavaScript

Promises

// Create promise
let promise = new Promise((resolve, reject) => {
  setTimeout(() => {
    resolve("Success!");
    // reject("Error!");
  }, 1000);
});
// Use promise
promise
.then((result) => console.log(result))
.catch((error) => console.log(error));

Async/Await

async function fetchData() {
  try {
    let response = await fetch("https://api.example.com/data");
    let data = await response.json();
    console.log(data);
  } catch (error) {
    console.error("Error:", error);
  }
}
fetchData();

Kesimpulan

JavaScript adalah bahasa yang versatile dan powerful. Mulai dengan basics lalu explore framework seperti React atau Node.js.