Penerapan Lingkungan Leksikal Fungsi dalam JavaScript

Misalkan kita memiliki fungsi yang mengembalikan fungsi lain sebagai hasilnya:

javascriptfunction test() {
  return function() {
    
  }
}

Jika fungsi induk memiliki variabel apa pun, maka variabel tersebut akan terkandung dalam lingkungan leksikal fungsi yang dikembalikan:

javascriptfunction test() {
  let num = 1; // variabel fungsi induk
  
  return function() {
    // lingkungan leksikal = {num: 1}
  }
}

Mari kita tulis dalam kode fungsi yang dikembalikan console.log, yang menampilkan nilai variabel num:

javascriptfunction test() {
  let num = 1;
  
  return function() {
    console.log(num);
  }
}

Sekarang mari panggil fungsi induk test dan tulis hasilnya ke dalam variabel func:

javascriptfunction test() {
  let num = 1;
  
  return function() {
    console.log(num);
  }
}

let func = test();

Fungsi yang dikembalikan akan ditulis ke dalam variabel func. Mari panggil fungsi kita - hasilnya akan menampilkan isi variabel num:

javascriptfunction test() {
  let num = 1;
  
  return function() {
    console.log(num);
  }
}

let func = test();
func(); // menampilkan 1

Jika kita mencoba menampilkan variabel num di luar fungsi - variabel tersebut tidak akan dapat diakses:

javascriptfunction test() {
  let num = 1;
  
  return function() {
    console.log(num);
  }
}

console.log(num); // variabel num tidak dapat diakses di sini

Seperti yang Anda lihat, variabel lokal num terikat pada lingkungan leksikal fungsi kita dan sekarang, dengan memanggil fungsi ini di mana pun dalam kode, kita bisa mendapatkan nilai variabel num, bahkan jika di tempat pemanggilan variabel ini sendiri tidak dapat diakses.

Sebenarnya, hasil yang serupa dapat dicapai dengan membuat variabel num menjadi global:

javascriptfunction test() {
  return function() {
    console.log(num);
  }
}

let num = 1; // variabel global
let func = test();
func(); // menampilkan 1

Namun, di sini akan ada perbedaan yang signifikan: dalam versi baru, variabel num dapat diubah di luar fungsi (karena bersifat global), sedangkan dalam versi lama - tidak.

javascriptfunction test() {
  let num1 = 1;
  let num2 = 2;
  
  return function() {
    return num1 + num2;
  }
}

let func = test();
console.log(func());

javascriptfunction test() {
  let num1 = 1;
  let num2 = 2;
  
  return function() {
    return num1 + num2;
  }
}

console.log(test()());

javascriptfunction test() {
  let num1 = 1;
  
  return function() {
    return num1 + num2;
  }
}

let num2 = 2;
let func = test();
console.log(func());

javascriptfunction test() {
  let num = 1;
  
  return function() {
    return num;
  }
}

let num = 2;
let func = test();
console.log(func());