Variabel Tipe Data dan Struktur Kontrol JavaScript

jeditor

3 bulan ago

Belajar Pemrograman JavaScript dari Nol #3

Dalam pemrograman JavaScript, memahami Variabel dan Tipe Data adalah langkah dasar yang wajib dikuasai. Variabel digunakan untuk menyimpan nilai, sedangkan tipe data menentukan jenis nilai tersebut—seperti angka, teks, atau boolean. Misalnya:

let nama = "Budi"; // string  
let umur = 25; // number  
let aktif = true; // boolean

Selain itu, Struktur Kontrol seperti if-else atau perulangan membantu mengatur alur program. Tanpa konsep ini, kode akan sulit dikendalikan. Mari pelajari lebih dalam!

Pengenalan Variabel dalam JavaScript

Variabel adalah tempat menyimpan data dalam program. Di JavaScript, kita bisa membuat variabel menggunakan let, const, atau var (meski var sudah jarang dipakai di kode modern).

let: Untuk variabel yang bisa diubah nilainya.

let nama = "Andi";
nama = "Budi"; // Bisa diubah

const: Untuk nilai tetap (tidak bisa diubah setelah dideklarasikan).

const PI = 3.14;
// PI = 3.15 // Error! Const tidak bisa diubah

Kenapa penting? Variabel membantu kita mengelola data tanpa menulis ulang nilai yang sama. Misal, jika kita butuh nilai discount di banyak tempat, lebih efisien menyimpannya dalam variabel:

const discount = 0.1;
let harga = 10000;
let hargaDiskon = harga * (1 - discount); // Hasil: 9000

Aturan penamaan variabel:

Harus dimulai dengan huruf, _, atau $.
Case-sensitive (nama ≠ Nama).
Tidak boleh pakai spasi atau keyword JavaScript seperti if, function, dll.

Untuk penjelasan lebih detail, MDN Web Docs punya artikel lengkap tentang variabel.

Contoh penggunaan nyata:

let produk = "Laptop";
let stok = 5;
if (stok > 0) {
console.log(`${produk} tersedia!`);
} else {
console.log("Stok habis!");
}

Variabel membuat kode lebih dinamis dan mudah dikelola. Tanpanya, programming akan seperti menulis cerita tanpa nama karakter—ribet dan berulang!

Jenis Tipe Data yang Umum Digunakan

Di JavaScript, tipe data menentukan jenis nilai yang bisa disimpan dalam variabel. Berikut tipe data dasar yang paling sering dipakai:

Number Untuk angka, baik bulat maupun desimal.

let umur = 25;
let harga = 99.99;

String Untuk teks, ditandai dengan tanda kutip ('' atau "").

let nama = "Alice";
let pesan = 'Hello, world!';

Boolean Hanya memiliki dua nilai: true atau false.

let isActive = true;
let isAdmin = false;

Array Kumpulan nilai dalam [], bisa campur tipe data.

let fruits = ["Apel", 123, true];

Object Menyimpan data dalam pasangan key: value.

let user = {
name: "Bob",
age: 30
};

Undefined & Null

undefined: Variabel belum diberi nilai.
null: Nilai sengaja dikosongkan.

let x; // undefined
let y = null; // null

Untuk eksplorasi lebih dalam, lihat MDN tentang tipe data.

Contoh Operasi Tipe Data

// Cek tipe data
console.log(typeof "Hello"); // "string"
console.log(typeof 42); // "number"

// Konversi string ke number
let angka = "123";
console.log(parseInt(angka) + 1); // 124

Pemahaman tipe data krusial karena operasi tertentu hanya bekerja pada tipe spesifik. Misal, "5" + 2 menghasilkan "52" (concatenation), bukan 7!

Struktur Kontrol Percabangan If Else

Percabangan if else adalah cara JavaScript membuat keputusan berdasarkan kondisi. Struktur ini menjalankan blok kode tertentu hanya jika syaratnya terpenuhi.

Dasar `if else`

let saldo = 1000;
if (saldo > 500) {
console.log("Saldo mencukupi!"); // Dieksekusi jika true
} else {
console.log("Saldo tidak cukup!"); // Dieksekusi jika false
}

Variasi Kondisi

else if untuk multi-kondisi:

let nilai = 75;
if (nilai >= 90) {
console.log("A");
} else if (nilai >= 70) {
console.log("B"); // Output: "B"
} else {
console.log("C");
}

Kondisi kompleks dengan operator logika (&&, ||):

let usia = 20;
let punyaKTP = true;
if (usia >= 17 && punyaKTP) {
console.log("Boleh membuat SIM");
}

Best Practice

Gunakan === (strict equality) untuk membandingkan nilai dan tipe data:

if (1 === "1") { // false, karena number vs string
console.log("Ini tidak akan dieksekusi");
}

Hindari nested if yang terlalu dalam (gunakan switch atau fungsi jika perlu).

Referensi lengkap: MDN tentang if…else.

Contoh Real-World

// Validasi input form
let email = "user@example.com";
let password = "123456";
if (!email || !password) {
console.log("Email dan password wajib diisi!");
} else if (password.length < 6) {
console.log("Password terlalu pendek!");
} else {
console.log("Login berhasil!");
}

if else adalah tulang punggung logika program. Tanpanya, kode hanya bisa berjalan lurus tanpa adaptasi!

Perulangan dengan For dan While Loop

Loop (perulangan) digunakan untuk menjalankan blok kode berulang kali. JavaScript punya dua jenis utama: for dan while.

1. For Loop

Ideal ketika jumlah iterasi diketahui. Strukturnya:

for (inisialisasi; kondisi; perubahan) { ... }

Contoh:

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

2. While Loop

Berjalan selama kondisi true, cocok untuk kasus dengan kondisi dinamis.

let count = 3;
while (count > 0) {
console.log(count); // 3, 2, 1
count--;
}

Perbedaan Utama

for lebih rapat untuk iterasi terukur (e.g., array).
while fleksibel untuk kasus seperti membaca input sampai valid.

Contoh Nyata

Loop melalui array:

const fruits = ["Apel", "Mangga", "Jeruk"];
for (let i = 0; i < fruits.length; i++) {
console.log(fruits[i]);
}

Validasi input user:

let input;
while (input !== "quit") {
input = prompt("Ketik 'quit' untuk keluar");
}

Pitfall

Infinite loop: Pastikan kondisi loop bisa berakhir!

// Hati-hati! Ini infinite loop:
// while (true) { ... }

Referensi: MDN Loops.

Optimasi Gunakan break untuk menghentikan loop prematur:

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

Loop adalah alat vital untuk otomatisasi tugas berulang—tanpanya, coding akan penuh copy-paste!

Fungsi Dasar dalam Pemrograman JavaScript

Fungsi adalah blok kode yang dirancang untuk menjalankan tugas spesifik. Mereka membantu menghindari pengulangan kode dan membuat program lebih modular.

Cara Membuat Fungsi

Function Declaration

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

Function Expression (disimpan dalam variabel)

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

Fitur Penting

Parameter & Argumen: Parameter adalah variabel input fungsi, argumen adalah nilai yang dimasukkan.

function tambah(a, b) { // a, b adalah parameter
return a + b;
}
tambah(2, 3); // 2 dan 3 adalah argumen

Default Parameter: Nilai fallback jika argumen tidak diberikan.

function login(user = "Guest") {
console.log(`Selamat datang, ${user}`);
}
login(); // "Selamat datang, Guest"

Contoh Praktis

Validasi form:

function cekPassword(password) {
return password.length >= 8 ? "Valid" : "Terlalu pendek";
}
console.log(cekPassword("12345678")); // "Valid"

Referensi: MDN tentang Fungsi.

Arrow Function (ES6) Sintaks ringkas untuk fungsi sederhana:

const kuadrat = (x) => x * x;
console.log(kuadrat(4)); // 16

Fungsi adalah “pembungkus ajaib” yang mengubah kode berantakan menjadi terorganisir. Tanpanya, program akan seperti rantai perintah tanpa struktur!

Operator Aritmatika dan Logika

Operator adalah simbol untuk melakukan operasi pada data. JavaScript memiliki dua jenis utama: aritmatika (untuk kalkulasi) dan logika (untuk pengambilan keputusan).

1. Operator Aritmatika

Digunakan untuk perhitungan numerik:

let a = 10, b = 3;

console.log(a + b);  // Penjumlahan (13)
console.log(a - b);  // Pengurangan (7)
console.log(a * b);  // Perkalian (30)
console.log(a / b);  // Pembagian (~3.33)
console.log(a % b);  // Modulus (sisa bagi: 1)
console.log(a ** b); // Eksponensial (1000)

Increment/Decrement:

let x = 5;
x++; // x = x + 1 (6)
x--; // x = x - 1 (5)

2. Operator Logika

Membandingkan nilai boolean (true/false):

&& (AND): True jika semua kondisi benar.
|| (OR): True jika salah satu benar.
! (NOT): Membalik nilai boolean.

Contoh:

const isLogin = true;
const isAdmin = false;

console.log(isLogin && isAdmin);  // false
console.log(isLogin || isAdmin);  // true
console.log(!isLogin);            // false

Operator Perbandingan:

console.log(5 > 3);    // true
console.log(5 == "5"); // true (loose equality)
console.log(5 === "5");// false (strict equality, cek tipe data)

Referensi: MDN tentang Operator.

Contoh Nyata

// Validasi diskon
const totalBelanja = 200000;
const isMember = true;

if (totalBelanja > 150000 && isMember) {
console.log("Anda dapat diskon 10%!");
}

Operator adalah “kata kerja” dalam pemrograman—tanpanya, variabel hanyalah kata benda yang diam!

Penerapan Struktur Switch Case

Switch case adalah alternatif dari if-else untuk menangani banyak kondisi dengan lebih rapi. Cocok untuk skenario “pilih salah satu dari banyak opsi”.

Sintaks Dasar

switch (nilai) {
case kondisi1:
// kode jika nilai == kondisi1
break;
case kondisi2:
// kode jika nilai == kondisi2
break;
default:
// kode jika tidak ada yang cocok
}

Contoh: Sistem Level User

let role = "admin";

switch (role) {
case "admin":
console.log("Akses penuh");
break;
case "editor":
console.log("Akses edit konten");
break;
case "guest":
console.log("Akses terbatas");
break;
default:
console.log("Role tidak valid");
}

// Output: "Akses penuh"

Pentingnya `break`

Tanpa break, eksekusi akan “jatuh” ke case berikutnya (fall-through):

let angka = 2;
switch (angka) {
case 1:
console.log("Satu");
case 2:
console.log("Dua");  // Dieksekusi
case 3:
console.log("Tiga"); // Juga dieksekusi!
break;
}
// Output: "Dua" "Tiga"

Case Grouping

Beberapa case bisa digabung untuk hasil yang sama:

let hari = "Sabtu";
switch (hari) {
case "Senin":
case "Selasa":
case "Rabu":
console.log("Hari kerja");
break;
case "Sabtu":
case "Minggu":
console.log("Akhir pekan"); // Output ini
break;
}

Referensi: MDN switch.

Kapan Pakai Switch?

Saat ada 3+ kondisi fixed (e.g., kode promo, menu aplikasi).
Lebih mudah dibaca daripada if-else bertingkat.

Contoh Nyata

// Konversi nilai huruf ke angka
let grade = "B";
let nilai;
switch (grade) {
case "A": nilai = 4; break;
case "B": nilai = 3; break; // nilai = 3
case "C": nilai = 2; break;
default:  nilai = 0;
}

Switch case adalah “peta jalan” untuk logika multi-arah—lebih terstruktur daripada tumpukan if!

Scope Variabel dan Hoisting

Scope Variabel

Scope menentukan di mana variabel bisa diakses. JavaScript punya 3 jenis scope:

Global Scope Variabel dideklarasikan di luar fungsi, bisa diakses di mana saja.

let globalVar = "Akses di mana pun";
function test() {
console.log(globalVar); // "Akses di mana pun"
}

Function Scope Variabel dalam fungsi hanya bisa diakses di dalamnya (var-only behavior).

function contoh() {
var localVar = "Hanya di sini";
console.log(localVar); // Works
}
// console.log(localVar); // Error!

Block Scope Variabel dalam {} (dengan let/const) hanya hidup di blok tersebut.

if (true) {
let blockVar = "Hanya di blok ini";
const PI = 3.14;
}
// console.log(blockVar); // Error!

Hoisting

Mekanisme di mana deklarasi variabel (var) dan fungsi diangkat ke atas scope sebelum eksekusi.

Fungsi: Hoisted sepenuhnya (bisa dipanggil sebelum deklarasi).

sayHello(); // "Halo!"
function sayHello() {
console.log("Halo!");
}

var: Deklarasi di-hoist, tapi nilai tidak.

console.log(x); // undefined (not Error)
var x = 5;

let/const: Tidak di-hoist (bakal error).

// console.log(y); // Error!
let y = 10;

Referensi: MDN Scope dan MDN Hoisting.

Contoh Bug Umum

for (var i = 0; i < 3; i++) {
setTimeout(() => console.log(i)); // Output: 3, 3, 3 (pakai `let` untuk fix)
}

Scope dan hoisting adalah “aturan visibilitas” kode—pahami agar tak terjebak error tak terduga!

Best Practice Penulisan Kode JavaScript

Menulis kode yang bersih dan mudah dikelola adalah keterampilan krusial. Berikut praktik terbaik yang sering dipakai developer profesional:

1. Gunakan `const` dan `let`

Hindari var untuk menghindari masalah scope dan hoisting.

// Buruk
var x = 10;

// Baik
const PI = 3.14;
let counter = 0;

2. Naming yang Deskriptif

Nama variabel/fungsi harus jelas menjelaskan tujuan.

// Buruk
let d = 5;

// Baik
let daysSinceLastLogin = 5;

3. Fungsi Pendek dan Spesifik

Satu fungsi = satu tugas.

// Buruk
function processUserDataAndSendEmail() { ... }

// Baik
function validateUser(user) { ... }
function sendEmail(to, subject) { ... }

4. Hindari Callback Hell

Gunakan Promise atau async/await untuk kode asinkron.

// Buruk
getData(a => {
getMoreData(b => {
// Nested chaos
});
});

// Baik
async function fetchData() {
const a = await getData();
const b = await getMoreData();
}

5. Format Konsisten

Gunakan linter (ESLint) dan formatter (Prettier). Contoh konfigurasi:

// .eslintrc
{
"rules": {
"semi": ["error", "always"]
}
}

6. Komentar yang Bermakna

Komentari “mengapa”, bukan “apa” (kode harus self-explanatory).

// Buruk
x++; // Increment x

// Baik
x++; // Persiapkan index untuk iterasi berikutnya

Referensi: Airbnb JS Style Guide.

Contoh Refactoring Sebelum:

function calc(a,b) { return a + b; }

Sesudah:

function sumNumbers(num1, num2) {
return num1 + num2;
}

Best practice adalah “etiket coding” yang membuat kode mu mudah dibaca, dikembangkan, dan di-debug—seperti menulis surat untuk diri mu di masa depan!

Contoh Kasus Penggunaan Struktur Kontrol

Struktur kontrol (if, switch, loop) adalah tulang punggung logika aplikasi. Berikut contoh nyata penggunaannya:

1. Validasi Form Login

Kombinasi if else dan operator logika:

function validateLogin(email, password) {
if (!email || !password) {
return "Email dan password wajib diisi!";
} else if (password.length < 8) {
return "Password minimal 8 karakter!";
} else {
return "Login berhasil!";
}
}
console.log(validateLogin("user@example.com", "123")); // Error password

2. Klasifikasi Nilai dengan `switch`

Mengubah skor angka ke huruf:

function getGrade(score) {
switch (true) {
case score >= 90: return "A";
case score >= 80: return "B";
case score >= 70: return "C";
default: return "E";
}
}
console.log(getGrade(85)); // "B"

3. Filter Data dengan Loop

Mencari produk yang harganya di bawah 100k:

const products = [
{ name: "Laptop", price: 500 },
{ name: "Mouse", price: 50 }
];

let cheapProducts = [];
for (let i = 0; i < products.length; i++) {
if (products[i].price < 100) {
cheapProducts.push(products[i].name);
}
}
console.log(cheapProducts); // ["Mouse"]

4. Retry Mechanism dengan `while`

Minta input sampai valid:

let userInput;
while (true) {
userInput = prompt("Masukkan angka 1-10:");
if (userInput >= 1 && userInput <= 10) break;
console.log("Input invalid!");
}

5. Menghitung Faktorial

Menggunakan for loop:

function factorial(n) {
let result = 1;
for (let i = n; i > 0; i--) {
result *= i;
}
return result;
}
console.log(factorial(5)); // 120

Referensi: MDN Control Flow.

Pola Umum

if else untuk logika biner (ya/tidak).
switch untuk pilihan diskrit (menu, role).
Loop untuk operasi berulang pada data.

Contoh dunia nyata:

// Cek ketersediaan stok
const cart = [{ id: 1, stock: 3 }, { id: 2, stock: 0 }];
const canCheckout = cart.every(item => item.stock > 0);
console.log(canCheckout ? "Beli sekarang!" : "Stok habis!");

Struktur kontrol adalah “alur cerita” kode—tanpanya, program hanya akan menjalankan perintah linear tanpa adaptasi!

Pemahaman Struktur Kontrol seperti percabangan (if, switch) dan perulangan (for, while) adalah kunci membangun logika program yang dinamis. Dengan menguasainya, kamu bisa membuat kode yang responsif terhadap berbagai skenario—mulai dari validasi input hingga pengolahan data kompleks. Ingat:

Gunakan if else untuk keputusan sederhana, switch untuk banyak opsi tetap.
Loop efektif untuk tugas berulang, tapi jaga agar tidak infinite.
Gabungkan dengan variabel dan operator untuk solusi fleksibel.

Praktikkan langsung untuk semakin mahir!

Belajar Pemrograman JavaScript dari Nol #3

Pengenalan Variabel dalam JavaScript

Jenis Tipe Data yang Umum Digunakan

Struktur Kontrol Percabangan If Else

Dasar if else

Variasi Kondisi

Best Practice

Perulangan dengan For dan While Loop

1. For Loop

2. While Loop

Perbedaan Utama

Pitfall

Fungsi Dasar dalam Pemrograman JavaScript

Cara Membuat Fungsi

Fitur Penting

Contoh Praktis

Operator Aritmatika dan Logika

1. Operator Aritmatika

2. Operator Logika

Penerapan Struktur Switch Case

Sintaks Dasar

Contoh: Sistem Level User

Pentingnya break

Case Grouping

Scope Variabel dan Hoisting

Scope Variabel

Hoisting

Best Practice Penulisan Kode JavaScript

1. Gunakan const dan let

2. Naming yang Deskriptif

3. Fungsi Pendek dan Spesifik

4. Hindari Callback Hell

5. Format Konsisten

6. Komentar yang Bermakna

Contoh Kasus Penggunaan Struktur Kontrol

1. Validasi Form Login

2. Klasifikasi Nilai dengan switch

3. Filter Data dengan Loop

4. Retry Mechanism dengan while

5. Menghitung Faktorial

Dasar `if else`

Pentingnya `break`

1. Gunakan `const` dan `let`

2. Klasifikasi Nilai dengan `switch`

4. Retry Mechanism dengan `while`