Skip to main content

Variables & Values

Sebelum membuat aplikasi menggunakan React, kita perlu memahami bagaimana JavaScript menyimpan dan mengelola data. Hampir semua aplikasi bekerja dengan memproses data, mulai dari nama pengguna, pesan, lokasi, hingga hasil perhitungan.

Di JavaScript, data tersebut disebut value (nilai) dan disimpan di dalam variabel.

Aplikasi Bekerja dengan Data​

Setiap aplikasi yang kita gunakan setiap hari, seperti media sosial, aplikasi perbankan, maupun e-commerce, selalu mengolah berbagai jenis data.

Contohnya:

  • Nama pengguna
  • Email
  • Pesan
  • Harga produk
  • Lokasi
  • Status login

Semua data tersebut direpresentasikan sebagai value di dalam JavaScript.

Tipe Data Dasar JavaScript​

JavaScript memiliki beberapa tipe data dasar yang paling sering digunakan.

Tipe DataContohKeterangan
String"Hello World"Menyimpan teks
Number10, 3.14Menyimpan angka
Booleantrue, falseMenyimpan nilai logika
NullnullMenandakan tidak ada nilai
UndefinedundefinedVariabel belum memiliki nilai
Object{ name: "John" }Menyimpan kumpulan data

Contoh:

const name = "John";
const age = 25;
const isLogin = true;
const score = null;
const address = undefined;

Apa Itu Variabel?​

Variabel adalah wadah untuk menyimpan data.

Dengan variabel, kita dapat menyimpan suatu nilai dan menggunakannya kembali kapan saja.

Contoh:

const message = "Hello World";

console.log(message);

Output:

Hello World

Mengapa Menggunakan Variabel?​

Variabel memberikan banyak keuntungan dalam penulisan kode.

1. Dapat Digunakan Kembali (Reusability)​

Tanpa variabel:

console.log("Hello World");
console.log("Hello World");
console.log("Hello World");

Dengan variabel:

const message = "Hello World";

console.log(message);
console.log(message);
console.log(message);

Jika isi pesan berubah, kita cukup mengubah nilainya pada satu tempat.

2. Membuat Kode Lebih Rapi​

Tanpa variabel:

console.log("Ucup TopekoX");

Dengan variabel:

const username = "Ucup TopekoX";

console.log(username);

Kode menjadi lebih mudah dibaca dan dipahami.

Aturan Penamaan Variabel​

JavaScript memiliki beberapa aturan dalam penamaan variabel.

Gunakan Camel Case​

Gunakan huruf kecil di awal, kemudian setiap kata berikutnya diawali huruf kapital.

Contoh:

const firstName = "John";
const userMessage = "Hello";
const totalPrice = 10000;

Boleh Mengandung Angka​

Angka diperbolehkan, tetapi tidak boleh berada di awal nama variabel.

Benar:

const user1 = "John";

Salah:

const 1user = "John";

Karakter yang Diizinkan​

Nama variabel dapat menggunakan:

  • Huruf (A-Z, a-z)
  • Angka (0-9)
  • Underscore (_)
  • Dollar ($)

Contoh:

const _username = "John";
const $price = 100;

Karakter yang Tidak Diizinkan​

Nama variabel tidak boleh menggunakan:

  • Spasi
  • Tanda hubung (-)
  • Karakter khusus lainnya

Contoh yang salah:

const user-name = "John";
const user name = "John";

Perbedaan let dan const​

JavaScript menyediakan dua cara utama untuk mendeklarasikan variabel.

  • let
  • const

Menggunakan let​

let digunakan jika nilai variabel akan berubah.

let message = "Hello World";

message = "Selamat Pagi";

console.log(message);

Output:

Selamat Pagi

Nilai variabel dapat diubah kapan saja.

Menggunakan const​

const digunakan jika nilai tidak akan diubah.

const message = "Hello World";

console.log(message);

Jika kita mencoba mengubah nilainya:

const message = "Hello World";

message = "Selamat Pagi";

Maka JavaScript akan menghasilkan error.

TypeError: Assignment to constant variable.

Kapan Menggunakan let?​

Gunakan let jika nilai memang harus berubah.

Contoh:

let score = 0;

score = score + 10;

Kapan Menggunakan const?​

Gunakan const jika nilai tidak perlu diubah.

Contoh:

const appName = "Belajar React";

Sebagian besar variabel pada aplikasi React menggunakan const.

Tips​

Sebagai praktik yang baik (best practice), gunakan const sebagai pilihan utama.

Gunakan let hanya ketika Anda benar-benar membutuhkan variabel yang nilainya akan berubah.

Pendekatan ini membuat kode lebih aman, lebih mudah dipahami, dan mengurangi risiko perubahan nilai yang tidak disengaja.

Kesimpulan​

Variabel digunakan untuk menyimpan data sehingga dapat digunakan kembali di dalam program. JavaScript menyediakan dua cara utama untuk mendeklarasikan variabel, yaitu let dan const.

  • Gunakan const untuk nilai yang tidak berubah.
  • Gunakan let jika nilai akan diperbarui di kemudian hari.

Memahami konsep variabel dan tipe data merupakan langkah awal yang sangat penting sebelum mempelajari React.