Ngulik JavaScript dari Nol: Variabel, Tipe Data, dan Operator – Fondasi Bikin Web Kekinian!

Belajar JavaScript: Variabel, Tipe Data, dan Operator Dasar

PPLG

PPLG

Penulis

04 Jun 2026
24 x dilihat

Halo, gaes! Skuy, kita bedah bareng dasar-dasar JavaScript yang super penting ini. Ibaratnya, kalau kamu mau bangun rumah mewah, tiga elemen ini (variabel, tipe data, dan operator) adalah pondasinya. Tanpa ini, rumahmu gampang ambruk, alias kode kamu bakal error sana-sini! Yuk, kita mulai petualangan coding kita dengan vibes santai tapi tetap on-point!


🔥 Variabel: Si "Wadah Ajaib" Penyimpan Data

Ngab, pernah gak sih kamu lagi nulis sesuatu terus butuh nyimpen nilai sementara? Nah, di dunia programming, variabel itu literally wadah atau kotak penyimpanan data. Kamu bisa masukkin apa aja ke dalamnya, terus panggil lagi kapanpun kamu butuh. Gampang, kan?

Di JavaScript, ada tiga cara buat deklarasiin variabel: var, let, dan const. Tapi, sini gue spill yang paling sering dan direkomendasiin buat coding kekinian: let dan const.

  • let: Anggap aja ini wadah yang isinya bisa kamu ganti-ganti. Fleksibel banget buat data yang nilainya dinamis.
    let namaDepan = "Budi"; // Deklarasi dan inisialisasi
    console.log(namaDepan); // Output: Budi
    
    namaDepan = "Andi"; // Nilai bisa diubah
    console.log(namaDepan); // Output: Andi
    
  • const: Nah, kalau yang ini wadah yang isinya udah fix dari awal dan gak bisa diubah lagi. Cocok buat nilai-nilai yang emang sifatnya konstan dan gak akan berubah. Ini bagus buat mencegah bug yang gak diinginkan, lho!
    const PI = 3.14; // Nilai PI konstan
    console.log(PI); // Output: 3.14
    
    // PI = 3.14159; // ERROR! Kamu gabisa ubah nilai const
    // console.log(PI);
    
  • var: Ini cara lama, gaes. Sekarang udah jarang dipake karena punya scope yang agak "nakal" dan sering bikin pusing kalau kodenya udah gede. Intinya, buat best practice, pake let atau const aja ya!

Tips Penting!

  • Selalu gunakan const kalau nilainya memang tidak akan berubah.
  • Gunakan let kalau nilainya kemungkinan akan berubah.
  • Hindari var sebisa mungkin.

🧩 Tipe Data: Macam-macam Isian di dalam Wadahmu

Oke, sekarang kamu udah punya wadahnya (variabel). Terus, apa aja sih yang bisa kamu masukkin ke dalam wadah itu? Nah, inilah yang disebut tipe data. JavaScript itu punya beberapa tipe data dasar yang wajib kamu tahu, biar kamu bisa "ngobrol" bener sama kode kamu!

Tipe Data Primitif (Basic Vibes)

  1. String: Buat teks, kalimat, atau apapun yang sifatnya tulisan. Selalu diapit tanda kutip (' ' atau " ").
    let salam = "Hello, dunia coding!";
    let emoji = '🚀';
    console.log(salam); // Output: Hello, dunia coding!
    console.log(typeof salam); // Output: string
    
  2. Number: Buat angka, baik bilangan bulat (integer) maupun desimal (float).
    let usia = 25;
    let tinggiBadan = 175.5;
    console.log(usia); // Output: 25
    console.log(typeof usia); // Output: number
    
  3. Boolean: Ini cuma punya dua nilai: true (benar) atau false (salah). Penting banget buat logika atau kondisi.
    let isStudent = true;
    let hasLicense = false;
    console.log(isStudent); // Output: true
    console.log(typeof isStudent); // Output: boolean
    
  4. Undefined: Ini otomatis muncul kalau kamu deklarasiin variabel tapi belum kasih nilai. Ibaratnya, wadahnya udah ada, tapi masih kosong melompong.
    let namaBelakang;
    console.log(namaBelakang); // Output: undefined
    console.log(typeof namaBelakang); // Output: undefined
    
  5. Null: Kalau ini, kamu secara sengaja ngasih tahu bahwa variabel itu "kosong" atau "tidak ada nilai". Beda sama undefined ya!
    let mobil = null;
    console.log(mobil); // Output: null
    console.log(typeof mobil); // Output: object (ini quirk di JS, jangan kaget!)
    
  6. Symbol: Ini tipe data unik yang diperkenalkan di ES6 (versi JavaScript baru). Biasanya buat bikin identifier yang unik banget biar gak tabrakan sama yang lain. Agak advance, tapi penting buat tahu eksistensinya.
    const idUnik1 = Symbol('id');
    const idUnik2 = Symbol('id');
    console.log(idUnik1 === idUnik2); // Output: false (meskipun stringnya sama, symbolnya beda!)
    console.log(typeof idUnik1); // Output: symbol
    
  7. BigInt: Buat angka yang super duper gede, lebih gede dari batas maksimal tipe Number biasa. Kalau kamu perlu kalkulasi angka triliunan atau kuadriliunan, ini jagoannya.
    const angkaBesar = 123456789012345678901234567890123456789n; // 'n' di akhir menandakan BigInt
    console.log(angkaBesar);
    console.log(typeof angkaBesar); // Output: bigint
    

Tipe Data Non-Primitif (Object Vibes)

Selain yang primitif, ada juga tipe data yang lebih kompleks, yaitu Object. Ini bisa nyimpen koleksi data dan fungsi. Contohnya:

  • Array: List data yang berurutan.
  • Object Literal: Koleksi data dengan pasangan key: value.
  • Function: Kode yang bisa dieksekusi.

Tapi untuk sekarang, fokus ke yang primitif dulu ya, gaes. Nanti kita spill lagi soal Object di topik berikutnya!


🧮 Operator: Si "Tukang Oprek" Data

Udah punya variabel, udah tahu tipe datanya. Sekarang, gimana caranya kita bisa ngapa-ngapainin data itu? Nah, ini peran operator! Operator adalah simbol khusus yang digunakan untuk melakukan operasi pada nilai (disebut operand). Ibaratnya, operator ini perkakas tukang buat ngerjain sesuatu ke materialnya.

Ada banyak jenis operator, mari kita bedah satu per satu!

  1. Operator Penugasan (Assignment Operators) Buat ngasih nilai ke variabel. Yang paling umum ya =, tapi ada juga versi singkatnya:

    let x = 10;     // x sekarang 10
    x += 5;         // Sama kayak x = x + 5; (x sekarang 15)
    x -= 3;         // Sama kayak x = x - 3; (x sekarang 12)
    x *= 2;         // Sama kayak x = x * 2; (x sekarang 24)
    x /= 4;         // Sama kayak x = x / 4; (x sekarang 6)
    console.log(x); // Output: 6
    
  2. Operator Aritmatika (Arithmetic Operators) Buat ngelakuin perhitungan matematika dasar:

    let a = 10;
    let 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.333...
    console.log(a % b);  // Modulus (sisa bagi): 1
    console.log(a ** b); // Eksponen (pangkat): 1000 (10 pangkat 3)
    
    let counter = 0;
    counter++; // Increment (tambah 1): counter jadi 1
    console.log(counter);
    counter--; // Decrement (kurang 1): counter jadi 0
    console.log(counter);
    
  3. Operator Perbandingan (Comparison Operators) Buat ngebandingin dua nilai. Hasilnya selalu true atau false (Boolean). Ini penting banget buat nentuin kondisi!

    let angka1 = 5;
    let angka2 = "5"; // Perhatikan, ini string bukan number!
    
    console.log(angka1 == angka2);  // True (sama nilai, tipe data beda diabaikan) - HATI-HATI!
    console.log(angka1 === angka2); // False (sama nilai DAN sama tipe data) - INI BEST PRACTICE!
    console.log(angka1 != angka2);  // False (tidak sama nilai, tipe data beda diabaikan)
    console.log(angka1 !== angka2); // True (tidak sama nilai ATAU tidak sama tipe data) - INI BEST PRACTICE!
    
    console.log(angka1 > angka2);   // False (5 tidak lebih besar dari "5")
    console.log(angka1 < angka2);   // False (5 tidak lebih kecil dari "5")
    console.log(angka1 >= 5);       // True
    console.log(angka1 <= 4);       // False
    

    PENTING BANGET! Selalu gunakan === (strict equality) dan !== (strict inequality) buat ngebandingin nilai. Ini ngecek nilai dan tipe datanya. Operator == dan != bisa bikin kaget karena mereka melakukan type coercion (JavaScriptnya sok pinter nyamain tipe data), yang seringkali bukan yang kita mau.

  4. Operator Logika (Logical Operators) Buat ngegabungin atau ngebalik nilai Boolean.

    let isPunyaMobil = true;
    let isPunyaSIM = false;
    
    // AND (&&): True kalau KEDUANYA true
    console.log(isPunyaMobil && isPunyaSIM); // Output: false
    
    // OR (||): True kalau SALAH SATU true
    console.log(isPunyaMobil || isPunyaSIM); // Output: true
    
    // NOT (!): Membalik nilai Boolean
    console.log(!isPunyaMobil);              // Output: false
    
  5. Operator Ternary (Conditional Operator) Ini operator singkat buat kondisi if-else yang simpel. Mantul!

    let umur = 18;
    let statusDewasa = (umur >= 17) ? "Dewasa" : "Anak-anak";
    console.log(statusDewasa); // Output: Dewasa
    
    // Ini sama kayak:
    // if (umur >= 17) {
    //   statusDewasa = "Dewasa";
    // } else {
    //   statusDewasa = "Anak-anak";
    // }
    

🚀 Kesimpulan: Fondasi Kuat, Coding Makin Asik!

Wah, parah sih! Kamu udah berhasil nguasain fondasi paling krusial di JavaScript: variabel, tipe data, dan operator. Ini adalah basic building blocks yang bakal kamu pake literally di setiap baris kode yang kamu tulis nanti.

Ingat ya, ngertiin konsep ini itu bukan cuma tentang teori, tapi juga gimana kamu bisa terapin di dunia nyata. Terus latih pake let dan const, pahami bedanya tipe data, dan yang paling penting, selalu pake === buat perbandingan!

Jangan pernah takut explore dan nyoba-nyoba ya, gaes. Semakin sering kamu ngoprek, semakin kuat pondasi JS-mu. Gas terus buat jadi developer yang handal! Skuy, lanjut ke materi berikutnya!


0.0

Berikan Rating

Komentar (0)

Silakan login untuk memberikan komentar.

Login Sekarang

Belum ada komentar. Jadilah yang pertama!

Menyukai Artikel (0)

Belum ada siswa yang menyukai artikel ini.

Pembaca (0)

Belum ada user yang membaca artikel ini.