JavaScript Fundamentals: 10 Konsep Dasar yang Wajib Kamu Kuasai Sebelum Belajar Framework

Pernah nggak sih merasa pengen langsung loncat ke React, Vue, atau Node.js karena pengen cepat-cepat bikin aplikasi keren? Saya pernah! Tapi kemudian saya sadar: itu seperti mau bangun rumah tanpa fondasi yang kuat. Hasilnya? Rumahnya mungkin berdiri, tapi goyah dan gampang rubuh.

JavaScript fundamentals itu ibarat fondasi rumah. Memang nggak keliatan keren seperti framework-framework yang fancy, tapi tanpa menguasai dasar-dasarnya, kamu akan terus struggle dengan bug-bug aneh dan nggak paham kenapa code-mu nggak bekerja sesuai ekspektasi.

Di artikel ini, kita akan bahas 10 konsep dasar JavaScript yang benar-benar wajib kamu pahami. Ini bukan teori doang, tapi practical knowledge yang bakal kamu gunakan setiap hari sebagai JavaScript developer. Yuk, kita perkuat fondasimu!

1. Variables: var, let, const – Bukan Sekedar Tempat Penyimpanan

Variabel itu seperti wadah penyimpanan data. Tapi di JavaScript, ada tiga jenis wadah yang punya karakteristik berbeda:

// ❌ Jangan pakai var lagi (kecuali ada alasan khusus)
var namaLama = "ini jaman dulu";

// ✅ Gunakan const untuk nilai yang tidak berubah
const namaTetap = "JavaScript";
// namaTetap = "TypeScript"; // Error! const tidak bisa di-reassign

// ✅ Gunakan let untuk nilai yang bisa berubah
let counter = 0;
counter = 1; // Boleh!

Analoginya: Bayangkan const seperti tattoo permanen, sekali dibuat nggak bisa diubah. let seperti tulisan di whiteboard, bisa dihapus dan diganti kapan saja.

Scope Matters: Block Scope vs Function Scope

Perbedaan utama let/const dengan var ada di scope-nya:

if (true) {
  var pakaiVar = "saya bisa diakses di luar";
  let pakaiLet = "saya hanya ada di dalam sini";
  const pakaiConst = "saya juga hanya di dalam sini";
}

console.log(pakaiVar); // Bisa diakses
console.log(pakaiLet); // Error: pakaiLet is not defined
console.log(pakaiConst); // Error: pakaiConst is not defined

2. Data Types: Mengenal Jenis-jenis Data di JavaScript

JavaScript punya dua kategori tipe data: Primitive dan Object.

Primitive Data Types (Immutable):

• String: Teks, contoh: “Hello World”
• Number: Angka, contoh: 42, 3.14
• Boolean: true/false
• Undefined: Variabel yang belum diberi nilai
• Null: Nilai kosong yang disengaja
• Symbol: Identifier yang unik (ES6+)
• BigInt: Untuk angka yang sangat besar (ES2020+)

Object Data Types (Mutable):

• Object: {name: “John”, age: 30}
• Array: [1, 2, 3, 4]
• Function: function() { }
• Date: new Date()

Tips: Gunakan typeof untuk mengecek tipe data:

console.log(typeof "hello"); // "string"
console.log(typeof 42); // "number"
console.log(typeof []); // "object" (hati-hati!)
console.log(typeof null); // "object" (ini bug historical!)

3. Functions: Jantungnya JavaScript

Function adalah blok code yang bisa dipanggil berulang kali. Ada beberapa cara membuat function:

Function Declaration

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

Function Expression

const sapa = function(nama) {
  return `Halo, ${nama}!`;
};

Arrow Function (ES6+)

const sapa = (nama) => {
  return `Halo, ${nama}!`;
};

// Atau lebih ringkas:
const sapa = nama => `Halo, ${nama}!`;

Perbedaan penting: Arrow function tidak punya this sendiri, jadi berguna untuk callback dan method di object.

4. Conditionals: Mengontrol Alur Program

Conditionals memungkinkan program mengambil keputusan berdasarkan kondisi tertentu.

const nilai = 85;

// if-else statement
if (nilai >= 90) {
  console.log("Grade A");
} else if (nilai >= 80) {
  console.log("Grade B"); // Ini yang akan dieksekusi
} else {
  console.log("Grade C");
}

// Ternary operator (shortcut untuk if-else sederhana)
const hasil = nilai >= 75 ? "Lulus" : "Tidak Lulus";
console.log(hasil); // Lulus

// Switch case (untuk banyak kondisi)
const hari = "Senin";
switch (hari) {
  case "Senin":
    console.log("Start of week");
    break;
  case "Jumat":
    console.log("Thank God it's Friday!");
    break;
  default:
    console.log("Regular day");
}

5. Loops: Mengulangi Tugas yang Sama

Loops digunakan untuk mengeksekusi code berulang kali. Ada beberapa jenis loop di JavaScript:

For Loop (paling umum)

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

While Loop

let counter = 0;
while (counter < 5) {
  console.log(`Counter: ${counter}`);
  counter++;
}

For…of Loop (untuk array)

const fruits = ["apple", "banana", "orange"];
for (const fruit of fruits) {
  console.log(fruit);
}

Array Methods (modern alternative)

const numbers = [1, 2, 3, 4, 5];
numbers.forEach(number => console.log(number));

6. Arrays: Mengelola Kumpulan Data

Array seperti lemari penyimpanan yang punya banyak laci. Setiap laci punya nomor index (dimulai dari 0).

// Membuat array
const buah = ["apel", "mangga", "jeruk"];

// Mengakses elemen
console.log(buah[0]); // apel
console.log(buah[1]); // mangga

// Method array yang sering digunakan
buah.push("anggur"); // Tambah di akhir
buah.pop(); // Hapus dari akhir
buah.unshift("durian"); // Tambah di awal
buah.shift(); // Hapus dari awal

// Modern array methods (ES6+)
const angka = [1, 2, 3, 4, 5];

const doubled = angka.map(num => num * 2); // [2, 4, 6, 8, 10]
const genap = angka.filter(num => num % 2 === 0); // [2, 4]
const total = angka.reduce((sum, num) => sum + num, 0); // 15

7. Objects: Merepresentasikan Entity Dunia Nyata

Object seperti formulir yang berisi informasi tentang sesuatu. Setiap informasi disimpan dalam key-value pairs.

// Membuat object
const person = {
  nama: "Budi",
  umur: 25,
  pekerjaan: "Developer",
  sapa: function() {
    return `Halo, saya ${this.nama}`;
  }
};

// Mengakses property
console.log(person.nama); // Budi
console.log(person["umur"]); // 25 (bracket notation)

// Menambah property baru
person.email = "budi@example.com";

// Method di object
console.log(person.sapa()); // Halo, saya Budi

8. DOM Manipulation: Interaksi dengan Halaman Web

DOM (Document Object Model) adalah representasi HTML document sebagai object yang bisa dimanipulasi dengan JavaScript.

// Select element
const button = document.getElementById("myButton");
const heading = document.querySelector(".title");

// Event listener
button.addEventListener("click", function() {
  heading.textContent = "Text berubah!";
  heading.style.color = "red";
});

// Manipulasi CSS
const box = document.querySelector(".box");
box.classList.add("active"); // Tambah class
box.classList.remove("inactive"); // Hapus class

Tips: Pahami perbedaan antara getElementById, querySelector, dan querySelectorAll.

9. Asynchronous JavaScript: Callbacks, Promises, async/await

JavaScript single-threaded, tapi bisa handle tugas asynchronous seperti fetching data dari server.

Callback (old way)

function fetchData(callback) {
  setTimeout(() => {
    callback("Data received");
  }, 1000);
}

fetchData(data => {
  console.log(data); // "Data received" setelah 1 detik
});

Promise (modern way)

function fetchData() {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve("Data received");
    }, 1000);
  });
}

fetchData()
  .then(data => console.log(data))
  .catch(error => console.error(error));

Async/await (most readable)

async function getData() {
  try {
    const data = await fetchData();
    console.log(data);
  } catch (error) {
    console.error(error);
  }
}

10. ES6+ Features: Modern JavaScript yang Wajib Dikuasai

Beberapa fitur ES6+ yang membuat coding lebih mudah dan readable:

Destructuring

const person = { name: "Alice", age: 30 };
const { name, age } = person; // Extract properties

const numbers = [1, 2, 3];
const [first, second] = numbers; // Extract array elements

Spread Operator

const arr1 = [1, 2, 3];
const arr2 = [4, 5, 6];
const combined = [...arr1, ...arr2]; // [1, 2, 3, 4, 5, 6]

const obj1 = { a: 1, b: 2 };
const obj2 = { ...obj1, c: 3 }; // { a: 1, b: 2, c: 3 }

Template Literals

const name = "Sarah";
const message = `Halo, ${name}! 
Selamat datang di JavaScript.`; // Bisa multi-line

Common Mistakes yang Sering Dilakukan Pemula

Biar nggak ngulangi kesalahan yang sama, hindari ini:

1. Lupa === vs ==: Selalu gunakan strict equality (===)
2. Mutation yang tidak disengaja: Hati-hati saat memodifikasi object/array
3. Callback hell: Gunakan Promise atau async/await untuk async code
4. Variable naming yang buruk: Gunakan nama yang descriptive
5. Ignoring errors: Selalu handle potential errors dengan try-catch

Practice Makes Perfect: Project Ideas untuk Latihan

Teori tanpa praktik percuma. Coba bangun project sederhana ini:

• To-Do List App: CRUD operations dengan localStorage
• Weather App: Fetch data dari public API
• Calculator: Practice DOM manipulation dan event handling
• Memory Game: Algorithm dan state management
• Quiz App: Array manipulation dan conditional logic

Kesimpulan: Fondasi yang Kuat, Masa Depan yang Cerah

Menguasai JavaScript fundamentals itu seperti belajar bahasa asing. Awalnya mungkin terasa overwhelming, tapi sekali kamu paham konsep dasarnya, belajar framework dan library akan jadi jauh lebih mudah.

Ingat: bahkan senior developer pun masih sering kembali ke dasar-dasar JavaScript ketika menghadapi bug yang tricky. Fundamental knowledge itu timeless dan akan selalu berguna sepanjang karirmu sebagai developer.

Jangan terburu-buru loncat ke framework. Luangkan waktu untuk benar-benar memahami konsep-konsep dasar ini. Trust me, investment waktu-mu akan terbayar dengan kemampuan debugging yang lebih baik, code quality yang lebih tinggi, dan pemahaman yang lebih dalam tentang bagaimana JavaScript benar-benar bekerja.

Happy coding, and may the fundamentals be with you! 💪🚀