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: "budi@email.com" };
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.