Cara membuat variabel yang tepat di javascript

JavaScript juga mendefinisikan dua tipe data yang sepele, null dan undefined, yang masing-masing hanya mendefinisikan satu nilai. Selain tipe data primitif, JavaScript mendukung tipe data komposit yang dikenal sebagai objek

variabel JavaScript
Seperti banyak bahasa pemrograman lainnya, JavaScript memiliki variabel. Variabel dapat dianggap sebagai wadah bernama. Anda dapat menempatkan data ke dalam penampung ini dan kemudian merujuk ke data tersebut hanya dengan memberi nama penampung tersebut

Sebelum Anda menggunakan variabel dalam program JavaScript, Anda harus mendeklarasikannya. Variabel dideklarasikan dengan kata kunci var sebagai berikut

<script type="text/javascript">
    var money;
    var name;
</script>

Anda juga dapat mendeklarasikan beberapa variabel dengan kata kunci var yang sama sebagai berikut

<script type="text/javascript">
    var money, name;
</script>

Menyimpan nilai dalam variabel disebut inisialisasi variabel. Anda dapat menginisialisasi variabel pada saat pembuatan variabel atau di lain waktu ketika Anda membutuhkan variabel tersebut

Misalnya, Anda dapat membuat variabel bernama Uang dan menetapkan nilainya menjadi 2. 000,50 untuk nanti. Untuk variabel lain, Anda dapat menetapkan nilai selama inisialisasi sebagai berikut

<script type="text/javascript">
   var name = "Ali";
   var money;
   money = 2000.50;
</script>

Catatan – Gunakan kata kunci var hanya untuk deklarasi atau inisialisasi, setelah dideklarasikan dapat digunakan di mana saja dalam dokumen. Anda tidak boleh mendeklarasikan variabel yang sama dua kali

JavaScript adalah bahasa yang tidak diketik. Ini berarti variabel JavaScript dapat menyimpan nilai dari tipe data apa pun. Tidak seperti banyak bahasa lain, Anda tidak perlu memberi tahu JavaScript selama deklarasi variabel jenis nilai variabel apa itu. Jenis nilai variabel dapat berubah selama eksekusi program dan JavaScript menanganinya secara otomatis

Cakupan variabel JavaScript
Cakupan variabel adalah wilayah program Anda yang mendefinisikannya. Variabel JavaScript hanya memiliki dua cakupan

• Variabel global – Variabel global memiliki cakupan global yang artinya dapat ditentukan di mana saja dalam kode JavaScript Anda
• Variabel lokal – Variabel lokal hanya dapat dilihat dalam fungsi di mana ia didefinisikan. Parameter fungsi selalu lokal untuk fungsi tersebut

Di badan fungsi, variabel lokal lebih diutamakan daripada variabel global dengan nama yang sama. Jika Anda mendeklarasikan variabel lokal atau parameter fungsi dengan nama yang sama dengan variabel global, Anda secara efektif menyembunyikan variabel global. Perhatikan contoh berikut

Dalam JavaScript kita dapat membuat variabel menggunakan kata kunci

var buah; // deklarasi
buah = 'pisang'; // inisialisasi

var buah; // deklarasi
buah = 'pisang'; // inisialisasi

var buah; // deklarasi
buah = 'pisang'; // inisialisasi

Istilah variabel tidak hanya terdapat pada JavaScript saja, tetapi juga pada bahasa pemrograman lain, hal ini berkaitan dengan bagaimana kita menyimpan data di memori

Kali ini kita akan belajar membuat variabel menggunakan ketiga kata kunci tersebut dan mencari tahu seperti apa perilakunya sehingga kita dapat membuat variabel yang sesuai dengan kondisi yang tepat.

Diskusi ini berisi beberapa topik lanjutan seperti hoisting dan scope, Anda tidak perlu memahaminya sekarang, tetapi ketahuilah bahwa istilah atau perilaku ini ada di JavaScript

Apa Itu Variabel?

Dalam pemrograman komputer, variabel adalah wadah untuk menyimpan nilai atau data

Saat kita mendeklarasikan variabel, komputer akan menyisihkan memori untuk data yang kita simpan

Pada JavaScript kita dapat memasukkan data berupa string (teks), angka, objek, array dan lain sebagainya yang akan kita bahas pada bab tipe data.

Cara Membuat Variabel

Untuk membuat variabel di JavaScript kita bisa menggunakan kata kunci

var buah; // deklarasi
buah = 'pisang'; // inisialisasi

var buah; // deklarasi
buah = 'pisang'; // inisialisasi

var buah; // deklarasi
buah = 'pisang'; // inisialisasi

Contoh Variabel

var nama = 'ucup';
let umur = 24;
const pekerjaan = 'petani';

Sintaksis

kata_kunci nama_variabel = data;

Keterangan

• kata kunci

  var buah; // deklarasi
  buah = 'pisang'; // inisialisasi
  

  0,

  var buah; // deklarasi
  buah = 'pisang'; // inisialisasi
  

  1, atau

  var buah; // deklarasi
  buah = 'pisang'; // inisialisasi
  

  2
• name_variable adalah nama variabel yang bisa ditentukan sesuai keinginan kita, namun harus sesuai aturan
• = adalah operator penugasan
• data adalah data yang ingin Anda masukkan ke dalam variabel
• ;

Aturan Penamaan Variabel

Nama variabel dapat dibuat sesuai keinginan, namun harus sesuai dengan aturan

• Dapat berisi huruf, angka, garis bawah, tanda dolar ($)
• Harus dimulai dengan huruf, tanda dolar, atau garis bawah (_)
• Peka huruf besar/kecil, variabel

  var buah = 'pisang'; // deklarasi dan inisialisasi
  

  _9 akan dianggap berbeda dari

  let umur = 24;
  umur = 'dua puluh empat';
  

  0
• Anda tidak dapat menggunakan kata kunci terbalik atau kata-kata yang sudah digunakan oleh JavaScript seperti

  var buah; // deklarasi
  buah = 'pisang'; // inisialisasi
  

  2,

  var buah; // deklarasi
  buah = 'pisang'; // inisialisasi
  

  1,

  var buah; // deklarasi
  buah = 'pisang'; // inisialisasi
  

  0,

  let umur = 24;
  umur = 'dua puluh empat';
  

  4,

  let umur = 24;
  umur = 'dua puluh empat';
  

  5,

  let umur = 24;
  umur = 'dua puluh empat';
  

  6,

  let umur = 24;
  umur = 'dua puluh empat';
  

  7 dan seterusnya

Nama variabel biasanya ditulis menggunakan gaya CamelCase, ini adalah konvensi penamaan yang digunakan oleh programmer JavaScript, kami disarankan untuk mengikutinya

Contoh nama variabel yang menggunakan gaya penulisan CamelCase.

let umur = 24;
umur = 'dua puluh empat';

let umur = 24;
umur = 'dua puluh empat';

Jika nama variabel hanya berisi satu kata, ditulis dengan huruf kecil semua. Jika ada lebih dari satu kata, maka huruf pertama kata kedua dan seterusnya ditulis dengan huruf kapital

Ini opsional, kita bisa menulisnya menggunakan huruf kecil atau huruf besar semua, tetapi disarankan untuk menggunakan CamelCase

Deklarasi dan Inisialisasi

Pada saat kita mendeklarasikan variabel, berarti kita meminta komputer untuk menyiapkan ruang kosong di dalam memori, sedangkan inisialisasi adalah memasukkan data ke dalam ruang memori.

Kita dapat membuat atau mendeklarasikan variabel atau wadah terlebih dahulu, lalu menginisialisasi atau memasukkan datanya nanti

var buah; // deklarasi
buah = 'pisang'; // inisialisasi

Atau, bisa juga mendeklarasikan variabel dan menginisialisasinya secara langsung

var buah = 'pisang'; // deklarasi dan inisialisasi

Data Dapat Diubah Dengan Berbagai Jenis (Dynamic Type)

Dalam beberapa bahasa pemrograman, saat kita membuat variabel dengan data numerik, kita tidak bisa menggantinya dengan data selain angka

Selain itu, kita juga perlu menuliskan secara eksplisit jenis data yang akan ditampung oleh suatu variabel

ini disebut Tipe Statis

Namun, dalam JavaScript hal itu tidak terjadi, kita dapat mengubah data dalam variabel menggunakan data dengan tipe yang berbeda, dan kita tidak perlu menulis tipe data secara eksplisit saat membuat variabel.

ini disebut Tipe Dinamis

Tapi ini hanya bisa dilakukan jika variabel dibuat menggunakan kata kunci

var buah; // deklarasi
buah = 'pisang'; // inisialisasi

var buah; // deklarasi
buah = 'pisang'; // inisialisasi

Contoh di bawah ini mengganti data yang awalnya berupa angka menjadi string

let umur = 24;
umur = 'dua puluh empat';

Perbedaan antara var buah; // deklarasi buah = 'pisang'; // inisialisasi 0, var buah; // deklarasi buah = 'pisang'; // inisialisasi 1, dan var buah; // deklarasi buah = 'pisang'; // inisialisasi 2

Banyaknya kata kunci yang dapat digunakan untuk membuat variabel tentunya bukan tanpa alasan, masing-masing memiliki perilaku yang berbeda

Singkatnya, inilah perbedaannya

Variabel Deklarasi Ulang Nilai ChangeBlock ScopeFunction ScopeHoistingvar✔✔❌✔✔let❌✔✔✔❌const❌❌✔✔❌

Mari belajar lebih banyak

var buah; // deklarasi buah = 'pisang'; // inisialisasi 0

Sebelum JavaScript ES6 muncul, kami hanya dapat membuat variabel menggunakan kata kunci

var buah; // deklarasi
buah = 'pisang'; // inisialisasi

Itu sebabnya kata kunci baru diperkenalkan. Pertama, mari kita pelajari dulu perilaku variabel

var buah; // deklarasi
buah = 'pisang'; // inisialisasi

Dapat Dideklarasikan Ulang

Ketika sebuah variabel dibuat dengan kata kunci

var buah; // deklarasi
buah = 'pisang'; // inisialisasi

var nama = 'renova';
var nama = 'reza';
console.log(nama); // reza

Nilai Dapat Diubah

Variabel yang dideklarasikan menggunakan kata kunci

var buah; // deklarasi
buah = 'pisang'; // inisialisasi

// sama tipe data
var nama = 'renova';
nama = 'reza';
console.log(nama); // reza

// beda tipe data
var umur = 19;
umur = 'sembilan belas';
console.log(umur); // sembilan belas

Lingkup Fungsi

Kode yang kita tulis dikatakan berada dalam ruang lingkup fungsi jika berada di antara

// sama tipe data
var nama = 'renova';
nama = 'reza';
console.log(nama); // reza

// beda tipe data
var umur = 19;
umur = 'sembilan belas';
console.log(umur); // sembilan belas

// sama tipe data
var nama = 'renova';
nama = 'reza';
console.log(nama); // reza

// beda tipe data
var umur = 19;
umur = 'sembilan belas';
console.log(umur); // sembilan belas

Ketika variabel

var buah; // deklarasi
buah = 'pisang'; // inisialisasi

Ini sebenarnya juga berlaku untuk

var buah; // deklarasi
buah = 'pisang'; // inisialisasi

var buah; // deklarasi
buah = 'pisang'; // inisialisasi

function iniFungsi() {
  // function scope
  var nama = 'reza';
}

// global scope
console.log(nama); // Uncaught ReferenceError: nama is not defined

Namun, tidak seperti

var buah; // deklarasi
buah = 'pisang'; // inisialisasi

var buah; // deklarasi
buah = 'pisang'; // inisialisasi

var buah; // deklarasi
buah = 'pisang'; // inisialisasi

Suatu variabel dikatakan berada dalam lingkup blok jika berada di antara

// sama tipe data
var nama = 'renova';
nama = 'reza';
console.log(nama); // reza

// beda tipe data
var umur = 19;
umur = 'sembilan belas';
console.log(umur); // sembilan belas

// sama tipe data
var nama = 'renova';
nama = 'reza';
console.log(nama); // reza

// beda tipe data
var umur = 19;
umur = 'sembilan belas';
console.log(umur); // sembilan belas

// global scope
var nama = 'reza';

if (true) {
  // block scope
  var nama = 'ucup';
}

// global scope
console.log(nama); // ucup

Inilah masalahnya, mari kita gunakan contoh kode di atas

Jika kita secara sadar ingin mendeklarasikan ulang variabel

var buah = 'pisang'; // deklarasi dan inisialisasi

Tapi, bagaimana jika niat kita adalah membuat variabel baru bernama

var buah = 'pisang'; // deklarasi dan inisialisasi

Jika terjadi seperti kode di atas, ini membuat nilai variabel sebelumnya berubah

Jika kita telah menggunakan variabel

var buah = 'pisang'; // deklarasi dan inisialisasi

var buah; // deklarasi
buah = 'pisang'; // inisialisasi

var buah; // deklarasi
buah = 'pisang'; // inisialisasi

Mengangkat (Mengangkat)

Hoisting adalah istilah yang digunakan untuk menggambarkan bagaimana konteks eksekusi bekerja di JavaScript

Deklarasi variabel dan fungsi akan diangkat ke cakupannya sebelum eksekusi kode

Sebelum dieksekusi, JavaScript akan mencari variabel

var buah; // deklarasi
buah = 'pisang'; // inisialisasi

function iniFungsi() {
  // function scope
  var nama = 'reza';
}

// global scope
console.log(nama); // Uncaught ReferenceError: nama is not defined

Agar lebih mudah dipahami, Anda dapat menggunakan alat yang dapat memvisualisasikan eksekusi kode JavaScript

Mari kita lihat contoh kode di bawah ini

console.log(nama); // undefined
var nama = 'reza';

Ingat

function iniFungsi() {
  // function scope
  var nama = 'reza';
}

// global scope
console.log(nama); // Uncaught ReferenceError: nama is not defined

Jadi, mengapa JavaScript menginisialisasi dengan nilai tersebut padahal kita tidak pernah menulisnya

Selain itu, variabel

function iniFungsi() {
  // function scope
  var nama = 'reza';
}

// global scope
console.log(nama); // Uncaught ReferenceError: nama is not defined

function iniFungsi() {
  // function scope
  var nama = 'reza';
}

// global scope
console.log(nama); // Uncaught ReferenceError: nama is not defined

Inilah yang dimaksud dengan istilah hoisting (diangkat)

Berikut adalah langkah-langkah yang dilakukan JavaScript untuk mengeksekusi kode di atas

1. Sebelum dieksekusi, naikkan dan inisialisasi variabel

   var buah; // deklarasi
   buah = 'pisang'; // inisialisasi
   

   0 dengan nilai

   function iniFungsi() {
     // function scope
     var nama = 'reza';
   }
   
   // global scope
   console.log(nama); // Uncaught ReferenceError: nama is not defined
   

   6
2. Eksekusi ________52______2
3. Inisialisasi dengan nilai variabel

var buah; // deklarasi buah = 'pisang'; // inisialisasi 1

Kata kunci

var buah; // deklarasi
buah = 'pisang'; // inisialisasi

var buah; // deklarasi
buah = 'pisang'; // inisialisasi

Tidak Dapat Dideklarasikan Ulang

Tidak seperti

var buah; // deklarasi
buah = 'pisang'; // inisialisasi

var buah; // deklarasi
buah = 'pisang'; // inisialisasi

kata_kunci nama_variabel = data;

Nilai Dapat Diubah

Sama seperti

var buah; // deklarasi
buah = 'pisang'; // inisialisasi

var buah; // deklarasi
buah = 'pisang'; // inisialisasi

kata_kunci nama_variabel = data;

Lingkup Blok

Variabel

var buah; // deklarasi
buah = 'pisang'; // inisialisasi

kata_kunci nama_variabel = data;

Mengangkat (Tidak Mengangkat)

Variabel

var buah; // deklarasi
buah = 'pisang'; // inisialisasi

var buah; // deklarasi
buah = 'pisang'; // inisialisasi

kata_kunci nama_variabel = data;

var buah; // deklarasi buah = 'pisang'; // inisialisasi 2

Sama seperti

var buah; // deklarasi
buah = 'pisang'; // inisialisasi

var buah; // deklarasi
buah = 'pisang'; // inisialisasi

Tidak Dapat Dideklarasikan Ulang

Kami tidak dapat mendeklarasikan ulang variabel

var buah; // deklarasi
buah = 'pisang'; // inisialisasi

kata_kunci nama_variabel = data;

Nilai Tidak Dapat Diubah

Nilai variabel yang dibuat menggunakan

var buah; // deklarasi
buah = 'pisang'; // inisialisasi

kata_kunci nama_variabel = data;

Tapi kita bisa mengubah elemen dalam array

kata_kunci nama_variabel = data;

Hal yang sama berlaku untuk objek

kata_kunci nama_variabel = data;

Lingkup Blok

Sama seperti

var buah; // deklarasi
buah = 'pisang'; // inisialisasi

var buah; // deklarasi
buah = 'pisang'; // inisialisasi

kata_kunci nama_variabel = data;

Mengangkat (Tidak Mengangkat)

Masalah mengangkat juga sama dengan

var buah; // deklarasi
buah = 'pisang'; // inisialisasi

var buah; // deklarasi
buah = 'pisang'; // inisialisasi

kata_kunci nama_variabel = data;

Kapan Menggunakan var buah; // deklarasi buah = 'pisang'; // inisialisasi 0, var buah; // deklarasi buah = 'pisang'; // inisialisasi 1, dan var buah; // deklarasi buah = 'pisang'; // inisialisasi 2?

Anda harus memprioritaskan kata kunci

var buah; // deklarasi
buah = 'pisang'; // inisialisasi

Kecuali jika ingin nilai variabel diubah dan nilainya bukan array atau objek, karena dengan

var buah; // deklarasi
buah = 'pisang'; // inisialisasi

Tetapi jika Anda ingin variabel diubah terlepas dari tipe datanya, Anda dapat menggunakan kata kunci

var buah; // deklarasi
buah = 'pisang'; // inisialisasi

Penggunaan

var buah; // deklarasi
buah = 'pisang'; // inisialisasi

Bagaimana cara menulis variabel yang benar?

Apa itu variabel dalam JS?

Apa yang perlu diperhatikan saat ingin membuat variabel?

Apa saja tipe data dalam JavaScript?