Panduan Dasar JavaScript untuk Pemula Pemrograman

Belajar Pemrograman JavaScript dari Nol #3b

JavaScript adalah bahasa pemrograman serbaguna yang wajib dipelajari jika kamu ingin terjun ke dunia pengembangan web. Bagi yang baru mulai, JavaScript untuk Pemula mungkin terlihat rumit, tapi sebenarnya konsep dasarnya cukup mudah dipahami. Artikel ini akan membantumu mengenal sintaks dasar seperti variabel, operator, dan fungsi dengan cara yang simpel. Tidak perlu khawatir jika kamu belum pernah coding sebelumnya—kita akan bahas langkah demi langkah. Siapkan teks editor dan browser, karena kita akan langsung praktik dengan contoh kode yang mudah diikuti. Yuk, mulai belajar!

Baca Juga: Apa Itu JavaScript dan Environment JavaScript

Memahami Variabel dan Tipe Data di JavaScript

Variabel adalah tempat menyimpan data dalam JavaScript. Kamu bisa bayangkan seperti kotak yang menampung nilai, dan setiap kotak punya nama unik. Untuk membuatnya, gunakan kata kunci let, const, atau var (meski var sudah jarang dipakai di kode modern). Contoh:

let nama = "Budi"; // Variabel bisa diubah 
const umur = 25; // Nilai tetap (tidak bisa diubah) 

JavaScript punya beberapa tipe data dasar:

1. Primitif:
   • string (teks, contoh: "Hello"),
   • number (angka, termasuk desimal),
   • boolean (true/false),
   • null dan undefined (nilai kosong).
2. Non-primitif:
   • object (struktur data kompleks, termasuk array dan function).

Contoh penggunaan:

let isActive = true; // boolean 
let harga = 99.99; // number 
let alamat = null; // sengaja dikosongkan 

Type coercion adalah fitur unik JavaScript yang mengubah tipe data secara otomatis, kadang bikin bingung. Misal:

console.log("5" + 3); // Output: "53" (bukan 8!) 

Pelajari lebih dalam tentang tipe data di MDN JavaScript Data Types.

Tips:

• Gunakan const kecuali nilai perlu diubah.
• Hindari == (coercion), pakai === untuk perbandingan ketat.
• Cek tipe data dengan typeof:

console.log(typeof nama); // Output: "string" 

Latihan: Coba buat variabel produk (object) dengan properti nama, harga, dan stok!

Baca Juga: Konsep Dasar Pemrograman dan Algoritma Logika

Mengenal Operator dalam Pemrograman JavaScript

Operator adalah simbol yang digunakan untuk melakukan operasi pada data, seperti perhitungan atau perbandingan. Di JavaScript, operator dibagi menjadi beberapa jenis:

1. Operator Aritmatika

Untuk operasi matematika dasar:

let a = 10 + 5; // Penjumlahan (15) 
let b = 10 % 3; // Modulus (sisa bagi: 1) 

Termasuk increment (++) dan decrement (--):

let counter = 0; 
counter++; // Sekarang nilai counter = 1 

2. Operator Perbandingan

Membandingkan nilai dan mengembalikan true/false:

console.log(5 > 3); // true 
console.log("5" == 5); // true (coercion), hati-hati! 
console.log("5" === 5); // false (strict equality) 

Lebih lengkap di MDN Comparison Operators.

3. Operator Logika

Digunakan untuk pengambilan keputusan:

let isMember = true; 
let hasCoupon = false; 
console.log(isMember && hasCoupon); // false (AND) console.log(isMember || hasCoupon); // true (OR) 

4. Operator Penugasan

Contoh selain = biasa:

let x = 10; 
x += 5; // x sekarang 15 (sama dengan x = x + 5) 

5. Operator Ternary

Shortcut untuk if-else:

let status = (umur >= 17) ? "Dewasa" : "Anak-anak"; 

Tips Penting:

• Hindari coercion dengan selalu gunakan ===.
• Gabungkan operator untuk logika kompleks:

if (nilai > 70 && nilai <= 100) {
  console.log("Lulus!");
} 

Latihan: Coba hitung diskon 10% dari harga 75000 menggunakan operator!

Baca Juga: Belajar Svelte – Framework JavaScript untuk Pemula

Struktur Kontrol Dasar untuk Pemula

Struktur kontrol mengatur alur eksekusi kode JavaScript. Ada dua jenis utama: percabangan (pengambilan keputusan) dan perulangan (looping).

1. Percabangan

if-else

Menjalankan blok kode berdasarkan kondisi:

let nilai = 80;
if (nilai >= 75) {
  console.log("Lulus!");
} else {
  console.log("Remidi...");
} 

switch-case

Alternatif untuk banyak kondisi:

let hari = "Senin";
switch (hari) {
  case "Senin":
    console.log("Meeting pagi!");
    break;
  default:
    console.log("Hari biasa");
} 

Detail lengkap di MDN Control Flow.

2. Perulangan

for

Loop dengan jumlah iterasi diketahui:

for (let i = 0; i < 5; i++) {
  console.log(i); // 0, 1, 2, 3, 4 
} 

while

Loop selama kondisi benar:

let count = 0;
while (count < 3) {
  console.log("Loading...");
  count++;
} 

for...of (ES6)

Untuk iterasi array/string:

let buah = ["Apel", "Mangga"];
for (let item of buah) {
  console.log(item); // "Apel", "Mangga" 
} 

Tips:

• Hindari infinite loop dengan memastikan kondisi berakhir.
• Gunakan break untuk menghentikan loop prematur.

Contoh praktis:

// Cari angka pertama > 10 dalam array 
let numbers = [5, 8, 12, 3];
for (let num of numbers) {
  if (num > 10) {
    console.log("Ketemu:", num); // 12
    break;
  }
} 

Latihan: Buat loop yang print angka genap dari 0 sampai 10!

Baca Juga: Tutorial Svelte Todo List Aplikasi Sederhana

Cara Membuat dan Menggunakan Fungsi

Fungsi adalah blok kode yang bisa dipanggil berulang kali. Di JavaScript, ada beberapa cara membuat fungsi:

1. Function Declaration

Cara klasik dengan kata kunci function:

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

2. Function Expression

Menyimpan fungsi dalam variabel:

const hitungLuas = function (panjang, lebar) {
  return panjang * lebar;
};
console.log(hitungLuas(5, 3)); // 15 

3. Arrow Function (ES6)

Lebih ringkas untuk fungsi sederhana:

const tambah = (a, b) => a + b; 
console.log(tambah(2, 3)); // 5 

Parameter & Argumen

• Parameter: Variabel di deklarasi fungsi (function(a,b))
• Argumen: Nilai yang dimasukkan saat pemanggilan (tambah(2,3))

Contoh parameter default:

function pangkat(angka, eksponen = 2) {
  return Math.pow(angka, eksponen);
}
console.log(pangkat(3)); // 9 (default eksponen 2) 

Return Value

Fungsi tanpa return mengembalikan undefined:

function tidakReturn() {
  // kosong 
}
console.log(tidakReturn()); // undefined 

Tips Penting:

1. Gunakan nama fungsi yang deskriptif (hitungDiskon, bukan funcX)
2. Untuk fungsi kompleks, pecah menjadi fungsi-fungsi kecil
3. Pelajari lebih lanjut di MDN Functions Guide

Contoh praktis:

// Fungsi untuk cek bilangan prima 
function isPrime(num) {
  for (let i = 2; i < num; i++)
    if (num % i === 0)
      return false;
  return num > 1;
}
console.log(isPrime(7)); // true 

Latihan: Buat fungsi formatRupiah yang mengubah angka (contoh: 5000) menjadi string “Rp5.000”!

Baca Juga: Panduan Fullstack Nodejs dengan Integrasi Alpinejs

Praktik Sederhana Sintaks JavaScript

Mari gabungkan konsep dasar JavaScript dalam contoh nyata. Kita akan buat program kecil yang:

1. Menyimpan data produk dalam array of objects
2. Menghitung total harga
3. Menambahkan diskon

1. Data Produk

const products = [
  { name: "Buku", price: 50000, stock: 10 },
  { name: "Pensil", price: 3000, stock: 50 }
]; 

2. Hitung Total Harga

Gunakan reduce() untuk menjumlahkan harga:

const total = products.reduce((sum, product) => { 
  return sum + (product.price * product.stock); 
}, 0); 
console.log(`Total: Rp${total}`); // Output: Total: Rp650000 

3. Tambah Fungsi Diskon

function applyDiscount(amount, discountPercent) {
  return amount - (amount * discountPercent / 100);
}
console.log(applyDiscount(total, 10)); // Total setelah diskon 10%: 585000 

4. Validasi Stok

Cek produk dengan stok kurang dari 20:

const lowStock = products.filter(product => product.stock < 20);
console.log("Produk stok sedikit:", lowStock); // [{ name: "Buku", ... }] 

5. Contoh Interaktif

Gabungkan dengan prompt sederhana:

const productName = prompt("Cari produk:"); 
const found = products.find(p => p.name.toLowerCase() === productName.toLowerCase()); 
console.log(found || "Produk tidak ditemukan"); 

Tips:

• Gunakan console.table() untuk menampilkan data array lebih rapi.
• Pelajari metode array lain di MDN Array Methods.

Latihan: Modifikasi kode di atas untuk menambahkan fitur:

1. Hitung rata-rata harga produk
2. Sortir produk dari harga termahal

Contoh solusi:

// Rata-rata harga 
const avgPrice = products.reduce((sum, p) => sum + p.price, 0) / products.length; 

Baca Juga: Otomatisasi Pengumpulan Data dengan Puppeteer

Tips Menghindari Kesalahan Umum Pemula

1. Lupa Deklarasi Variabel

Jangan gunakan variabel tanpa let/const:

nama = "Budi"; // ❌ Tanpa deklarasi (bisa jadi global variable!) let nama = "Budi"; // ✅ Benar 

2. Tidak Paham Type Coercion

Selalu gunakan === ketimbang ==:

console.log("5" == 5); // ❌ true (coercion) 
console.log("5" === 5); // ✅ false 

3. Mutable vs Immutable

Hati-hati memodifikasi array/object:

const arr = [1, 2]; 
arr.push(3); // ❌ Tetap bisa diubah meski pakai const 
const newArr = [...arr, 3]; // ✅ Cara aman (buat array baru) 

4. Callback Hell

Jangan nested callback terlalu dalam:

// ❌ Sulit dibaca 
getData(function (a) {
  getMoreData(a, function (b) {
    // ... 
  });
});
// ✅ Gunakan Promise/async-await 
async function loadData() {
  const a = await getData();
  const b = await getMoreData(a);
} 

5. Scope yang Salah

var punya function scope, bukan block scope:

for (var i = 0; i < 3; i++) {
  setTimeout(() => console.log(i)); // Output: 3, 3, 3 
}
// ✅ Ganti dengan let (block scope) 
for (let i = 0; i < 3; i++) {
  setTimeout(() => console.log(i)); // Output: 0, 1, 2
} 

Referensi:

• MDN JavaScript Pitfalls
• JavaScript Equality Table

Latihan Perbaikan:

// ❌ Masalah: Fungsi ini mengubah array asli 
function tambahItem(arr, item) {
  return arr.push(item);
} 
// ✅ Solusi: 
function tambahItemFix(arr, item) {
  return [...arr, item];
} 

Contoh Kode JavaScript untuk Latihan

Berikut beberapa mini-project untuk melatih dasar JavaScript:

1. Konverter Suhu

Ubah Celsius ke Fahrenheit dan sebaliknya:

function toFahrenheit(celsius) {
  return (celsius * 9 / 5) + 32;
}
function toCelsius(fahrenheit) {
  return (fahrenheit - 32) * 5 / 9;
}
console.log(toFahrenheit(25)); // 77 
console.log(toCelsius(77)); // 25 

2. Palindrome Checker

Cek apakah kata/kalimat sama jika dibalik:

function isPalindrome(str) {
  const cleaned = str.toLowerCase().replace(/[^a-z0-9]/g, '');
  return cleaned === cleaned.split('').reverse().join('');
}
console.log(isPalindrome("Katak")); // true 

3. Todo List Sederhana

Manajemen task dengan array:

let todos = [];
function addTodo(task) {
  todos.push({ task, completed: false });
}
function completeTodo(index) {
  todos[index].completed = true;
}
addTodo("Belajar JavaScript");
completeTodo(0);
console.log(todos); 

4. Penghitung Huruf Vokal

Hitung jumlah vokal dalam string:

function countVowels(str) {
  const vowels = str.match(/[aiueo]/gi);
  return vowels ? vowels.length : 0;
}
console.log(countVowels("Hello World")); // 3 

5. Generator Warna Acak

Hasilkan warna hex random:

function randomColor() {
  return `#${Math.floor(Math.random() * 16777215).toString(16)}`;
}
console.log(randomColor()); // Contoh: #3da4f5 

Sumber Latihan Lain:

• FreeCodeCamp JavaScript Exercises
• Codewars Katas

Challenge: Modifikasi todo list di atas untuk:

1. Menghapus task
2. Filter task yang sudah selesai

Contoh solusi:

function deleteTodo(index) {
  todos.splice(index, 1);
} 

Baca Juga: Panduan Membuat Template Login dengan Tailwind CSS

Sumber Belajar JavaScript Lebih Lanjut

1. Dokumentasi Resmi

• MDN JavaScript: Referensi paling komprehensif untuk sintaks dan API.
• ECMAScript Spec: Untuk yang ingin mendalami standar JavaScript.

2. Platform Interaktif

• FreeCodeCamp: Gratis dengan latihan langsung di browser.
• Codecademy: Kursus terstruktur untuk pemula.

3. Buku Digital

• Eloquent JavaScript: Buku gratis dengan contoh kode interaktif.
• You Don’t Know JS: Deep dive ke konsep advanced.

4. Proyek Praktis

• JavaScript30: 30 proyek kecil dalam 30 hari.
• Frontend Mentor: Tantangan real-world dengan JavaScript.

5. Komunitas

• Stack Overflow: Tempat bertanya masalah coding.
• Dev.to: Artikel dan diskusi terbaru seputar JavaScript.

Contoh Eksplorasi API Modern:

// Coba Fetch API untuk ambil data publik
async function getGitHubProfile(username) {
  const response = await fetch(`https://api.github.com/users/${username}`);
  const data = await response.json();
  console.log(data);
}
getGitHubProfile("torvalds"); // Data profil Linus Torvalds 

Tips:

• Gabung komunitas lokal (misal: JakartaJS) untuk networking.
• Pantau update fitur terbaru di ES6 Compatibility Table.

Next Step: Pelajari framework seperti React/Vue setelah menguasai dasar JavaScript murni.

Belajar Pemrograman JavaScript itu seperti bermain puzzle—mulanya terlihat rumit, tapi semakin sering dipraktikkan, semakin terasa menyenangkan. Dari variabel sampai fungsi, semua konsep dasar ini adalah pondasi untuk membangun aplikasi yang lebih kompleks. Jangan takut membuat kesalahan, karena error adalah bagian dari proses belajar. Coba eksplor proyek kecil-kecilan, lalu perlahan tingkatkan kesulitannya. Yang penting, konsisten! Selalu ada hal baru untuk dipelajari di dunia JavaScript, jadi nikmati prosesnya. Sekarang saatnya buka teks editor dan mulai coding!