Halo ,

Pada artikel kali ini, kami akan mencoba menjelaskan konsep hoisting dan temporal dead zone di JavaScript.

Hoisting adalah istilah yang biasa digunakan dalam Javascript yang mengacu pada proses di mana deklarasi fungsi , variabel , atau kelas tampaknya dipindahkan ke bagian atas ruang lingkupnya, sebelum eksekusi kode.

Berlawanan dengan kepercayaan populer, istilah mengangkat bukanlah istilah yang didefinisikan secara normatif dalam spesifikasi ECMAScript.

Misalnya, pertimbangkan kode berikut:

// global scope
console.log(bar); // undefined

foo(); // "Hello, world!"

var bar = 42;

function foo() {
  console.log("Hello, world!");
}

Namun, karena hoisting , mesin JavaScript memindahkan deklarasi dari bardan fooke atas lingkup global , secara efektif membuatnya terlihat seperti ini:

// global scope
var bar;

function foo() {
  console.log("Hello, world!");
}

console.log(bar); // undefined

foo(); // "Hello, world!"

bar = 42;

Sekarang, mari kita bicara tentang perbedaan antara var, let, dan constkata kunci dan bagaimana kaitannya dengan mengangkat.

Var

Kata varkunci adalah cara pertama mendeklarasikan variabel dalam JavaScript. Itu tunduk pada hoisting , artinya deklarasi varvariabel secara otomatis dipindahkan ke atas cakupan masing-masing (global atau fungsi) saat runtime:

// global scope
console.log(bar); // undefined <-- PROOF OF THE HOISTING
var bar = 41;
console.log(bar); // 41

function foo() { // function scope
  console.log(bar); // undefined (not 41) <-- PROOF OF THE HOISTING
  var bar = 42;
  console.log(bar); // 42
}

foo();
console.log(bar); // 41

Kata kunci letand constdiperkenalkan di JavaScript versi ECMAScript 2015 (ES6) sebagai cara untuk mendeklarasikan variabel dan konstanta dengan cakupan blok .

Berlawanan dengan kepercayaan populer, the letdan constkata kunci juga dapat diangkat .

Misalnya, perhatikan contoh kode berikut:

// global scope
console.log(bar); // ReferenceError
let bar = 42;
// global scope
console.log(bar); // ReferenceError
const bar = 42;

Deklarasi yang dibuat denganlet kata kunci dan const juga tunduk pada pengangkatan (yaitu mereka dipindahkan ke atas cakupannya masing-masing (global atau blok)) tetapi dikatakan berada di zona mati temporal (TDZ) yang berarti bahwa setiap upaya untuk mengaksesnya akan mengakibatkan kesalahan referensi .

Pertimbangkan contoh-contoh berikut:

// global scope
let bar = 41;
console.log(bar); // 41

if (true) { // block scope
 console.log(bar); // ReferenceError (not 41) <-- PROOF OF THE HOISTING / TDZ
 let bar = 42;
 console.log(bar); // 42
}

console.log(bar); // 41
// global scope
const bar = 41;
console.log(bar); // 41

if (true) { // block scope
 console.log(bar); // ReferenceError (not 41) <-- PROOF OF THE HOISTING / TDZ
 const bar = 42;
 console.log(bar); // 42
}

console.log(bar); // 41

Sebagai latihan, coba hilangkan deklarasi variabel di ifblok tersebut. barBisakah Anda mengakses variabel yang dicakup secara global , sekarang?

Kesimpulannya, selama wawancara Anda berikutnya, ketika Anda akan ditanyai pertanyaan "apakah biarkan dan const diangkat?", Anda dapat mengatakan bahwa:

Deklarasi yang dibuat dengan kata kunci letdan constsecara efektif diangkat tetapi dengan pembatasan zona mati temporal (yaitu mesin JavaScript mengetahui variabel, tetapi tidak dapat digunakan sampai dideklarasikan). Selain itu, kelas juga tunduk pada bentuk pengangkatan yang sama dari letdan const.