JavaScript adalah bahasa pemrograman yang sangat fleksibel dan banyak digunakan di dunia pengembangan web. Untuk benar-benar menguasainya, ada beberapa konsep dasar yang perlu dipahami dengan baik. Berikut adalah 10 teknik utama beserta contoh kodenya untuk membantu Anda menguasai JavaScript.

1. Variabel dan Tipe Data

Dalam JavaScript, kita dapat mendeklarasikan variabel menggunakan var, let, atau const. Selain itu, tipe data yang umum digunakan adalah string, number, boolean, object, dan array.

let nama = "Budi"; // String
const umur = 25;   // Number
let isMember = true; // Boolean
let hobi = ["Membaca", "Bermain"]; // Array
let alamat = { kota: "Bandung", jalan: "Jalan Raya No. 5" }; // Object

2. Fungsi

Fungsi dapat dibuat dengan dua cara deklaratif dan ekspresi. Arrow function adalah fitur baru yang lebih singkat.

// Deklaratif
function sapa(nama) {
  return `Halo, ${nama}!`;
}

// Ekspresi
const sapaEkspresi = function(nama) {
  return `Hai, ${nama}!`;
}

// Arrow Function
const sapaArrow = (nama) => `Halo, ${nama}!`;
console.log(sapa("Budi"));

3. Pengendalian Alur

Kontrol alur memungkinkan kita membuat keputusan berdasarkan kondisi tertentu.

let nilai = 80;

if (nilai >= 75) {
  console.log("Lulus");
} else {
  console.log("Tidak Lulus");
}

// Ternary Operator
let status = nilai >= 75 ? "Lulus" : "Tidak Lulus";
console.log(status);

4. Looping

Looping digunakan untuk mengulang suatu blok kode.

// For Loop
for (let i = 0; i < 5; i++) {
  console.log(`Angka ke-${i}`);
}

// While Loop
let i = 0;
while (i < 5) {
  console.log(`Angka ${i}`);
  i++;
}

5. Manipulasi DOM

JavaScript memungkinkan kita untuk memanipulasi elemen HTML melalui DOM.

// Mengambil elemen dengan id
let judul = document.getElementById("judul");

// Mengubah teks elemen
judul.innerText = "Selamat Datang di Situs Kami";

// Menambahkan class baru
judul.classList.add("judul-baru");

6. Asynchronous Programming

JavaScript mendukung pemrograman asinkron menggunakan callback, Promises, dan async/await.

// Menggunakan Promise
const janji = new Promise((resolve, reject) => {
  setTimeout(() => resolve("Selesai"), 2000);
});

janji.then((hasil) => console.log(hasil));

// Menggunakan async/await
async function fetchData() {
  let hasil = await janji;
  console.log(hasil);
}
fetchData();

7. Object-Oriented Programming (OOP)

JavaScript mendukung OOP melalui class, constructor, dan inheritance.

class Manusia {
  constructor(nama, umur) {
    this.nama = nama;
    this.umur = umur;
  }

  perkenalkan() {
    return `Halo, nama saya ${this.nama} dan saya berumur ${this.umur} tahun.`;
  }
}

const budi = new Manusia("Budi", 25);
console.log(budi.perkenalkan());

8. Event Handling

Event handling memungkinkan kita merespons berbagai interaksi pengguna.

// Mengambil tombol dengan id
let tombol = document.getElementById("tombol");

// Menambahkan event listener
tombol.addEventListener("click", function() {
  alert("Tombol ditekan!");
});

9. Error Handling

Untuk menangani kesalahan dalam kode, kita dapat menggunakan try, catch, dan finally.

try {
  let hasil = 10 / 0;
  console.log(hasil);
} catch (error) {
  console.log("Terjadi kesalahan: " + error.message);
} finally {
  console.log("Eksekusi selesai.");
}

10. Module

Dalam JavaScript modern, kita dapat membagi kode ke dalam modul untuk manajemen yang lebih baik.

// utils.js
export const tambah = (a, b) => a + b;

// main.js
import { tambah } from './utils.js';

console.log(tambah(5, 10)); // Output: 15

Kesimpulan

Menguasai 10 teknik ini adalah langkah awal yang penting untuk memahami JavaScript. Dengan memahami variabel, fungsi, pengendalian alur, loop, manipulasi DOM, pemrograman asinkron, OOP, event handling, error handling, dan modul, Anda akan siap membangun aplikasi web yang efisien dan kuat.