Bedanya Let Const Var Di Dalam Pemrograman Javascript

Ada banyak feature baru pada JavaScript EcmaScript 6 (ES6). Salah satunya feature yang akan kita ulas ini kali ialah let dan const yang bisa dipakai untuk mendeklarasikan variabel. Tetapi, yang menjadi pertanyaan ialah 'Apa perbedaannya bila kita mendeklarasikan variabel dengan memakai Kata kunci var?

Sama sesuai judul, ini kali kita akan mengulas Kata kunci var, let dan const dan mengetahui langkah penggunaannya dan perbedaan masing-masing diantaranya.

Kata kunci var

Cakupan atau Scope dari Kata kunci var itu global. Maknanya, semua variabel yang dideklarasikan dengan var yang ada di luar satu fungsi (Function) akan ada atau bisa diakses untuk keseluruhnya code. Begitupun sebaliknya, Kata kunci var yang ada dalam satu fungsi, karena itu cuma akan ada pada fungsi itu.

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.

Apa masih kurang jelas? Baiklah, sekarang perhatikan kode sederhana berikut ini:

var namaDepan = 'Yasya';

function fungsiNama() {
    var namaBelakang = 'El Hakim';
};

Pada contoh code di atas, variabel namaDepan mempunyai cakupan global (Bisa diakses pada seluruh code). Mengapa begitu? Itu karena variabel itu ada di luar satu fungsi. Dan variabel namaBelakang itu mempunyai cakupan yang cuma ada dalam satu fungsi (fungsiNama).

Saat ini, mari kita tes code di atas dengan tampilkan 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:

img

Kode tersebut akan menghasilkan error karena variabel namaBelakang hanya berada di dalam suatu fungsi.

Deklarasi Kata kunci var

Nilai dari Kata kunci var bisa didiklarasikan ulang atau bisa diperbaharui. Artinya, kita bisa membuat dua faktor bernama variabel yang serupa dengan nilai yang lain. Tapi, cuma nilai variabel akhir yang akan diambil dari variabel paling akhir.

Lihat contoh code berikut ini:

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 code pertama dan kedua ialah, pada contoh code kedua, kita tak perlu tuliskan code var kembali pada variabel namaDepan.

Pengangkatan Kata kunci var

Pengangkatan atau Hoisting ialah proses JavaScript di mana satu variabel dan fungsi dideklarasikan atau dipindahkan keatas lingkupnya pas saat sebelum code 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 code awalnya, kita sudah tampilkan Output (console.log()) yang ada sesudah Kata kunci var dideklarasikan. Nah, tujuan dari Hoisting di sini ialah, kita bisa membalik susunan code itu. Silakan perhatikan contoh code berikut ini:

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 Kata kunci var

Ada kelemahan saat kita memakai Kata kunci var untuk mendeklarasikan variabel pada JavaScript. Sebelum mengulasnya, coba perhatikan contoh code berikut ini:

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 code di atas, bila jumlah > 3 (6 lebih dari 3) maka mengasilkan true (betul) dan akan menjalankan code yang ada di dalamnya yakni mendeklarasikan ulang nilai dari variabel namaDepan jadi 'Agung'.

Tidak ada permasalahan benar-benar bila kalian memang ingin mengumumkan ulangi variabel itu. Tetapi, bisa menjadi permasalahan bila kalian tidak mengetahui jika variabel itu telah ada atau telah dideklarasikan sebelumnya.

Berikut salah satunya argumen kenapa ada Kata kunci baru yakni let dan const.

Kata kunci let

Sekarang ini, let ialah Kata kunci untuk mendeklarasikan variabel yang banyak atau sering dipakai karena Kata kunci yang ini bisa menuntaskan permasalahan yang ada di Kata kunci var.

Cakupan dari Kata kunci let ialah Block code. Tujuan dari Block code di sini ialah segala hal yang ada di pertanda kurung kurawal '{...}' . Maka, variabel yang dideklarasikan di dalam block code dengan Kata kunci let cuma akan ada untuk code yang ada di dalam block code itu saja.

Agar makin jelas, mari kita uji-coba:

let namaDepan = 'Yasya';
let jumlah = 6;

if (jumlah &gt; 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 code di atas, kita sudah melihat bahwasanya menampilkan dari hasil variabel namaBelakang di luar lingkup block code akan menghasilkan error. Hal itu dikarenakan oleh Kata kunci let cuma mencangkup block code (Blok Scoped).

Deklarasi Kata kunci let

Sama dengan Kata kunci var, nilai dari variabel yang dideklarasikan dengan memakai Kata kunci let dapat dideklarasikan ulangi atau diperbaharui sepanjang ada di cakupanya (Block code). Dalam kata lain, nilai dari Kata kunci let tidak bisa dideklarasikan ulang di luar cakupannya. Lihat contoh code berikut ini:

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

Berbeda 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'

Kenapa tidak ada Error pada contoh code di atas? Karena kedua variabel itu dianggap ada dan di lingkup yang lain.

Itulah salah satunya alasan kenapa Kata kunci let lebih bagus dibanding Kata kunci var. Dengan menggunakan Kata kunci let, kalian tak perlu cemas bila kalian mempunyai nama variabel yang serupa.

Pengangkatan Kata kunci let

Sama dengan Kata kunci var, deklarasi let diangkat ke atas. Kebalikannya, tidak seperti Kata kunci var yang akan mengasilkan undefined, Kata kunci let tidak menghasilkan apa saja sehingga bila kita memakai Kata kunci let saat sebelum dideklarasikan, maka menghasilkan Reference Error.

Kata kunci const

Variabel yang dideklarasikan dengan Kata kunci const akan selalu terlindungi hingga nilainya tetap stabil (Tetap sama). Kata kunci const hampir sama seperti let.

Deklarasi Kata kunci const

Seperti deklarasi variabel dengan menggunakan let, Kata kunci const cuma bisa diakses di dalam block code di mana Kata kunci itu dideklarasikan.

Maknanya, nilai dari variabel yang dideklarasikan dengan menggunakan Kata kunci const tetap sama pada lingkupnya dan tidak bisa dideklarasikan ulang atau diperbaharui.

Sekarang, perhatikan contoh code berikut ini:

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

Maka dari itu, setiap deklarasi const harus diinisialisasi di saat deklarasi.

Beda hal dengan object yang dideklarasikan dengan const. Walau object const tidak bisa diperbaharui, property object itu masih tetap bisa diperbaharui. Perhatikan contoh code berikut ini:

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 code di atas akan mengupdate nilai dari variabel namaDepan dan namaBelakang tanpa menghasilkan Error.

Kesimpulan

Jadi kesimpulan dari ulasan tentang Kata kunci var, let dan const kali ini ialah:

Deklarasi Kata kunci var akan mempunyai cakupan (Scope) secara Global. Dan Kata kunci let dan const selama masih ada di cakupannya.

Variabel yang menggunakan Kata kunci var bisa dideklarasikan ulang atau diperbaharui. Variabel let dapat diperbaharui tapi tidak bisa dideklarasikan ulang. Dan const tidak bisa diperbaharui dan tidak bisa dideklarasikan ulang.

Cukup sampai di sini ulasan kita kali ini. Bila ada yang kurang, salah atau kalian mempunyai pertanyaan, silahkan tulis pada kolom komentar ya! Semoga bermanfaat dan Terima kasih.