Ketika variabel dibuat dengan keyword var, kita bisa mendeklarasikan ulang variabel dengan nama yang sama, nilai sebelumnya akan ditimpa.

var nama = "brahmantio";
var nama = "diaz";
console.log(nama) //diaz

Variabel yang dideklarasikan menggunakan keyword var dapat diubah nilainya, entah itu menggunakan tipe data yang sama maupun berbeda.

// diubah dengan tipe data yang sama
var nama = 'brahmantio';
nama = 'diaz';
console.log(nama); // diaz


// diubah dengan tipe data yang berbeda
var umur = 20;
umur = 'dua puluh';
console.log(umur); // dua puluh

Kode yang kita tulis dapat dikatakan berada di dalam function scope (lingkup fungsi) jika berada di antara { dan } sebuah fungsi. Kita akan mempelajari lebih banyak tentang fungsi di JavaScript nanti. 

Ketika variabel var di deklarasikan di dalam function scope, variabel tersebut hanya bisa digunakan di dalam function tersebut, tidak bisa digunakan di luar fungsi.

Ini berlaku juga untuk let dan const, variabel yang dideklarasikan dengan keyword apapun di dalam fungsi tidak dapat diakses di luar fungsi.

function myfunction() {
    // function scope
    var nama = 'diaz';
  }
 
  // global scope
  console.log(nama); // Uncaught ReferenceError: nama is not defined

Variabel dikatakan berada di dalam block scope jika berada di antara { dan } conditional statement (if, else, else if), perulangan (for, while, do while), switch statement, dan sebagainya selain lingkup fungsi atau global.

  // global scope
var nama = 'zaid';


  if (true) {
    // block scope
    var nama = 'diaz';
  }
 
  // global scope
  console.log(nama); // diaz

Disinilah masalahnya, berdasarkan kode diatas kita sudah mendeklarasikan variabel nama. Jika kita secara sadar mau mendeklarasikan ulang variabel nama ini tidak menjadi masalah sama sekali, tetapi jika niat kita ingin membuat variabel baru bernama nama di dalam block scope sementara variabel nama tersebut sudah dideklarasikan di global scope yang terjadi seperti contoh di atas. Itu malah mengubah nilai pada variabel sebelumnya berubah.

Jika kita telah menggunakan nama di bagian lain dari kode yang telah kita buat, ini bisa menjadi masalah dan menyebabkan bug. Itulah sebabnya let dan const hadir.

Hoisting adalah istilah yang digunakan untuk menggambarkan bagaimana konteks eksekusi bekerja di JavaScript.

Deklarasi variabel dan menggunakan var dan juga deklarasi fungsi akan diangkat (hoisting) ke atas cakupannya sebelum eksekusi kode.

Sebelum eksekusi, JavaScript akan mencari variabel var dan deklarasi fungsi terlebih dahulu, kemudian menginisialisasinya dengan undefined.

Untuk memudahkan memahaminya, kamu dapat menggunakan alat yang dapat memvisualisasikan eksekusi kode JavaScript. Agar kamu dapat melihat langkah-langkah eksekusi di JavaScript

Contoh : 

console.log(batch); // undefined
var batch = 255;

Hasil dari contoh di atas adalah undefined, dan kalian harus tahu bahwa undefined itu merupakan salah satu nilai atau tipe data. 

Lalu, mengapa JavaScript menginisialisasinya dengan nilai tersebut padahal kita tidak pernah menuliskannya. Selain itu variabel var batch = 255; juga dideklarasikan setelah console.log(batch); secara logika harusnya kita tidak bisa menggunakan variabel tersebut.

Inilah yang dimaksud dengan istilah hoisting (diangkat).

Berikut ini adalah langkah-langkah yang dilakukan JavaScript untuk mengeksekusi kode di atas: 

1. Sebelum eksekusi, angkat dan inisialisasi variabel dengan keyword var dengan nilai undefined.
2. Eksekusi console.log(batch).
3. Inisialisasi dengan nilai dari variabel tersebut.

Tidak seperti var, variabel yang dideklarasi dengan keyword let tidak dapat dideklarasi ulang.

Contoh :

let nama = 'brahmantio';
let nama = 'diaz'; // Uncaught SyntaxError: Identifier 'nama' has already been declared

Sama seperti var, variabel yang dideklarasi menggunakan let nilainya dapat diubah menggunakan tipe data yang sama ataupun tipe data yang berbeda.

let umur = 20;
umur = 'dua puluh';
console.log(umur); // dua puluh

Ini berlaku juga untuk let dan const, variabel yang dideklarasikan dengan keyword apapun di dalam fungsi tidak dapat diakses di luar fungsi.

Sama seperti var, variabel let yang di deklarasi di dalam function scope hanya bisa diakses di dalamnya, tidak dapat diakses di luar fungsi.

function myfunction() {
    // function scope
    let nama = 'diaz';
  }
 
  // global scope
  console.log(nama); // Uncaught ReferenceError: nama is not defined

Let menyelesaikan masalah block scope yang terjadi pada variabel var. Variabel let yang di deklarasikan di dalam block scope hanya bisa digunakan di dalamnya, tidak bisa digunakan di luar. 

Contoh :

  // global scope
let nama = 'zaid';


  if (true) {
    // block scope
    let nama = 'diaz';
    console.log(nama); // diaz 
  }
 
  // global scope
  console.log(nama); // zaid

Contoh di atas adalah contoh yang mirip dengan contoh pada variabel var tadi. Tapi console.log(nama) menghasilkan hasil yang berbeda. Karena variabel nama yang berada di block scope hanya dapat digunakan di dalam block scope.

Variabel let tidak diangkat (hoisting) seperti var, jadi kita tidak bisa mengakses variabel sebelum deklarasi.

console.log(nama); // Uncaught ReferenceError: Cannot access 'nama' before initialization
let nama = 'reza';

Kita tidak bisa mendeklarasikan ulang variabel const.

const nama = 'brahmantio';
const nama = 'diaz'; // Uncaught SyntaxError: Identifier 'nama' has already been declared

Nilai variabel yang dibuat menggunakan const tidak dapat diubah.

const x = 28;
x = 11; // Uncaught TypeError: Assignment to constant variable.

Namun kita bisa mengubah elemen yang ada di dalam array:

const siswa = ['supri', 'yoga', 'rizky'];
siswa[0] = 'diaz';
console.log(siswa); // ["diaz", "yoga", "rizky"]

Begitu juga dengan object :

const trainee = {
  nama: 'diaz',
  umur: 21,
};
trainee.umur = 22;
console.log(trainee); // {nama: "diaz", umur: 22}

Sama seperti let, variabel const yang dideklarasikan di dalam function scope hanya bisa diakses di dalamnya, tidak bisa diakses di luar.

function myfunction() {
    // function scope
    const nama = 'diaz';
  }
 
  // global scope
  console.log(nama); // Uncaught ReferenceError: nama is not defined

Sama seperti let, variabel const yang dideklarasikan di dalam block scope hanya bisa diakses di dalamnya, tidak bisa diakses di luar.

const nama = 'zaid';


  if (true) {
    // block scope
    const nama = 'diaz';
    console.log(nama); // diaz 
  }
 
  // global scope
  console.log(nama); // zaid

Sama seperti let, variabel const yang dideklarasikan di dalam block scope hanya bisa diakses di dalamnya, tidak bisa diakses di luar.

const nama = 'zaid';


  if (true) {
    // block scope
    const nama = 'diaz';
    console.log(nama); // diaz 
  }
 
  // global scope
  console.log(nama); // zaid