📚 Artikel 2 dari 14 — Seri Belajar JavaScript

Variabel, Tipe Data, dan Operator: Pondasi Logika JavaScript

Sebelum bisa bikin website keren yang interaktif, kamu harus paham dulu bahan dasarnya — sama seperti masak, kamu perlu tahu bahan-bahannya sebelum bisa jadi chef!

#JavaScript #Variabel #TipeData #Operator #PemulaDasarJS

⏱️

Estimasi Baca

10–12 Menit

🎯

Level

Pemula Absolut

📅

Update

2026

Pernah mikir gimana caranya website bisa "ingat" nama yang kamu ketik di form login? Atau gimana tombol "tambah ke keranjang" tahu ada berapa item yang sudah kamu pilih? Jawabannya ada di sini: variabel dan tipe data JavaScript. Ini adalah pondasi paling fundamental dari semua kode yang pernah kamu lihat di web.

Kalau di artikel sebelumnya kamu sudah kenalan dengan JavaScript dan nulis script pertamamu, sekarang saatnya naik level. Di artikel kedua dari Seri Belajar JavaScript from Zero to Zorro ini, kita akan bongkar tuntas: apa itu variabel, kenapa tipe data penting, dan gimana operator bikin logika kamu jalan. Santai — kita pakai analogi kehidupan nyata biar gampang nancep! 💡

📦 Variabel JavaScript: Kotak Penyimpan Data di Memori Browser

Bayangkan kamu punya rak di lemari. Setiap kotak di rak itu punya label — misalnya "Kaos", "Celana", "Sepatu". Saat kamu butuh kaos, kamu tinggal ambil dari kotak berlabel "Kaos". Itulah persis cara kerja variabel di JavaScript: sebuah wadah bernama untuk menyimpan data yang bisa kamu panggil kapan saja.

📌 FORMULA DASAR

keyword namaVariabel = nilaiData;

Di JavaScript modern, ada 3 cara deklarasi variabel: var, let, dan const. Pilih yang tepat sesuai kebutuhan!

JavaScript punya 3 kata kunci untuk membuat variabel. Masing-masing punya karakter berbeda. Mari kita bedah satu per satu:

var — Si Jadul yang Fleksibel

Cara lama sejak JavaScript lahir. Bisa diubah dan dideklarasikan ulang. Tapi hati-hati — var punya kelemahan scope yang bisa bikin bug tersembunyi. Di kode modern, sebisa mungkin hindari.

let — Pilihan Utama untuk Data yang Berubah

Diperkenalkan di ES6 (2015). Nilainya bisa diubah, tapi tidak bisa dideklarasikan ulang di scope yang sama. Ini pilihan standar untuk variabel yang nilainya akan berubah, seperti skor game atau isi keranjang belanja.

const — Untuk Data yang Tidak Boleh Berubah

Singkatan dari "constant". Setelah dideklarasikan, nilainya tidak bisa diganti. Gunakan untuk data tetap seperti nama aplikasi, warna tema, atau URL API. Jika ragu, mulai dengan const!

contoh-variabel.js

JavaScript

var namaTua = "Budi";          // cara lama, hindari

let skorGame = 0;             // nilai bisa berubah
skorGame = 100;               // ✅ boleh diubah

const NAMA_APP = "MyWebApp";    // nilai tetap
// NAMA_APP = "Lain"; ❌ ERROR!

// Praktik terbaik: gunakan camelCase
let namaLengkapUser = "Saifi Ahmada";
const MAX_LOGIN_ATTEMPT = 3;

💡

Tips Penamaan Variabel

Gunakan camelCase untuk nama variabel: namaUser, totalHarga. Untuk konstanta global gunakan UPPER_SNAKE_CASE. Dan ingat: nama variabel TIDAK boleh dimulai dengan angka!

🧬 Tipe Data JavaScript: Mengenal 7 Jenis "Isi Kotak"

Kalau variabel adalah kotaknya, maka tipe data adalah jenis barang di dalamnya. Kamu tidak akan menaruh sepatu di kotak berlabel "Kaos", kan? Sama prinsipnya — JavaScript perlu tahu jenis datanya agar bisa memproses dengan benar.

JavaScript adalah bahasa dynamically typed, artinya kamu tidak perlu deklarasikan tipe datanya secara eksplisit — JavaScript akan tebak sendiri. Tapi tetap harus paham, karena ini kunci debug masalah!

Tipe Data	Contoh Nilai	Analogi Nyata	Keterangan
`String`	"Halo Dunia"	Kata-kata di buku	Teks apapun, diapit tanda kutip
`Number`	42, 3.14, -7	Angka di kalkulator	Semua angka, bulat atau desimal
`Boolean`	true, false	Saklar on/off	Hanya dua kemungkinan nilai
`Undefined`	undefined	Kotak yang belum diisi	Variabel ada tapi belum diberi nilai
`Null`	null	Kotak yang sengaja dikosongkan	Nilai kosong yang disengaja
`Object`	{nama: "Budi"}	KTP yang punya banyak info	Kumpulan key-value pairs
`Array`	["apel", "mangga"]	Daftar belanja berurutan	Kumpulan data dengan indeks

tipe-data.js

JavaScript

// String — teks
let nama = "Saifi Ahmada";
let salam = `Halo, ${nama}!`;  // template literal

// Number — angka
let umur = 25;
let tinggi = 1.75;

// Boolean — true/false
let sudahLogin = true;
let adalahAdmin = false;

// Cek tipe data dengan typeof
console.log(typeof nama);        // "string"
console.log(typeof umur);        // "number"
console.log(typeof sudahLogin);  // "boolean"

🔥

Fakta Menarik: Template Literal

Gunakan backtick `...` dan ${variabel} untuk menyisipkan variabel langsung ke dalam string — jauh lebih elegan daripada pakai tanda + untuk sambung teks! Fitur ini disebut Template Literal dan wajib kamu kuasai.

⚠️

Perhatian: null vs undefined

undefined artinya variabel belum pernah diberi nilai (JavaScript yang "bingung"). Sedangkan null adalah kekosongan yang disengaja oleh programmer. Keduanya berbeda tapi sering disamakan — jangan terjebak!

⚙️ Operator JavaScript: Alat Hitung dan Logika Kode Kamu

Kalau variabel adalah kotak dan tipe data adalah isinya, maka operator adalah alat yang kamu gunakan untuk mengolah isi kotak itu. Mau dijumlah? Ada. Mau dibandingkan? Ada. Mau dikombinasikan secara logika? Juga ada!

🔍 JENIS-JENIS OPERATOR JAVASCRIPT

➕ Aritmetika

        +   Penjumlahan
        -   Pengurangan
        *   Perkalian
        /   Pembagian
        %   Sisa bagi (modulo)
        ** Pangkat
      

🔁 Perbandingan

        ==   Sama nilai
        === Sama nilai & tipe ✅
        !=   Tidak sama
        !== Tidak sama ketat
        >    Lebih besar
        <=  Lebih kecil/sama
      

🧠 Logika

        &&  AND — dua-duanya true
        ||   OR — salah satu true
        !    NOT — balik nilainya
      

operator-praktek.js

JavaScript

// === OPERATOR ARITMETIKA ===
let a = 10, b = 3;
console.log(a + b);   // 13
console.log(a - b);   // 7
console.log(a * b);   // 30
console.log(a / b);   // 3.333...
console.log(a % b);   // 1 (sisa bagi)
console.log(a ** b);  // 1000 (10 pangkat 3)

// === OPERATOR PERBANDINGAN ===
console.log(5 == "5");   // true (nilai sama, tipe diabaikan)
console.log(5 === "5");  // false (nilai sama, tipe BEDA)
console.log(10 > 5);    // true

// === OPERATOR LOGIKA ===
let sudahLogin = true;
let adalahAdmin = false;

console.log(sudahLogin && adalahAdmin); // false (AND)
console.log(sudahLogin || adalahAdmin); // true  (OR)
console.log(!sudahLogin);             // false (NOT)

⚡

Insight Penting: Selalu Gunakan ===

Biasakan pakai === (strict equality) bukan ==. Kenapa? Karena == bisa menghasilkan perbandingan yang tidak terduga akibat type coercion (JavaScript mengubah tipe data otomatis). Programmer profesional hampir tidak pernah pakai ==.

🛒 Studi Kasus: Kalkulator Belanja Sederhana

Sekarang kita gabungkan semua konsep — variabel dan tipe data JavaScript, plus operator — dalam satu mini proyek yang langsung bisa kamu praktikkan. Kita buat kalkulator belanja sederhana:

Deklarasikan variabel produk dengan const untuk data yang tidak berubah

Gunakan let untuk jumlah item yang bisa berubah

Hitung total dengan operator aritmetika dan cek diskon dengan operator logika

kalkulator-belanja.js

🛒 Studi Kasus

// Data produk (tidak berubah = const)
const namaProduk = "Sepatu Olahraga";
const hargaSatuan = 350000;
const DISKON_MEMBER = 0.1;  // 10%

// Data yang bisa berubah = let
let jumlahBeli = 2;
let adalahMember = true;

// Hitung total
let totalBelanja = hargaSatuan * jumlahBeli;

// Cek diskon dengan operator logika
let totalAkhir = adalahMember && totalBelanja > 500000
  ? totalBelanja * (1 - DISKON_MEMBER)
  : totalBelanja;

// Tampilkan hasil dengan template literal
console.log(`Produk   : ${namaProduk}`);
console.log(`Jumlah   : ${jumlahBeli} pcs`);
console.log(`Total    : Rp ${totalBelanja.toLocaleString()}`);
console.log(`Bayar    : Rp ${totalAkhir.toLocaleString()}`);

💡

Tips: Ternary Operator

Pada kode di atas, kondisi ? nilaiJikaTrue : nilaiJikaFalse disebut ternary operator — cara singkat menulis if-else dalam satu baris. Kita akan bahas lebih dalam di artikel selanjutnya!

🎉

Kamu Sudah Kuasai Pondasinya!

Ini adalah pencapaian nyata — bukan semua orang sabar memahami dasar-dasarnya dengan benar.

📦

Variabel

var, let, const — wadah data dengan peran berbeda

🧬

Tipe Data

7 jenis data: String, Number, Boolean, dan lebih banyak lagi

⚙️

Operator

Aritmetika, perbandingan, dan logika — alat olah data

Dengan memahami variabel dan tipe data JavaScript, kamu sudah punya modal kuat untuk melangkah ke konsep berikutnya — kontrol alur logika! Artikel selanjutnya kita akan masuk ke dunia if/else, switch, dan loop yang bikin kode kamu bisa "berpikir"!

📚 Lihat Semua Seri Artikel 💬 Tulis Komentar

#JavaScript #VariabelJavaScript #TipeData #Operator #BelajarJS #ZeroToZorro #WebDev