Scope dan context terdengar memiliki arti yang sama, namun bisa memiliki makna yang berbeda dan keduanya saling memiliki keterkaitam. Scope maupun context merupakan bagian fundamental dalam Javascript. Memahami scope maupun context merupakan tahap awal menjadi seorang Javascript Pro. Apa itu scope dan fungsinya? kita akan kupas sedikit dalam artikel ini.

Scope

Scope memiliki kaitan erat dalam hal deklarasi variabel. Javascript hanya mengenal dua jenis scope yaitu global scope dan function scope. Variabel – variabel yang dideklarasikan di dalam global scope akan menjadi property dari objek window (jika menggunakan browser).

var xyz = 1;
// identik dengan
window.xyz = 1;

function abc() {

};
// identik dengan
window.abc = function() {

};

Sedangkan variabel – variabel yang dideklarasikan di dalam fungsi hanya akan dapat diakses selama berada di dalam fungsi tersebut (enkapsulasi). Tidak ada scope untuk blok  for, while, if dan lain sebagainya. Artinya, deklarasi variabel di dalam blok for tidak ada bedanya dengan deklarasi variabel di luar blok for. Karena di Javascript dikenal istilah hoisting, yakni ketika Javascript engine menuliskan kembali semua variabel yang digunakan di dalam scope ke bagian awal scope. Di Javascript, kita bisa mendeklarasikan variabel belakangan karena engine akan melakukan proses hoisting tadi.

function foo () {
    var i;
    for (i = 0; i < 5; i++) {
        var j = 'data-' + i;
        console.log( j );
    }
}

// sama saja dengan

function foo () {
    var i, j; // <-- deklarasi di awal
    for (i = 0; i < 5; i++) {
        j = 'data-' + i;
        console.log( j );
    }
}

Jika kita tidak jeli dan berhati – hati, kita bisa kehilangan kontrol ketika menghadapi situasi seperti ini.

function foo() {
    var funcs = [];

    for (var i = 0; i < 10; i++) {
        funcs.push(function(){
            console.log( 'data-' + i );
        });
    }

    for(var j = 0, k = funcs.length; j < k; j++) {
        // akan tercetak `data-10` sebanyak 10 kali
        // bukan data-0, data-1, ..., data-9
        funcs[j]();
    }
}

Kenapa bisa demikian? Hal ini terjadi karena ketika setiap fungsi di dalam array funcs dieksekusi, nilai variabel i sudah berubah menjadi 10.

function foo() {
    var funcs = [];

    // kita berasumsi, `i` hanya
    // eksist di dalam blok `for`
    // padahal di hoisting ke awal
    for (var i = 0; i < 10; i++) {
        funcs.push(function(){
            console.log( 'data-' + i );
        });
    }

    // di sini, kita beranggapan bahwa
    // variabel `i` tidak ada.
    // namun akibat di hoisting, sekarang
    // variabel `i` bisa diakses
    // di sini dan nilai saat ini adalah 10 (i++)

    for(var j = 0, k = funcs.length; j < k; j++) {
        funcs[j]();
    }
}

Kita juga harus berhati – hati dalam mendeklarasikan variabel di dalam scope fungsi. Variabel yang dideklarasikan di dalam scope fungsi tanpa keyword var akan menjadi variabel global.

Context

tobe continued…

Advertisements