Terdapat beberapa fitur baru pada JavaScript
EcmaScript 6 (ES6). Salah satu fitur yang akan kita bahas kali ini adalah let
dan const
yang dapat digunakan untuk mendeklarasikan variabel. Namun, yang menjadi pertanyaan adalah 'Apa bedanya jika kita mendeklarasikan variabel dengan menggunakan Keyword var
?'.
Sesuai judul, kali ini kita akan membahas Keyword var
, let
dan const
serta mengetahui cara penggunaannya dan perbedaan masing-masing diantaranya.
Table of Contents
- Keyword var
- Deklarasi Keyword var
- Pengangkatan Keyword var
- Penggunaan Keyword var
- Keyword let
- Deklarasi Keyword let
- Pengangkatan Keyword let
- Keyword const
- Kesimpulan
Cakupan atau Scope dari Keyword var
itu global. Artinya, semua variabel yang dideklarasikan dengan var
yang berada diluar suatu fungsi (Function) akan tersedia atau dapat diakses untuk keseluruhan kode. Begitu pula sebaliknya, Keyword var
yang berada di dalam suatu fungsi, maka
hanya akan tersedia pada fungsi tersebut.
Scope dalam JavaScript adalah konsep yang digunakan untuk membatasi pengaksesan suatu variabel. Ada dua tipe scope yaitu lokal dan global. Variabel Global adalah variabel yang dideklarasikan di luar blok kode. Dalam hal ini, Scope dapat diartikan sebagai Ruang Lingkup atau Cakupan.
Masih belum jelas? Baiklah, sekarang perhatikan kode sederhana berikut:
var namaDepan = 'Yasya';
function fungsiNama() {
var namaBelakang = 'El Hakim';
};
Pada contoh kode diatas, variabel namaDepan
memiliki cakupan global (Dapat
diakses pada keseluruhan kode). Mengapa demikian? Itu karena variabel tersebut berada diluar suatu fungsi. Sedangkan variabel namaBelakang
itu memiliki cakupan yang hanya berada di dalam suatu fungsi (fungsiNama
).
Sekarang, mari kita uji kode diatas dengan menampilkan pada Console:
var namaDepan = 'Yasya';
function fungsiNama() {
var namaBelakang = 'El Hakim';
};
console.log(nameBelakang); // Akan menghasilkan Error: namaBelakang is not defined
Outputnya akan seperti berikut:
Kode tersebut akan menghasilkan error karena variabel namaBelakang
hanya berada di dalam suatu fungsi.
Deklarasi Keyword var
Nilai dari Keyword var
dapat didiklarasikan ulang atau dapat diperbaui. Artinya, kita dapat membuat dua variabel dengan nama variabel yang sama dengan nilai yang berbeda. Tetapi, hanya nilai variabel akhir yang akan diambil dari variabel terakhir.
Perhatikan contoh kode berikut:
var namaDepan = 'Yasya';
var namaDepan = 'Agung';
console.log(namaDepan); // Akan menghasilkan 'Agung'
Hasil dari contoh kode diatas akan menampilkan nilai dari variabel namaDepan
terakhir yaitu Agung
.
Kode diatas juga dapat
ditulis seperti berikut:
var namaDepan = 'Yasya';
namaDepan = 'Agung';
console.log(namaDepan); // Akan menghasilkan 'Agung'
Perbedaan contoh kode pertama dan kedua adalah, pada contoh kode kedua, kita tidak perlu menuliskan kode var lagi pada variabel namaDepan
.
Pengangkatan Keyword var
Pengangkatan atau Hoisting adalah mekanisme JavaScript dimana suatu variabel dan fungsi dideklarasikan atau dipindahkan keatas cakupannya tepat sebelum kode dijalankan.
Hoisting atau jika diterjemahkan kedalam bahasa Indonesia berarti
mengangkat adalah istilah yang tidak akan ditemukan dalam prosa spesifikasi normatif sebelum Spesifikasi Bahasa ECMAScript® 2015. Hoisting dimaksudkan sebagai cara berpikir umum tentang bagaimana konteks eksekusi (khususnya fase pembuatan dan pelaksanaan) bekerja di JavaScript.
Pada contoh kode sebelumnya, kita telah menampilkan Output (console.log()
) yang berada setelah Keyword var
dideklarasikan. Nah, maksud dari Hoisting disini adalah, kita dapat membalik susunan kode tersebut.
Silahkan perhatikan contoh kode berikut:
console.log(namaBelakang);
var namaBelakang = 'Yasya';
Jadi, variabel tersebut akan diangkat dari atas cakupan dan akan diinisialisasikan dengan nilai undefined
.
Contoh lain dari penulisan kode diatas adalah seperti berikut:
var namaBelakang;
console.log(namaBelakang);
namaBelakang = 'Yasya';
Penggunaan Keyword var
Terdapat kelemahan ketika kita menggunakan Keyword var untuk mendeklarasikan variabel pada JavaScript. Sebelum membahasnya, coba perhatikan contoh kode berikut:
var namaDepan = 'Yasya'
var jumlah = 6;
if (jumlah > 3) { // Jika 6 lebih dari 3, disini akan menghasilkan true (benar)
var namaDepan = 'Agung'
};
console.log(namaDepan); // Akan menghasilkan 'Agung'
Pada contoh kode
diatas, jika jumlah > 3
(6
lebih dari 3
) maka akan mengasilkan true
(benar) dan akan menjalankan kode yang ada didalamnya yaitu mendeklarasikan ulang nilai dari variabel namaDepa
n menjadi 'Agung
'.
Tidak ada masalah sama sekali jika kalian memang ingin mendeklarasikan ulang variabel tersebut. Namun, akan menjadi masalah jika kalian tidak menyadari bahwa variabel tersebut sudah ada atau sudah dideklarasikan sebelumnya.
Inilah salah satu alasan mengapa terdapat Keyword
baru yaitu let
dan const
.
Keyword let
Saat ini, let
adalah Keyword untuk mendeklarasikan variabel yang banyak atau sering digunakan karena Keyword yang satu ini dapat menyelesaikan masalah yang ada pada Keyword var
.
Cakupan dari Keyword let
adalah Blok kode. Maksud dari Blok kode disini adalah segala hal yang berada diantara tanda kurung kurawal '{...}'. Jadi, variabel yang dideklarasikan didalam blok kode
dengan Keyword let
hanya akan tersedia untuk kode yang ada didalam blok kode tersebut saja.
Agar semakin jelas, mari kita ujicoba:
let namaDepan = 'Yasya';
let jumlah = 6;
if (jumlah > 3) { // Jika 6 lebih dari 3, disini akan menghasilkan true (benar)
let namaBelakang = 'El Hakim';
console.log(namaBelakang); // Akan menghasilkan 'El Hakim'
};
console.log(namaBelakang); // Akan menghasilkan Error: namaBelakang is not defined
Pada contoh kode diatas, kita telah melihat bahwasanya menampilkan hasil dari variabel namaBelakang
diluar cakupan blok kode akan menghasilkan error. Hal tersebut disebabkan karena Keyword let
hanya mencakup blok kode (Block Scoped).
Deklarasi Keyword let
Sama seperti Keyword var
, nilai dari
variabel yang dideklarasikan dengan menggunakan Keyword let
juga dapat dideklarasikan ulang atau diperbarui selama berada di cakupanya (Blok kode). Dengan kata lain, nilai dari Keyword let
tidak dapat dideklarasikan ulang diluar cakupannya. Perhatikan contoh kode berikut:
let namaBelakang = 'El Hakim';
namaBelakang = 'Cahyadi';
console.log(namaBelakang); // Akan menghasilkan 'Cahyadi'
Namun, akan menghasilkan Error jika kita menuliskannya seperti berikut:
let namaBelakang = 'El Hakim';
let namaBelakang = 'Cahyadi';
console.log(namaBelakang); // Akan menghasilkan Error: redeclaration of let namaBelakang
Lain halnya jika kita mendeklarasikan ulang variabel yang sama pada cakupan yang berbeda. Contoh:
let namaBelakang = 'El Hakim';
if (true) {
let namaBelakang = 'Cahyadi';
console.log(namaBelakang); // Akan menghasilkan 'Cahyadi'
}
console.log(namaBelakang); // Akan menghasilkan 'El Hakim'
Mengapa
tidak terjadi Error pada contoh kode diatas? Karena kedua variabel tersebut dianggap berada dan juga di cakupan yang berbeda.
Itulah salah satu alasan mengapa Keyword let
lebih baik daripada Keyword var
. Dengan menggunakan Keyword let
, kalian tidak perlu khawatir jika kalian memiliki nama variabel yang sama.
Pengangkatan Keyword let
Sama seperti Keyword var
, deklarasi let
diangkat ke atas. Sebaliknya, tidak seperti
Keyword var
yang akan mengasilkan undefined
, Keyword let
tidak akan menghasilkan apapun sehingga jika kita menggunakan Keyword let
sebelum dideklarasikan, maka akan menghasilkan Reference Error
.
Keyword const
Variabel yang dideklarasikan dengan Keyword const
akan tetap terjaga sehingga nilainya akan tetap konstan (Tidak berubah). Keyword const
juga hampir sama seperti let
.
Deklarasi Keyword
const
Seperti deklarasi variabel dengan menggunakan let
, Keyword const
hanya dapat diakses didalam blok kode dimana Keyword tersebut dideklarasikan.
Artinya, nilai dari variabel yang dideklarasikan dengan menggunakan Keyword const
akan tetap sama pada cakupannya dan tidak dapat dideklarasikan ulang atau diperbarui.
Sekarang, perhatikan contoh kode berikut:
const namaDepan = 'Yasya';
namaDepan = 'Agung'; // Akan langsung menghasilkan Error: Invalid assignment to const 'namaDepan'
Begitupula dengan penulisan seperti berikut:
const namaDepan = 'Yasya';
const namaDepan = 'Agung'; // Akan langsung menghasilkan Error: Redeclaration of const namaDepan
Oleh karena itu, setiap deklarasi
const
harus diinisialisasi pada saat deklarasi.
Lain halnya dengan objek yang dideklarasikan dengan const
. Meskipun objek const
tidak dapat diperbarui, properti objek tersebut tetap dapat diperbarui. Perhatikan contoh kode berikut:
const nama = {
namaDepan: 'Yasya',
namaBelakang: 'El Hakim'
};
nama = {
namaDepan: 'Agung',
namaBelakang: 'Cahyadi'
}; // Akan langsung menghasilkan Error: invalid assignment to const 'nama'
Hasil dari contoh kode diatas tentu saja akan menghasilkan error. Namun berbeda jika kita menuliskannya seperti berikut:
const nama = {
namaDepan: 'Yasya',
namaBelakang: 'El Hakim'
};
nama.namaDepan = 'Agung'; // Akan menghasilkan 'Agung'
nama.namaBelakang = 'Cahyadi'; // Akan menghasilkan 'Cahyadi'
console.log(nama.namaDepan + nama.namaBelakang); // Akan menghasilkan 'AgungCahyadi'
Contoh kode diatas akan memperbarui nilai dari variabel namaDepan
dan namaBelakang
tanpa menghasilkan
Error.
Kesimpulan
Jadi kesimpulan dari pembahasan mengenai Keyword var
, let
dan const
kali ini adalah:
- Deklarasi Keyword
var
akan memiliki cakupan (Scope) secara Global. Sedangkan Keyword let
dan const
selama masih berada di cakupannya. - Variabel yang menggunakan Keyword
var
dapat dideklarasikan ulang atau diperbarui. Variabel let
juga dapat diperbarui tetapi tidak dapat dideklarasikan ulang.
Sedangkan const
tidak dapat diperbarui dan juga tidak dapat dideklarasikan ulang.
Mungkin cukup sampai disini pembahasan kali ini. Jika ada yang kurang, salah atau kalian memiliki pertanyaan, silahkan tulis pada kolom komentar. Semoga bermanfaat. Terimakasih.
Apa perbedaan var Let dan const di javascript?
Let dan Const menganut sistem block scope, yang mana cakupan variabelnya hanya bisa diakses di dalam blocknya saja. Var menganut sistem functional scope, yang mana variabelnya dapat diakses dari dalam maupun dari luar block kecuali di luar function.
Apa perbedaan Let dan Var?
var akan mendeklarasikan variabel secara global atau pun secara lokal pada sebuah fungsi. Sedangkan, let akan mendeklarasikan variabel dengan scope terbatas pada blok dan pernyataan dimana mereka digunakan.
Apa itu const dalam javascript?
Const atau konstanta adalah sebiah variable yang memiliki nilai tetap, alias tidak dapat di ubah. const data = 110; data = 111;//=> TypeError: Assignment to constant variable. tapi dalam penggunaanya sendiri const lebih sering digunakan untuk mendeklarasikan suatu object/array.
Bagaimana cara mendeklarasikan sebuah variabel dalam javascript?
Cara membuat variabel yang umum digunakan di javascript adalah menggunakan kata kunci var lalu diikuti dengan nama variabel dan nilainya. Contoh: var title = "Belajar Pemrograman Javascript"; Pada contoh di atas, kita membuat variabel bernama title dengan nilai berupa teks (string): "Belajar Pemrograman Javascript" .