Apa itu Hoisting ?

Teman-teman tau apa itu hoisting ? Hoisting ini penting untuk diketahui, karena banyak developer yang belum paham apa itu hoisting, dan ini akan menyebabkan terjadinya bug pada kode yang teman-teman buat. Langsung aja penjelasan menggunakan contoh-contoh.

contoh 1:

    x = 5; // assign 5 ke x

    elem = document.getElementById("demo"); // mencari elemen
    elem.innerHTML = x;                     // Display x pada elemen

    var x ; // deklarasi x

contoh 2:

    var x; // deklarasi x
    x = 5; // Assign 5 ke x

    elem = document.getElementById("demo"); // Find an element
    elem.innerHTML = x;                     // Display x in the element

contoh 1 dan contoh 2 akan meng-output yang sama, mengapa ? karena adanya hoisting.

Hoisting merupakan aturan dalam javascript yang seolah- olah memindahkan semua deklarasi ke bagian paling atas scope ( bagian paling atas dari kode atau fungsi).

Contoh 1 akan dibaca oleh komputer seperti contoh 2. Walaupun pada contoh 1 deklarasi var x ada di bagian bawah kode, tetapi “komputer” seolah memindahkah deklarasi tersebut ke bagian atas kode (seperti contoh 2)

contoh lain, contoh 3 :

    catName("Chloe");

    function catName(name) {
      console.log("My cat's name is " + name);
    }
    /*
    The result of the code above is: "My cat's name is Chloe"
    */

contoh 4:

    function catName(name) {
      console.log("My cat's name is " + name);
    }

    catName("Tigger");
    /*
    The result of the code above is: "My cat's name is Tigger"
    */

begitu juga dengan deklarasi sebuah fungsi (pada contoh 3), fungsi tersebut akan dibawa ke bagian atas kode, sehingga komputer akan memahaminya seperti contoh 4.

Pada contoh 3, meskipun kita panggil fungsi catName sebelum fungsi tersebut dituliskan, kodenya tetap berjalan dengan baik. Hal ini dikarenakan adanya Hoisting.

    num = 6;
    num + 7;
    var num;
    //kode tetap berjalan selama num dideklarasikan

Perlu dicatat, tidak seperti deklarasi, javascript tidak melakukan hoisting pada inisialisasi (initialisazion).

    var x = 1; // Initialize x
    console.log(x + " " + y); // '1 undefined'
    var y = 2; // Initialize y


    // komputer akan melihat kode diatas seolah seperti ini:
    var x = 1; // Initialize x
    var y; // Declare y
    console.log(x + " " + y); // '1 undefined'
    y = 2; // Initialize y

HIKMAH HOISTING ?

Dengan kita mengetahui bahavior (aturan) JavaScript ini, kita jadi perlu lebih berhati-hati dalam mendeklarasikan Variabel. Untuk menghindari adanya bugs, sangat disarankan untuk selalu mendeklarasikan variabel di awal kode.

contoh :

    var global1, global2 global3 ; // deklarasikan global variabel dahulu,

    global1 = $("#kode");
    ...
    ... // gunakan variabel-variabel yang telah dideklarasikan kemudian
    ...

    function filter() {
            var input, filter, a, i; // lokal variabel
            var b = [];
            input = document.getElementById("searchInput");
            filter = input.value.toUpperCase();
            ...
            ...
            ...
    }

NB: Pengertian hoisting diatas sebenarnya kurang tepat, makanya saya menambahkan kata2 "seolah-olah", untuk memperbudah pemahaman saja.

referensi : <a href=' https://www.w3schools.com/js/js_hoisting.asp '> https://www.w3schools.com/js/js_hoisting.asp </a> <a href=' https://developer.mozilla.org/en-US/docs/Glossary/Hoisting '> https://developer.mozilla.org/en-US/docs/Glossary/Hoisting </a>

oh ya, bagi yang belum kenal sama saya, bisa kenalan dlu. bisa add fb saya disini <a href=' https://www.facebook.com/yudhatamadanang '> https://www.facebook.com/yudhatamadanang </a>