lifelong learner — urip iku urup, currently working on accenture.

Javascript ES6 – let , const dan blocking level scope

1
Degananda.com -

Blocking

Untuk menjelaskan secara singkat mengenai blocking dalam konteks pengaksesan variable dijavascript adalah kondisi dimana kita tidak dapat mengakses variable yang telah dideklarasikan. Kita mengenal berbagai cara untuk medeklerasikan variabel mulai dari menggunakan var, let, const bahkan kita dapat mendeklerasikan variable dengan menggunakan global scope. Ulasan ini akan menjelaskan mengenai bagaimana mekanisme blocking pengaksesan variable di javascript

Blocking sederhana

Untuk menjelaskan mengenai block level scope perhatikanlah kode dibawah ini

function tulisNama(){
    var nama = "degananda";
    console.log(nama);
}
tulisNama();
console.log(nama);

variabel nama pada kode diatas hanya dapat diakses didalam fungsi tersebut. Jika kita mencoba memanggil atau mengakses variable nama diatas maka akan terjadi error.

Inilah yang disebut dengan block level scope yakni suatu mekanisme yang mengatur availabilitas atau ketersediaan dari suatu variabel dalam suatu class / kode.

  • Didalam fungsi : Variabel yang dideklarasikan didalam fungsi hanya tersedia didalam fungsi tersebut.
  • Didalam kondisional disuatu fungsi : Variabel yang dideklarasikan didalam suatu kondisional if disuatu fungsi maka hanya tersedia didalam kondisional tersebut.
  • Diluar fungsi / class : Variabel yang dideklarasikan luar fungsi atau di class maka dapat diakses disemua lokasi.

Tiga kondisi diatas adalah contoh dari block level. Jika anda pernah menggunakan code igniter ataupun framework lainnya tentu pernah mendengar istilah global variable. Ini adalah variable yang dapat diakses disegala tempat meski berada di file berbeda. Namun kita tidak membahas mengenai global variable melainkan fokus pada tiga kondisi diatas yakni didalam fungsi, didalam kondisional disuatu fungsu dan di luarfungsi / class.

Block level : Didalam kondisional suatu fungsi

Ketika kita mendeklarasikan suatu variable didalam kondisional dalam suatu fungsi maka variable tersebut hanya dapat didalam kondisional itu saja. Contohnya perhatikan pada kode dibawah ini

function tulisNama(){
    if(1==2){
        var nama = "degananda";        
    } else {
        console.log(nama);
    }
}
tulisNama();

kita tidak dapat mengakses variable nama diluar kondisional diatas meskipun pemanggilan dilakukan didalam fungsi yang sama. Kode diatas akan menghasilkan “undefined”.

Block level : Diluar fungsi atau didalam class

block level seperti ini akan mengakibatkan variable dapat diakses dimana saja asalkan tetap berada dalam satu file atau satu class tersebut (kita anggap satu file adalah satu class dalam kasus ini). Perhatikan contoh dibawah ini

var nama = "degananda";   
function tulisNama(){
    if(1==2){
        console.log(nama);
    } else {
        console.log(nama);
    }
    console.log(nama);
}
tulisNama();

variable nama diatas dapat diakses di dalam fungsi, dalam kondisional suatu fungsi, pada callback dan lain sebagainnya. Intinnya dapat diakses dimana saja asalkan tetap dalam satu file.

NOTE : Jika anda menulis dengan menggunakan typescript maka pastikan penulisan callback menggunakan arrow. Jika tidak maka tidak dapat mengakses variable diluar callback tersebut.

Kalau note diatas kurang familiar anda dengar maka tidak perlu difahami lebih lanjut karena hanya untuk pengguna typescript. Sedikit penjelasan typescript adalah superset dari suatu javascript yang dapat memberikan kemampuan OOP, deklarasi jenis variable dan lain lain pada javascript. Istilah mudahnya adalah Javascript berasa java.

Let

Perbedaan let dan var pada javascript es6

fungsi dari let adalah untuk mendeklarasikan variable layaknya var. Lalu apakah ada perbedaannya ? tentu ada jika tidak ada perbedaannya maka tidak akan ada fitur baru bernama “let” ini. Perhatikan kode dibawah ini

var a = 'dega';
let b = 'dega';

keduanya sama – sama mendeklarasikan variable yakni var a dan let b.

Global

Namun pada konteks global variable maka keduannya memiliki sifat yang berbeda. Var a tidak dapat diakses dengan menggunakan window.a sedangkan let b atau variable b dapat diakses dengan menggunakan window.b

var a = 'dega';
let b = 'dega';
console.log(Window.a);
console.log(Window.b);

Function

Penggunaan var dan let pada function tidak memiliki perbedaan

function tulisNama(){
    let a = 'degananda'; // block level : fungsi 
    var b = 'ferdian'; // block level : fungsi
}

Block level

sedangkan pada block level konteksnya adalah saat looping dalam suatu fungsi

  1. let hanya tersedia pada looping tersebut
  2. sedangkan var tersedia juga didalam fungsi.

perhatikan kode dibawah ini yang menjelaskan kedua aturan diatas yang membedakan block level antara penggunaan “let” dan “var”.

function tulisNama(){
    for(let a = 1;a<=5;a++){
        console.log(a); // defined
    }
    console.log(a); // undefined
}

function tulisNama2(){
    for(var a = 1;a<=5;a++){
        console.log(a); // undefined
    }
    console.log(a); // defined
}

Re-declaration

Ketika kita mendeklarasikan variable dengan “var” variable tersebut dapat diredeklarasi sedangkan jika menggunakan let maka variable tersebut tidak dapat diredeklarasi atau dideklarasikan ulang. Sehingga gunakanlah “let” karena lebih clean untuk menghindari berbagai hal-hal yang tidak di inginkan seperti “tumpang tindih variable”.

var a = 'degananda';
var a = 'zaza';
console.log(a);
let b = 'nanda';
let b = 'priyambada'; // error let tidak dapat diredeklarasi

Const

Const atau konstanta digunakan untuk menklarasikan variable yang bersifat konstan artinnya tidak dapat berubah atau tidak dapat diubah.  Perhatikan kode berikut ini

const nama = 'degannada';
nama = 'dega';

jika kita mengubah nilai dari variable nama tersebut maka akan menghasilkan error.

Tetapi ketika kita mendeklarasikan konstanta atau const yang memiliki nilai berupa object kita dapat mengubah nilai properties didalam object tersebut. Perhatikan kode diatas

const orang = {
    nama : 'degananda'
}
orang.nama = 'ferdian'; // tidak error karena perubahan pada level properties

kode diatas tidak error karena perubahan bukan dilakukan pada level variable yang bersifat konstan melainkan perubahan dilakukan pada level properties dari object tersebut. Kita tidak dapat mengubah daftar properties dari variable diatas karena itu sama saja mengubah nilai dari konstanta tersebut.