Programming Fundamental 12

4.2 Variabel, Tipe Data dan Operator

4.2.1 Apa Itu Variabel?

Dalam proses pembuatan program, kita sering perlu menyimpan data agar bisa digunakan kembali, misalnya untuk menampilkan nama pengguna, menghitung hasil perhitungan, atau menyimpan status tertentu di halaman web.

Di sinilah peran variabel menjadi penting. Tanpa variabel, setiap data harus ditulis berulang kali, dan program akan menjadi tidak efisien serta sulit dikelola.

Variabel adalah tempat penyimpanan data dalam JavaScript. Bayangkan variabel seperti sebuah kotak yang bisa menyimpan berbagai jenis barang (data). Setiap kotak memiliki nama (nama variabel) dan isi (nilai atau data yang disimpan).

Dengan variabel, kita dapat menyimpan, mengubah, dan menggunakan kembali data dengan mudah di berbagai bagian program.

4.2.2 Deklarasi Variabel

Dalam JavaScript, kita perlu mendeklarasikan variabel sebelum digunakan agar program mengetahui nama dan ruang penyimpanan data tersebut.

JavaScript menyediakan tiga cara utama untuk mendeklarasikan variabel, yaitu menggunakan var, let, dan const.

Masing-masing memiliki karakteristik dan aturan penggunaan yang berbeda.

1. var (Legacy – Tidak Direkomendasikan)

// var (function-scoped, bisa di-redeclare)

var name = "John";

var name = "Jane"; // OK - bisa di-redeclare

Karakteristik var:

• Bersifat function-scoped, bukan block-scoped (berlaku dalam satu fungsi, bukan hanya di dalam blok {}).
• Dapat dideklarasikan ulang (re-declare) tanpa error.
• Dapat di-hoist, artinya bisa digunakan sebelum dideklarasikan.
• Tidak direkomendasikan untuk digunakan dalam penulisan kode modern karena dapat menimbulkan bug yang sulit dilacak.

2. let (Modern – Direkomendasikan)

// let (block-scoped, tidak bisa di-redeclare)

let age = 25;

// let age = 30; // Error: Identifier 'age' has already been declared

Karakteristik let:

• Bersifat block-scoped, artinya hanya berlaku di dalam blok {} tempat variabel tersebut dideklarasikan.
• Tidak dapat dideklarasikan ulang di dalam scope yang sama.
• Tidak dapat digunakan sebelum dideklarasikan (tidak di-hoist).
• Direkomendasikan untuk digunakan ketika nilai variabel dapat berubah selama program berjalan.

3. const (Modern – Direkomendasikan untuk Nilai Tetap)

// const (block-scoped, tidak bisa di-reassign)

const PI = 3.14159;

// PI = 3.14; // Error: Assignment to constant variable

Karakteristik const:

• Bersifat block-scoped, sama seperti let.
• Tidak dapat diubah nilainya (reassign) setelah diberi nilai pertama kali.
• Harus diinisialisasi saat dideklarasikan.
• Direkomendasikan untuk digunakan pada nilai-nilai yang bersifat konstan, seperti angka tetap, konfigurasi, atau referensi yang tidak berubah.

Dengan memahami perbedaan antara var, let, dan const, Anda dapat menulis kode JavaScript yang lebih terstruktur, aman, dan mudah dipelihara.

Dalam praktik modern, let dan const lebih disarankan, sedangkan var sebaiknya dihindari kecuali pada kasus tertentu yang memerlukan kompatibilitas dengan kode lama.

4.2.3 Tipe Data dalam JavaScript

Sebelum Anda mulai menulis logika program, penting untuk memahami tipe data, karena hampir setiap operasi dalam JavaScript melibatkan data.

Bayangkan Anda sedang membuat aplikasi web: data yang Anda tangani bisa berupa teks (seperti nama pengguna), angka (seperti harga atau umur), atau bahkan daftar data (seperti daftar produk).

Untuk mengelola semua itu dengan benar, JavaScript membedakan data ke dalam beberapa kategori tipe data agar program dapat mengenali dan memprosesnya sesuai kebutuhan.

Secara umum, JavaScript memiliki dua kategori utama tipe data, yaitu Primitive Types dan Reference Types.

1. Primitive Types (Tipe Data Primitif)

Tipe data primitif adalah tipe data yang tidak dapat diubah (immutable) dan disimpan langsung di dalam memori.

// Primitive Types

let stringVar = "Hello World"; // string - teks

let numberVar = 42; // number - angka

let booleanVar = true; // boolean - true/false

let nullVar = null; // null - kosong dengan sengaja

let undefinedVar = undefined; // undefined - belum didefinisikan

let symbolVar = Symbol("id"); // symbol - identifier unik (ES6+)

Penjelasan singkat:

• string: Menyimpan teks yang diapit tanda kutip (", ', atau `).
• number: Menyimpan angka, baik bilangan bulat maupun desimal.
• boolean: Hanya memiliki dua nilai, yaitu true atau false.
• null: Menunjukkan nilai kosong yang diberikan secara sengaja.
• undefined: Menunjukkan variabel yang belum memiliki nilai.
• symbol: Identifier unik yang diperkenalkan sejak ES6 (jarang digunakan dalam kebutuhan dasar).

2. Reference Types (Tipe Data Referensi)

Berbeda dengan tipe data primitif, tipe data referensi bersifat mutable (bisa diubah) dan disimpan sebagai referensi di dalam memori. Artinya, ketika Anda mengubah data referensi, JavaScript akan memodifikasi nilai yang dirujuk oleh variabel tersebut, bukan membuat salinan baru.

// Reference Types

let arrayVar = [1, 2, 3]; // array - kumpulan data

let objectVar = { name: "John", age: 25 }; // object - kumpulan key-value

let functionVar = function () {

  // function - blok kode yang bisa dipanggil

  return "Hello";

};

3. Type Checking (Pengecekan Tipe Data)

Untuk memeriksa tipe data suatu variabel, JavaScript menyediakan operator typeof. Operator ini sangat berguna ketika Anda ingin memastikan bahwa data yang sedang diproses memiliki tipe yang sesuai.

// Type checking dengan typeof

console.log(typeof stringVar); // "string"

console.log(typeof numberVar); // "number"

console.log(typeof booleanVar); // "boolean"

console.log(typeof nullVar); // "object" (bug in JavaScript)

console.log(typeof arrayVar); // "object"

console.log(typeof functionVar); // "function"

Catatan Penting:

• typeof null mengembalikan "object" , ini adalah bug yang sudah dikenal dalam JavaScript.
• Array dan Object sama-sama mengembalikan "object" karena keduanya berbasis struktur data referensi.
• Function akan mengembalikan "function", karena dianggap tipe khusus dari object.

Dengan memahami tipe data dan cara mengeceknya, Anda akan lebih siap untuk menulis logika program yang tepat, efisien, dan bebas dari error yang tidak terduga.

Pengetahuan ini juga menjadi fondasi penting sebelum Anda melangkah ke topik berikutnya, seperti operator, conditional, dan fungsi.

4.2.4 Operator dalam JavaScript

Ketika Anda mulai menulis program, sering kali Anda perlu melakukan berbagai perhitungan, perbandingan, atau pengambilan keputusan logika berdasarkan data yang dimiliki. Misalnya, menghitung total harga belanja, membandingkan usia pengguna, atau memeriksa apakah sebuah tombol sudah diklik. Untuk melakukan semua hal tersebut, JavaScript menyediakan operator, yaitu simbol khusus yang digunakan untuk menjalankan operasi tertentu pada data atau variabel.

Pemahaman terhadap operator sangat penting, karena hampir semua bagian dari logika pemrograman; mulai dari proses aritmatika hingga pengambilan keputusan, bergantung pada penggunaan operator dengan cara yang benar.

JavaScript memiliki beberapa jenis operator utama yang digunakan sesuai dengan fungsinya, antara lain:

1. Arithmetic Operators (Operator Aritmatika)

Operator aritmatika digunakan untuk melakukan perhitungan matematis pada data numerik.

// Arithmetic Operators

let a = 10,

  b = 3;

console.log(a + b); // 13 (penjumlahan)

console.log(a - b); // 7 (pengurangan)

console.log(a * b); // 30 (perAnda)

console.log(a / b); // 3.333... (pembagian)

console.log(a % b); // 1 (modulus - sisa bagi)

console.log(a ** b); // 1000 (pangkat)

Penjelasan:

2. Comparison Operators (Operator Perbandingan)

Operator perbandingan digunakan untuk membandingkan dua nilai dan menghasilkan hasil berupa true atau false. Operator ini banyak digunakan dalam kondisi logika seperti if statements.

// Comparison Operators

console.log(a > b); // true (lebih besar)

console.log(a < b); // false (lebih kecil)

console.log(a >= b); // true (lebih besar atau sama)

console.log(a <= b); // false (lebih kecil atau sama)

console.log(a === b); // false (strict equality - sama persis)

console.log(a !== b); // true (strict inequality - tidak sama)

console.log(a == b); // false (loose equality - hindari penggunaan)

Penjelasan:

3. Logical Operators (Operator Logika)

Operator logika digunakan untuk menggabungkan atau membalikkan kondisi logika. Biasanya digunakan dalam pengambilan keputusan seperti if, while, atau for.

// Logical Operators

let x = true,

  y = false;

console.log(x && y); // false (AND - keduanya harus true)

console.log(x || y); // true (OR - salah satu harus true)

console.log(!x); // false (NOT - kebalikan)

Penjelasan:

4. Assignment Operators (Operator Penugasan)

Operator penugasan digunakan untuk memberikan (assign) nilai ke dalam variabel. Selain itu, operator ini juga dapat dikombinasikan dengan operator aritmatika untuk melakukan perhitungan dan penugasan secara bersamaan. Lihatlah contoh berikut ini:

let num = 10;

num += 5;  // num = num + 5 → hasil: 15

num -= 3;  // num = num - 3 → hasil: 12

num *= 2;  // num = num * 2 → hasil: 24

num /= 4;  // num = num / 4 → hasil: 6

Penjelasan Singkat Tiap Operator:

1. = (Assignment)

Menetapkan nilai ke dalam variabel.

let x = 10;

2. += (Addition Assignment)

Menambahkan nilai tertentu ke variabel.

let x = 10;

x += 5;  // hasil: 15

3. -= (Subtraction Assignment)

Mengurangi nilai tertentu dari variabel

let x = 10;

x -= 5;  // hasil: 5

4. *= (Multiplication Assignment)

Mengalikan nilai variabel dengan operand tertentu.

let x = 10;

x *= 5;  // hasil: 50

5. /= (Division Assignment)

Membagi nilai variabel dengan operand tertentu.

let x = 10;

x /= 5;  // hasil: 2

6. %= (Remainder Assignment)

Menyimpan sisa hasil pembagian ke dalam variabel.

let x = 10;

x %= 5;  // hasil: 0

7. **= (Exponentiation Assignment)

Menghitung pangkat dari nilai variabel.

let x = 10;

x **= 2; // hasil: 100

Assignment Operator pada String: Operator penugasan juga dapat digunakan untuk menggabungkan teks (string).

let text = "Hello";

text += " World";  // hasil: "Hello World"

Operator += berguna untuk menambahkan teks baru tanpa menimpa nilai sebelumnya.

Dengan memahami berbagai jenis operator ini, Anda akan mampu membangun logika program yang dinamis dan responsif, baik untuk melakukan perhitungan sederhana maupun membuat keputusan kompleks dalam aplikasi web.

4.2.5 JavaScript Control Flow

Control Flow adalah urutan atau alur eksekusi statements di dalam sebuah program JavaScript. Secara default, JavaScript menjalankan kode dari atas ke bawah dan dari kiri ke kanan, satu baris demi satu baris.

Namun, dalam banyak kasus kita ingin program tidak selalu berjalan secara linear. Misalnya: mengeksekusi kode tertentu hanya saat kondisi tertentu terpenuhi, atau mengulang perintah beberapa kali.

Untuk itu, JavaScript menyediakan control flow statements yang dapat mengubah urutan eksekusi kode sesuai kebutuhan.

1. Default Flow

Secara bawaan, JavaScript mengeksekusi kode secara berurutan, dari baris pertama hingga baris terakhir. Contoh:

let x = 5;

let y = 6;

let z = x + y;

Alur eksekusinya adalah: let x → let y → let z. Artinya, setiap baris dijalankan setelah baris sebelumnya selesai.

2. Conditional Control Flow

Pada bagian ini, alur program dapat bercabang tergantung kondisi yang diberikan. Kita dapat menggunakan:

• if
• if...else
• switch
• ternary operator (? :)

Contoh:

let text = "Unknown";

if (age >= 18) {

  text = "Adult";

} else {

  text = "Minor";

}

Pada contoh di atas, alur program akan memilih salah satu cabang tergantung pada nilai age.

3. Loops (Repetition Control Flow)

Loop digunakan ketika kita ingin menjalankan blok kode berulang kali selama suatu kondisi terpenuhi. Jenis loop di JavaScript antara lain:

• for
• while
• do...while

Contoh:

for (let i = 0; i < 5; i++) {

  text += "The number is " + i + "<br>";

} 

Loop di atas akan terus berjalan selama i < 5 bernilai true. Begitu kondisi tidak lagi terpenuhi, alur keluar dari perulangan.

4. Jump Statements

Terkadang kita perlu mengubah alur eksekusi secara tiba-tiba, misalnya keluar dari loop lebih cepat atau melewati iterasi tertentu. Untuk itu, kita menggunakan jump statements seperti:

• break → keluar dari loop atau switch
• continue → melewati satu iterasi loop dan melanjutkan ke iterasi berikutnya
• return → keluar dari sebuah function
• throw → berpindah ke proses error handling

Contoh:

for (let i = 0; i < 10; i++) {

  if (i === 3) { break; }

  text += "The number is " + i + "<br>";

}

Perulangan akan berhenti ketika i bernilai 3.

5. Function Flow

Function adalah blok kode yang dapat dipanggil kapan saja dan digunakan kembali (reusable). Fungsi membantu membuat kode lebih terstruktur dan efisien. Contoh:

function myFunction(p1, p2) {

  return p1 * p2;

}

Ketika fungsi dipanggil, program akan melompat ke dalam blok fungsi, menjalankan isinya, lalu kembali ke tempat fungsi tersebut dipanggil.

6. JavaScript is Single-Threaded

JavaScript berjalan pada satu thread, artinya hanya bisa menjalankan satu tugas dalam satu waktu. Setiap tugas harus menunggu tugas sebelumnya selesai. Akibatnya, jika ada proses yang lambat (misalnya permintaan data ke server), program bisa terasa macet atau freeze. Untuk mengatasinya, JavaScript menyediakan mekanisme asynchronous flow.

7. Asynchronous Flow

Asynchronous flow memungkinkan JavaScript menjalankan tugas-tugas berat (seperti membaca file, menunggu input, atau memanggil API) tanpa menghentikan eksekusi kode lainnya. Dengan kata lain, JavaScript dapat menjalankan tugas di background sambil tetap memproses kode lain.

Hasil dari tugas tersebut akan ditangani nanti ketika sudah siap.

8. Asynchronous Patterns

Ada beberapa pola yang digunakan dalam asynchronous flow:

1. Events

Events adalah aksi atau kejadian di browser, seperti klik tombol, menekan tombol keyboard, atau halaman selesai dimuat. Contoh:

<button onclick="displayDate()">The time is?</button>

2. Callbacks

Callback adalah function yang dikirim sebagai argumen ke function lain dan akan dijalankan setelah proses tertentu selesai. Contoh:

function myDisplayer(some) {

  document.getElementById("demo").innerHTML = some;

}

function myCalculator(num1, num2, myCallback) {

  let sum = num1 + num2;

  myCallback(sum);

}

myCalculator(5, 5, myDisplayer);

Di sini, myDisplayer adalah callback function yang dijalankan setelah perhitungan di myCalculator selesai.

3. Promises

Promise merepresentasikan nilai yang mungkin tersedia sekarang, nanti, atau tidak sama sekali. Promise membuat penulisan kode asynchronous menjadi lebih rapi dan mudah dibaca. Contoh:

fetch("https://api.example.com")

  .then(response => response.json())

  .then(data => console.log(data))

  .catch(error => console.error(error));

4. Async/Await

Async/Await adalah cara modern untuk menulis kode asynchronous agar terlihat seperti kode synchronous, sehingga lebih mudah dipahami. Contoh:

async function getData() {

  try {

    const res = await fetch("https://api.example.com");

    const data = await res.json();

    console.log(data);

  } catch (err) {

    console.error(err);

  }

}

Asynchronous Summary

4.2.6 JavaScript For...In dan For...Of

1. For…In Loop

For...in digunakan untuk melakukan iterasi terhadap enumerable properties (atau properti yang dapat diakses) dari sebuah object. Loop ini biasanya digunakan untuk membaca nama properti (key) yang dimiliki oleh suatu object. Berikut sintaksnya:

for (key in object) {

  // kode yang akan dijalankan

}

• key → variabel yang menyimpan nama setiap properti (property name) selama proses iterasi berlangsung.
• object → objek yang propertinya akan di-loop.

Contoh:

const person = { fname: "John", lname: "Doe", age: 25 };

let text = "";

for (let x in person) {

  text += person[x];

}

Penjelasan:

• for...in akan melakukan looping terhadap setiap properti yang ada di object person.
• Pada setiap perulangan, x berisi nama properti (key).
• Nilai dari setiap properti dapat diakses menggunakan person[x].

2. For...In Loop pada Array

Walaupun for...in dapat digunakan pada array, umumnya tidak direkomendasikan jika urutan indeks penting, karena urutan hasilnya bisa berbeda tergantung mesin JavaScript yang digunakan (engine-dependent). Contoh:

const numbers = [45, 4, 9, 16, 25];

let txt = "";

for (let x in numbers) {

  txt += numbers[x];

}

Catatan:

Jika Anda ingin menjaga urutan data, sebaiknya gunakan:

• for loop biasa,
• for...of, atau
• Array.forEach().

3. Control Flow dalam For...In

Sama seperti loop lainnya di JavaScript, for...in juga bisa menggunakan control flow statements seperti:

• break → menghentikan loop sepenuhnya dan melanjutkan ke perintah setelah loop.
• continue → melewati satu iteration dan lanjut ke iteration berikutnya.

4. Enumerable Properties

for...in hanya akan melakukan iterasi terhadap properti yang memiliki atribut enumerable = true. Beberapa properti bawaan (built-in) atau yang didefinisikan dengan Object.defineProperty() mungkin tidak akan ikut di-loop jika enumerable-nya diset ke false.

5. Prototype Chain

Secara default, for...in juga akan mengiterasi properti yang diwariskan dari prototype chain objek. Untuk memastikan hanya properti milik objek itu sendiri yang diakses, gunakan:

if (object.hasOwnProperty(key)) { ... }

6. Array.forEach()

forEach() adalah metode bawaan array yang memanggil sebuah function (dikenal sebagai callback function) sekali untuk setiap elemen dalam array. Contoh:

Callback function dapat menerima tiga parameter:

• value – nilai dari elemen saat ini,
• index – posisi elemen dalam array,
• array – array itu sendiri.

Biasanya yang paling sering digunakan hanya parameter value.

7. For...Of Loop

for...of digunakan untuk melakukan looping terhadap nilai dari suatu iterable object, seperti:

• Array
• String
• Map
• NodeList
• dan struktur data lainnya yang dapat di-iterate.

Sintaks

for (variable of iterable) {

  // kode yang akan dijalankan

}

• variable → menyimpan nilai setiap elemen dalam setiap iteration.
  (dapat dideklarasikan menggunakan const, let, atau var)
• iterable → objek yang memiliki elemen yang dapat di-loop.

Contoh: Looping pada Array

const cars = ["BMW", "Volvo", "Mini"];

let text = "";

for (let x of cars) {

  text += x;

}

Setiap perulangan akan mengambil nilai dari elemen cars, bukan indeksnya.

Contoh: Looping pada String

let language = "JavaScript";

let text = "";

for (let x of language) {

  text += x;

}

Pada contoh di atas, setiap karakter dalam string "JavaScript" akan diakses satu per satu.

Studi Kasus / Contoh Nyata

Latar Belakang:

Bayangkan Anda adalah seorang web developer yang sedang membuat halaman profil pengguna untuk sebuah situs komunitas.

Setiap pengguna memiliki nama, umur, dan status keanggotaan. Anda perlu menampilkan informasi ini di browser serta menghitung sisa tahun menuju batas usia tertentu (misalnya 60 tahun).

Untuk melakukan itu, Anda perlu menggunakan variabel, tipe data, dan operator dalam JavaScript.

Situasi Proyek:

Anda diminta untuk membuat skrip JavaScript sederhana yang:

• Menyimpan nama, umur, dan status keanggotaan pengguna menggunakan variabel.
• Menghitung berapa tahun lagi pengguna akan mencapai usia 60 tahun.
• Menampilkan hasilnya di console browser.

Contoh data pengguna:

let name = "Rani";

let age = 28;

let isMember = true;

Pertanyaan Studi Kasus:

1. Berdasarkan data di atas, tipe data apa yang digunakan untuk masing-masing variabel (name, age, dan isMember)?
2. Jika Anda ingin menampilkan pesan seperti:
   Halo Rani, Anda masih punya 32 tahun lagi sebelum usia 60.
3. Bagaimana cara menuliskan ekspresi JavaScript-nya menggunakan operator aritmatika dan string?
   
4. Jika variabel isMember bernilai false, tambahkan kondisi agar menampilkan pesan berbeda:
   Halo Rani, daftarkan dirimu untuk menjadi member agar bisa menikmati semua fitur!

Solusi / Jawaban Studi Kasus

1. Tipe data yang digunakan untuk masing-masing variabel:

• name → string
• age → number
• isMember → boolean

2. 

let name = "Rani";

let age = 28;

let remainingYears = 60 - age;

console.log("Halo " + name + ", Anda masih punya " + remainingYears + " tahun lagi sebelum usia 60.");

3. 

if (isMember) {

  console.log("Halo " + name + ", Anda masih punya " + (60 - age) + " tahun lagi sebelum usia 60.");

} else {

  console.log("Halo " + name + ", daftarkan dirimu untuk menjadi member agar bisa menikmati semua fitur!");

}

Kesimpulan Studi Kasus

Melalui kasus sederhana ini, Anda belajar bahwa:

• Variabel digunakan untuk menyimpan data yang bisa digunakan kembali di program.
• Tipe data membantu JavaScript mengenali jenis informasi yang disimpan.
• Operator memungkinkan Anda melakukan perhitungan atau menggabungkan nilai dengan mudah.
• Kombinasi dari ketiganya merupakan dasar dari logika pemrograman JavaScript yang berjalan di browser.

Pertanyaan Refleksi

• Jika Anda tidak menggunakan variabel dalam sebuah program, menurut Anda, apa dampak yang akan terjadi terhadap efisiensi dan keterbacaan kode?
• Dalam situasi apa Anda akan memilih menggunakan const dibandingkan let, dan mengapa pilihan tersebut penting dalam menjaga stabilitas program?
• Dalam konteks aplikasi e-commerce, tipe data apa yang paling sesuai untuk menyimpan data seperti nama pengguna, daftar produk, dan status login? Jelaskan alasannya.
• Menurut Anda, apa risiko jika developer tidak memahami cara kerja reference types seperti object atau array saat memodifikasi data?
• Dalam pembuatan fitur validasi form (misalnya login atau pendaftaran pengguna), operator logika mana yang paling sering Anda gunakan, dan mengapa?
• Bayangkan Anda sedang membangun fitur shopping cart di situs e-commerce. Bagaimana Anda akan mengombinasikan konsep variabel, tipe data, dan operator untuk menghitung total harga belanja pengguna?
• Jika sebuah data diubah dari primitive type menjadi reference type tanpa disadari, apa konsekuensi logis yang mungkin muncul dalam perilaku program?