JavaScript Hoisting – Keanehan Pada JavaScript

Salah satu hal yang membuat saya aneh (bukan artian negative) pada JavaScript adalah kita dapat menggunakan variable dan function yang belum di deklarasikan diawal, hal ini biasa disebut dengan Hoisting , coba kita perhatikan kode dibawah ini :

sayHi(); // Output : Hi there!

function sayHi() {
   console.log('Hi there!');
}

Walaupun function sayHi() dipanggil lebih dahulu dibanding dengan pendeklarasiannya, namun kode tersebut diatas akan berjalan normal, dan akan mengeluarkan output “Hi there!” , hal ini juga sama dengan :

function sayHi() {
   console.log('Hi there!');
}

sayHi(); // Output : Hi there!

Hal ini terjadi karena JavaScript masuk kedalam compiled language , oleh karena itu saat kode JavaScript yang sedang diproses, pada iterasi pertama semua variable dan function akan dideklarasikan di awal, sebelum kode di ekseskusi satu persatu. Hal ini mirip seperti saat kita mendeklarasikan variable dan function di awal.

Only declarations are hoisted

JavaScript Hoisting hanya berlaku pada pendeklarasian saja, bukan pada inisialisasi. Jika sebuah variable dideklarasikan dan di inisialisasi setelah digunakan, maka hasilnya akan undefined , contoh :

console.log(num); // Returns undefined 

var num; 

num = 6;

Namun jika kita melakukan pendeklarasian variable setelah digunakan, dan menginisialisasi sebelum digunakan, maka itu akan mereturn value yang di inisialisasi :

num = 6;

console.log(num); // returns 6

var num;

Contoh – contoh lain untuk mendemonstrasikan hoisting :

//Example 1 - Does not hoist
var x = 1; // Initialize x
console.log(x + " " + y); // '1 undefined'
var y = 2; // Initialize y
//This will not work as JavaScript only hoists declarations

//Example 2 - Hoists
var num1 = 3; //Declare and initialize num1
num2 = 4; //Initialize num2
console.log(num1 + " " + num2); //'3 4'
var num2; //Declare num2 for hoisting

//Example 3 - Hoists
a = 'Cran'; //Initialize a
b = 'berry'; //Initialize b
console.log(a + "" + b); // 'Cranberry'
var a, b; //Declare both a & b for hoisting

Hal lain yang harus diperhatikan adalah pendeklarasian sebuah Class tidak dapat di hoisting, kita tidak dapat menggunakan sebuah Class sebelum di deklarasikan :

var john = new Person('John', 'Doe'); //ReferenceError: Person is not defined

class Person {
    constructor(name, surname) {
        this.name = name;
        this.surname = surname;
    }
}

// This good!!
var jane = new Person('Jane', 'Doe'); //No problems here

Jika kalian memiliki masukan, komentar, atau ingin diskusi lebih lanjut, silahkan komentar ya. Terimakasih.