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!

Daftar Isi

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:

Primitif:
- string (teks, contoh: "Hello"),
- number (angka, termasuk desimal),
- boolean (true/false),
- null dan undefined (nilai kosong).
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!

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!

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!

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:

Gunakan nama fungsi yang deskriptif (hitungDiskon, bukan funcX)
Untuk fungsi kompleks, pecah menjadi fungsi-fungsi kecil
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”!

Praktik Sederhana Sintaks JavaScript

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

Menyimpan data produk dalam array of objects
Menghitung total harga
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:

Hitung rata-rata harga produk
Sortir produk dari harga termahal

Contoh solusi:

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

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:

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:

Challenge: Modifikasi todo list di atas untuk:

Menghapus task
Filter task yang sudah selesai

Contoh solusi:

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

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.

Mempelajari Sintaks Dasar JavaScript: Variabel dan Tipe Data, Operator, Struktur Kontrol, dan Fungsi — *Photo by Rashed Paykary on Unsplash*

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!

JavaScript

Belajar Pemrograman JavaScript dari Nol #3b

Memahami Variabel dan Tipe Data di JavaScript

Mengenal Operator dalam Pemrograman JavaScript

1. Operator Aritmatika

2. Operator Perbandingan

3. Operator Logika

4. Operator Penugasan

5. Operator Ternary

Struktur Kontrol Dasar untuk Pemula

1. Percabangan

if-else

switch-case

2. Perulangan

for

while

for...of (ES6)

Cara Membuat dan Menggunakan Fungsi

1. Function Declaration

2. Function Expression

3. Arrow Function (ES6)

Parameter & Argumen

Return Value

Praktik Sederhana Sintaks JavaScript

1. Data Produk

2. Hitung Total Harga

3. Tambah Fungsi Diskon

4. Validasi Stok

5. Contoh Interaktif

Tips Menghindari Kesalahan Umum Pemula

1. Lupa Deklarasi Variabel

2. Tidak Paham Type Coercion

3. Mutable vs Immutable

4. Callback Hell

5. Scope yang Salah

Contoh Kode JavaScript untuk Latihan

1. Konverter Suhu

2. Palindrome Checker

3. Todo List Sederhana

4. Penghitung Huruf Vokal

5. Generator Warna Acak

Sumber Belajar JavaScript Lebih Lanjut

1. Dokumentasi Resmi

2. Platform Interaktif

3. Buku Digital

4. Proyek Praktis

5. Komunitas

Variabel Tipe Data dan Struktur Kontrol JavaScript

Apa Itu DOM dan Manipulasi DOM

You may also like

Apa Itu JavaScript dan Environment JavaScript

Konsep Dasar Pemrograman dan Algoritma Logika

Panduan Melayani File HTML dengan Node JS

Leave A Reply Batalkan balasan

Teknologi Pemrograman

Teknologi DevOps

Layanan

Recommend

`if-else`

`switch-case`

`for`

`while`

`for...of` (ES6)