JavaScript Dasar: Scope atau Cakupan

`Scope` dalam JavaScript mengacu pada `aksesibilitas`dan `keterlihatan` variabel, fungsi, dan objek dalam lingkup tertentu. 

`Scope` adalah `cakupan`, `batas`, atau `lingkup area` dimana sebuah variabel, fungsi, atau objek dapat diakses, digunakan, dipanggil, atau direferensikan. 

Dalam artikel ini, kita akan mempelajari lima scope penting dalam JavaScript: `Global Scope`, `Function Scope`, `Block Scope`, `Lexical Scope`, dan `Module Scope`. 

Kita mulai dari cakupan terkecil, yaitu `block scope`. 

`Block Scope`

Block Scope hadir pada ECMAScript 6 (ES6) bersamaan dengan kata kunci `let` dan `const`. Kedua kata kunci ini memiliki `Block Scope`. Variabel yang dideklarasikan di dalam sebuah blok `{ }` dengan dua kata kunci ini tidak dapat diakses dari luar blok. 

Contoh variabel dalam block scope: 

{

    // Block scope

    let x = 10;

}

// `x` tidak dapat diakses di sini

Namun, variabel yang dideklarasi dengan `var` tidak memiliki block scope, sehingga dapat diakses dari luar blok. 

{

    // Block scope

    var y = 12;

}

console.log(y) // Output: 12

`Function Scope`

Function scope adalah scope yang tercipta oleh sebuah fungsi. Setiap fungsi membuat sebuah function scope. 

Function scope membatasi semua yang ada didalamnya untuk hanya dapat diakses dari dalam fungsi tersebut. Variabel yang dideklarasi di dalam sebuah fungsi tidak dapat diakses dari luar fungsi, termasuk `var`. 

function printName(){

    // Function scope

    var nama = "Kurnia";

    console.log("Halo! Nama saya " + nama); // Output: "Halo! Nama saya Kurnia"

}

console.log(nama) // `nama` tidak dapat diakses disini

Di dalam function scope bisa terdapat block scope. Variabel yang dideklarasi di function scope dapat diakses oleh block yang ada di dalam fungsi tersebut. 

function printName(){

    // Function scope

    const nama = "Kurnia";

    const umur = 20;

    console.log("Halo! Nama saya " + nama); // Output: "Halo! Nama saya Kurnia"

   

    if (umur >= 18) {

        // Block Scope

        console.log("Saya sudah dewasa, umur saya " + umur + " tahun.")

    } else {

        // Block Scope

        console.log("Saya masih anak-anak.")

    }

}

console.log(nama, umur) // `nama` dan `umur` tidak dapat diakses disini

Tetapi tidak sebaliknya. Variabel yang dideklarasi di block scope yang terdapat dalam fungsi, tidak dapat diakses dari fungsi tersebut. Mereka terbatasi oleh block scope. Kecuali jika deklarasi menggunakan `var`. 

function functionName(){

    // Function scope

    let a = 2;

    if (a > 0) {

        var b = 6;

        let c = 4;

        console.log(c + a); // Output: 6

    }

    console.log(b); // Output: 6 `var` dapat diakses di sini

    console.log(c); // ReferenceError: c is not defined

    // `c` tidak dapat diakses, terbatasi oleh block scope

}

functionName();

Tidak hanya variabel, ini juga mencakup fungsi dan objek. 

Dalam JavaScript, fungsi dan objek juga termasuk variabel. 

Fungsi yang dideklarasi di dalam fungsi hanya dapat dipanggil dari lingkup fungsi induknya, lingkup yang lebih luar seperti global scope tidak dapat mengakses fungsi tersebut. 

Contoh:

function sayHello() {

    function getName() {

        // Fungsi ini hanya dapat dipanggil dari lingkup fungsi induknya `sayHello`

        const name = "Zend";

        return name;

    }

    console.log("Halo! Saya " + getName())

}

sayHello() // Output: Halo! Saya Zend

getName() // Output: ReferenceError: getName is not defined

`Local Scope`

Block scope dan function scope termasuk ke dalam `local scope`. Variabel yang ada di dalamnya disebut variabel lokal (`local variable`). 

`Global Scope` 

Cakupan terluas dalam program. Variabel yang dideklarasi di luar fungsi atau blok memiliki cakupan global. Artinya dapat diakses dari manapun, termasuk dari dalam fungsi atau blok. 

Mereka disebut `Global Variable` atau variabel global. 

// Global Scope

const title = "Scope atau Cakupan"; // Variabel Global

const author = "Zend"; // Variabel Global

printArticleInfo(); // Output: Object {judul: 'Scope atau Cakupan', penulis: 'Zend'}

function printArticleInfo() {

    // Function Scope

    const articleInfo = {

        judul: title, // Mengakses `title` variabel global.

        penulis: author // Mengakses `author` variabel global.

    };

    console.log(articleInfo);

}

Variabel global dengan `let` atau `var`, dapat diubah nilainya dari fungsi atau blok. 

let jumlah = 10; // Variabel global

tambahJumlah();

function tambahJumlah() {

    jumlah = jumlah + 12;

}

console.log(jumlah) // Output: 22

`Module Scope`

Modul adalah sebuah unit atau file terpisah dalam JavaScript. Fitur Modul diperkenalkan pada ECMAScript 2015 (ES6) untuk membagi kode menjadi beberapa modul terpisah sehingga lebih terorganisir dan terstruktur. . 

`ES6` atau `ECMAScript 6` adalah versi ECMAScript ke 6 yang rilis tahun 2015. ECMAScript adalah standar internasional untuk bahasa pemrograman script seperti JavaScript dan bahasa skrip lainnya.

Kita akan bahas lebih detail di artikel lain.

Modul scope adalah lingkup area di dalam sebuah modul yang membatasi variabel untuk hanya dapat diakses dari dalam modul tersebut. Kecuali jika variabel tersebut diekpor (`eksport`) keluar modul dan diimpor (`import`) di modul lain. 

Contoh module scope: 

Module 1: (module1.js)

const message = "Halo! Dari Modul 1!";

function greet() {

  console.log(message);

}

export { greet };

File utama: (main.js)

import { greet } from "./module1.js";

function sayHello() {

  greet();

}

sayHello(); // Output: "Halo! Dari Modul 1!"

console.log(message) // `message` tidak bisa diakses disini

Dalam contoh tersebut, kita memiliki dua file, yaitu modul `module1.js` dan file utama `main.js`. 

Di `module1.js`, terdapat variabel `message` dan fungsi `greet` yang memiliki cakupan (scope) terbatas pada modul itu sendiri.

Namun karena kita mengekspor fungsi `greet` dengan pernyataan `export { greet };`, maka fungsi tersebut dapat dipanggil di file `main.js` dengan melakukan `import` terlebih dulu. 

Berbeda dengan variabel `message`. Ia tidak dapat diakses di file `main.js` karena kita tidak mengekspornya. 

`Lexical Scope`

Lexical scope atau Lexical Scoping dalam JavaScript adalah aturan yang menentukan bagaimana variabel diakses oleh sebuah fungsi berdasarkan tempat dimana fungsi tersebut didefinisikan. 

Berikut aturan dalam Lexical Scoping: 

• Sebuah fungsi dapat mengakses variabel yang berada di lingkup induknya atau `parent scope` hingga ke global scope. 
• Global scope dan parent scope tidak dapat mengakses variabel yang berada di lingkup yang lebih dalam. 

Contoh: 

// Global scope

const globalVariable = "Ini adalah variabel global.";

function parentFunction() {

    // Parent scope dari childFunction()

    const parentVariable = 'Ini adalah variabel induk yang dideklarasikan di parent scope.';

    function childFunction() {

        // Function scope terdalam

        // Scope ini dapat mengakses variabel yang berada di parent scope termasuk global scope.

        const childVariable = 'Ini adalah variabel yang berada di dalam function scope terdalam. ';

        console.log(childVariable); // Output: 'Ini adalah variabel yang berada di dalam function scope terdalam'

        console.log(parentVariable); // Output: 'Ini adalah variabel induk yang dideklarasikan di parent scope.'

        console.log(globalVariable); // Output: 'Ini adalah variabel global.'

    }

    childFunction();

}

parentFunction();

`parentVariable` dan `globalVariable` dapat diakses oleh `childFunction()` karena mereka berada di parent scope dari fungsi tersebut. 

Namun global scope tidak bisa mengakses variabel `parentVariable` atau `childVariable` karena berada di lingkup fungsi yang lebih dalam. Dan function scope dari `parentFunction()` tidak dapat mengakses variabel yang berada di scope `childFunction()`.  

function parentFunction() {

    const parentVariable = 'Ini adalah variabel induk yang dideklarasikan di parent scope.';

    function childFunction() {

        const childVariable = 'Ini adalah variabel yang berada di dalam function scope terdalam. ';  

    }

    console.log(childVariable) // ReferenceError: `childVariable` is undefined.

}

// Global Scope

parentFunction();

console.log(parentVariable) // ReferenceError: `parentVariable` is undefined.

console.log(childVariable) // ReferenceError: `childVariable` is undefined.

Intinya begini, sebuah fungsi memiliki akses keluar, tapi tidak ke dalam sebuah fungsi yang berada di dalamnya. . 

Lexical scoping ini akan digunakan dalam `closures`. Ini adalah topik advance. Kamu akan mempelajarinya setelah memahami JavaScript dasar.