JavaScript Dasar: Variabel

Variabel (variable) adalah wadah atau tempat penyimpanan data, nilai, atau informasi. Variabel menyimpan informasi yang diperlukan oleh program. Nilai atau value dalam variabel dapat berubah sewaktu-waktu tergantung pada kondisi. 

Memahami Deklarasi, Inisialisasi, dan Penugasan Variabel

Deklarasi adalah membuat sebuah variabel. 

let nama

Inisialisasi adalah memberikan nilai awal pada variabel yang telah dideklarasikan dalam satu pernyataan. 

let nama = "ZendCode";

Penugasan (`asignment`) adalah proses memberikan nilai pada variabel. Penugasan dilakukan dengan `asignment` operator seperti tanda sama dengan (`=`). 

Inisialisasi adalah salah satu bentuk penugasan, yang mana ia adalah penugasan pertama (`initial`) atau pemberian nilai awal. Penugasan-penugasan berikutnya disebut dengan `penugasan ulang` atau `reassignment`, yaitu memberikan nilai baru pada variabel untuk mengubah nilainya.  

Contoh penugasan ulang (reassignment): 

let nama = "ZendCode";

nama = "Kurnia" // Penugasan Ulang (Reassignment)

JavaScript Identifier: Penamaan Variabel

`Identifier` dalam JavaScript merujuk pada penamaan variabel, fungsi, kelas, objek, atau lainnya. 

Pembahasan Identifier dapat kamu temukan di artikel sebelumya. 

Praktik Terbaik 

`Best practice` dalam membuat variabel adalah menggunakan `camelCase`, penamaan yang deskriptif, dan menggunakan Bahasa Inggris. 

• `camelCase` adalah pola penulisan identifier yang memiliki lebih dari 1 kata. Huruf pertama setiap kata ditulis kapital, kecuali kata pertama. 
• Penamaan harus dapat mendeskripsikan dengan jelas kegunaan dari variabel atau fungsi yang dideklarasikan. 
• Menggunakan Bahasa Inggris akan memudahkan kolaborasi dengan banyak orang yang kemungkinan bukan orang Indonesia. 

Contoh: 

let authorFirstName = "Kurnia";

Deklarasi Variabel

Di JavaScript, variabel dapat dideklarasikan menggunakan tiga kata kunci (keyword): `var`, `let`, dan `const`. 

Ketiganya memiliki cara yang sama untuk mendeklarasi variabel. Berikut contohnya: 

var angka = 10;

let nama = "ZendCode";

const pi = 3.14;

Namun masing-masing memiliki karakteristik yang berbeda-beda. 

Mari kita bahas lebih detail ketiganya!

1. `var`

Sebelum adanya JavaScript ES6, `var` adalah satu-satunya kata kunci yang digunakan untuk mendeklarasi variabel di JavaScript. Kata kunci `var` sudah ada sejak JavaScript pertama kali dibuat pada tahun 1995 dan digunakan di semua kode JavaScript hingga tahun 2015. 

`ES6` atau `ECMAScript 6` adalah versi ECMAScript ke 6 yang rilis tahun 2015. ECMAScript adalah standar internasional untuk bahasa pemrograman script seperti JavaScript dan bahasa skrip lainnya.

Kita akan bahas lebih detail di artikel lain.

Kata kunci `var` memiliki karakteristik sebagai berikut: 

• Hoisting
  
  Kata kunci var dalam JavaScript memiliki perilaku `hoisting`. Hoisting adalah proses di mana deklarasi variabel dinaikkan (dianggap ditempatkan di atas) ke bagian atas cakupan (scope) saat kode dieksekusi, meskipun deklarasi variabel sebenarnya terletak di bagian bawah. 
  
  Namun hoisting hanya mencakup pada deklarasi, bukan inisialisasi variabel. Jika variabel `var` diakses sebelum dideklarasikan, tidak akan menghasilkan error, tetapi nilainya akan menjadi `undefined`. 
  
  Perhatikan contoh berikut:
  
  
  console.log(name); // Output: undefined

  var name = "Zend";

  console.log(name); // Output: Zend

  
  

  Deklarasi var akan dinaikkan ke atas saat runtime, sehingga menjadi: 
  
  

  var name; // Deklarasi Variabel

  
  

  console.log(name); // Output: undefined

  name = "Zend"; // Inisialiasi Variabel

  console.log(name); // Output: Zend
  
  
  Deklarasi var dipindah keatas, namun tidak dengan inisialisasinya. Maka dari itu, saat variabel name diakses sebelum inisialisasi, nilainya akan menjadi `undefined`. 
  
  
  
• Dapat Dideklarasi Ulang (redeclare)
  
  Deklarasi ulang variabel umumnya menghasilkan error jika dilakukan dalam scope yang sama. Namun tidak jika menggunakan kata kunci `var`. Kita bisa menggunakan nama variabel yang sama untuk dideklarasikan berulang-ulang dalam cakupan (scope) yang sama. 
  
  Berikut contohnya: 
  
  
  var nama = "Zend";

  var nama = "Kurnia";

  
  

  console.log(nama) // Output: Kurnia
  
  Di contoh tersebut, Variabel `nama` dideklarasi dan diinisialisasi sebanyak dua kali. Nilai inisialisasi yang kedua akan digunakan, karena nilai yang pertama telah ditimpa dengan nilai kedua.
  
  
  
• Nilai Tidak Tetap (dapat diubah) 
  
  Variabel yang dideklarasikan dengan `var` dapat diubah nilainya selama eksekusi program. Anda dapat melakukan penugasan ulang variabel `var` dengan nilai yang berbeda tanpa menghasilkan error. 
  
  Contoh: 
  
  
  var z = 30;

  console.log(z); // Output: 30

  
  

  z = 40;

  console.log(z); // Output: 40
  
  
  
  
• Memiliki Cakupan Global (Global Scope) dan Fungsi (Function Scope)
  
  Variabel `var` yang dideklarasikan di global scope dapat diakses di manapun. Mereka biasanya disebut `Global Variable`. 
  
  Contoh Global Scope: 
  
  
  var globalVariable = 10;

  
  

  function myFunction() {

    console.log(globalVariable); // Output: 10

  }

  
  

  console.log(globalVariable); // Output: 10
  
  Sedangkan variabel `var` yang dideklarasikan di function scope tidak dapat diakses di luar scope tersebut. 
  
  Contoh: 
  
  
  function myFunction() {

      // Function Scope

      var localVariable = 20;

      console.log(localVariable); // Output: 20

  }

   

  // Global Scope

  console.log(localVariable); // Error: localVariable is not defined
  
  
  
• Tidak tepengaruh oleh Blok Scope
  
  Variabel `var` yang dideklarasikan di dalam Blok Scope (seperti blok if, loop, dan lainnya) dapat diakses dari luar blok tersebut.  
  
  Contoh: 
  
  
  if (true) {

      // Blok If

      var y = 20; // Variabel y dapat diakses di luar blok if

  }

   

  console.log(y); // Output: 20
  
  
  

Kita banyak menyebut tentang scope di sini. Terdapat 5 scope, yaitu `global scope`, `function scope`, `block scope`, `lexical scope` dan `module scope`. 

Kamu bisa pelajari tentang scope di artikel sebelumnya. 

2. `let` 

Kata kunci `let` diperkenalkan dalam ECMAScript 6 (ES6) untuk memberikan alternatif yang lebih kuat dan aman dalam mendeklarasikan variabel dibandingkan dengan `var`. 

Berikut adalah penjelasan lebih lanjut tentang karakteristik `let`:

• Tidak Ada Hoisting
  
  Saat menggunakan `let`, deklarasi variabel tidak akan mengalami hoisting. Dengan `let`, variabel harus dideklarasikan sebelum digunakan, atau akan menghasilkan error. 
  
  Contoh: 
  
  
  console.log(x); // Error: Cannot access 'x' before initialization

  let x = 5;
  
  
  
• Hanya Dapat Diakses di Dalam Block Scope
  
  Variabel yang dideklarasikan dengan `let` berlaku hanya dapat diakses di dalam block tempat variabel tersebut dideklarasikan. Sebuah blok adalah bagian kode yang terletak di antara sepasang kurung kurawal `{ }`. Variabel `let` tidak dapat diakses dari luar blok tempat ia dideklarasikan. 
  
  Namun, jika dideklarasikan di global scope, variable `let` dapat diakses dan diubah nilainya dari blok manapun. 
  
  Contoh block scope dan global scope variable `let`: 
  
  
  let globalScope = 2;

  
  

  {

      let blokScope = 5;

     

      console.log(globalScope); // Output: 2

      console.log(blokScope); // Output: 5

  
  

      // Mengubah Nilai `globalScope`

      globalScope = 10

  }

  
  

  console.log(globalScope); // Output: 10

  console.log(blokScope); // Error: `blokScope` is not defined
  
  Kesimpulan: Block scope dapat mengakses variabel di global scope, tetapi global scope tidak dapat mengakses variabel di block scope. 
  
  
  
• Tidak Dapat Dideklarasikan Ulang (Redeclare) dalam Scope yang Sama
  
  Jika kamu mendeklarasikan variabel dengan `let` dalam suatu blok, kamu tidak dapat mendeklarasikannya lagi dengan `let` dalam blok yang sama.
  
  Begitu juga jika kamu mendeklarasikannya di global scope, kamu tidak bisa mendeklarasikan ulang variable tersebut di global scope. 
  
  Hal ini akan menyebabkan error `SyntaxError: Identifier 'x' has already been declared`. 
  
  Contoh: 
  
  
  {

      let number = 5;

  
  

      console.log(number); // Output: 5

      let number = 10; // Error: Identifier 'number' has already been declared

  }
  
  
  Namun jika mendeklarasikan ulang di scope berbeda, atau dideklarasikan di global scrope lalu dideklarasikan ulang di block scope, tidak akan error. 
  
  Perhatikan contoh berikut! 
  
  
  let number = 2;

  
  

  {

      // Deklarasi ulang global scope `number` di block scope

      let number = 5;

  
  

      console.log(number); // Output: 5 (tidak error)

  }

  
  

  console.log(number); // Output: 2
  
  Di contoh tersebut, saya mendeklarasikan 2 variabel yang sama `number`, pada global scope dan juga di block scope. 
  
  Ini tidak akan mengahasilkan error seperti contoh sebelummnya, karena kedua scope memilki variable `number` masing-masing.
  
  `let number = 2;` milik global scope. 
  `let number = 5;` milik block scope. 
  
  Pendeklarasian ulang di block scope, tidak akan mengubah nilai variabel di global scope. 
  
  
  
• Deklarasi Tanpa Inisialisasi
  
  Variabel `let` dapat dideklarasikan tanpa perlu memberikan nilai awal saat deklarasi. Ini memungkinkan kita untuk mendeklarasikan variabel terlebih dahulu dan menginisialisasinya kemudian. 
  
  Namun jika variabel tersebut diakses sebelum inisialisasi, maka nilainya adalah `undefined`. 
  
  Contoh deklarasi `let` tanpa inisialisasi: 
  
  
  let n;

  console.log(n); // Output: undefined

  
  

  n = 5;

  console.log(n); // Output: 5
  
  
  

3. `const`

Kata kunci `const` diperkenalkan pada ES6 bersamaan dengan `let`. Ia digunakan untuk mendeklarasikan variabel konstanta (constant) yang artinya nilainya tetap atau tidak dapat diubah setelah ia diinisialisasi. 

Contoh: 

const nilaiTetap = 12

nilaiTetap = 2 // Error: Assignment to constant variable

Tetapi jika variabel `const` berupa object atau array, properti atau elemen di dalamnya dapat diubah, ditambah, ataupun dihapus. 

Contoh `const` berupa object: 

const author = {

  name: "Zend",

  age: 20

};

author.age = 25; // Memodifikasi properti `age` dari objek `author`

console.log(author); // Output: { name: "Zend", age: 25 }

// Reassign (penugasan ulang atau mengubah nilai variabel)

author = {}; // Error: Assignment to constant variable.

Contoh `const` berupa array: 

const numbers = [1, 2, 3, 4, 5];

numbers[0] = 10; // Memodifikasi elemen pertama

numbers.push(6); // Menambahkan elemen baru ke akhir array

console.log(numbers); // Output: [10, 2, 3, 4, 5, 6]

Berikut penjelasan beberapa karakteristik `const` lainnya:

• Deklarasi `const` Harus Diinisialiasi
  
  Deklarasi `const` harus diikuti inisialisasinya, artinya variable `const` harus diinisialisasi di pernyatataan yang sama setelah ia dideklarasikan. Jika tidak maka akan menyebabkan error.
  
  Contoh: 
  
  
  const deklarasiTanpaInisialisasi // SyntaxError: Missing initializer in const declaration
  
  
  
• Pendeklarasian Ulang dalam Scope yang Sama Tidak Diperkenankan 
  
  Sama seperti `let`, `const` tidak dapat dideklarasi ulang dalam scope yang sama. 
  
  Contoh: 
  
  
  // global scope

  const nilaiTetap = 12

  
  

  {

      // block scope

      const nilaiTetap = 6

  }

  
  

  // global scope

  const nilaiTetap = 4 // Error: Identifier 'nilaiTetap' has already been declared
  
  
  
• Hanya Dapat Diakses di Dalam Block
  
  Sama dengan `let`, mengakses variable `const` dari luar block tempat ia dideklarasikan akan menghasilkan error. 
  
  Contoh: 
  
  
  {

      const blockScope = "Deklarasi dalam block scope";

      console.log(blockScope); // Output: Deklarasi dalam block scope

  }

  
  

  console.log(blockScope); // Error: blockScope is not defined
  
  
  

Penggunaan `const` disarankan ketika Anda tahu bahwa nilai variabel tidak akan berubah selama eksekusi program dan ingin memastikan bahwa perubahan yang tidak diinginkan tidak terjadi. 

Deklarasi Multi-Variabel

Deklarasi multi-variabel adalah cara untuk mendeklarasikan beberapa variabel sekaligus dalam satu pernyataan.

Misalkan kita memiliki 3 deklarasi variabel sebagai berikut:

let namaDepan = "Zayn";

let namaBelakang = "Kurnia";

let umur = 20;

Ketiga deklarasi di atas terpisah menjadi 3 pernyataan. Kita bisa gabungkan ketiganya menjadi satu pernyataan deklarasi dengan menggunakan tanda koma (`,`) sebagai pemisah antara variabel-variabel tersebut. 

let namaDepan = "Zayn", namaBelakang = "Kurnia", umur = 20;

Kita juga dapat memisahkan deklarasi multi-variabel ke beberapa baris untuk meningkatkan keterbacaan kode (`readability`):

let namaDepan = "Zayn",

    namaBelakang = "Kurnia",

    umur = 20;

JavaScript memiliki tipe data dinamis. Ini berarti bahwa variabel yang sama dapat digunakan untuk menyimpan tipe data yang berbeda. 

JavaScipt tidak secara spesifik menentukan tipe data dari sebuah variabel saat deklarasi. Jika inisialisasi belum dilakukan, maka tipe data dari variabel tersebut belum ditentukan dan dapat diinisialisasi dengan tipe data apapun. 

Oleh karena itu, dalam deklarasi multi-variabel, variabel-variabel tersebut tidak harus memiliki tipe data yang sama. Anda dapat menggabungkan variabel dengan tipe data yang berbeda dalam satu pernyataan deklarasi multi-variabel. 

Deklarasi Multi-Variabel dengan Array

Kita bisa menggunakan Array dalam JavaScript unruk mendeklarasikan beberapa variabel sekaligus. 

let [namaDepan, namaBelakang, umur] = ["Zayn", "Kurnia", 20];

console.log(namaDepan); // Output: Zayn

console.log(namaBelakang); // Output: Kurnia

console.log(umur); // Output: 20

Tapi perlu diingat, urutan nama variabel harus sama dengan urutan nilainya. Jika tidak, maka nilainya akan tertukar.