JavaScript - Hoisting


Šta je dizanje (hoisting)

U JavaScript-u se sve deklaracije varijabli i funkcija premještaju ili podižu na vrh trenutnog opsega, bez obzira na to gdje su definisane. Ovo je zadano ponašanje JavaScript tumača koje se naziva hoisting. U sljedećim dijelovima detaljnije ćemo pogledati kako to zapravo funkcionira.



Podizanje funkcije

Funkcije koje su definisane pomoću deklaracije funkcije automatski se podižu. To znači da ih se može pozvati prije nego što budu definisani. Pogledajmo sljedeći primjer da biste shvatili kako ovo funkcioniše:

// Pozivanje funkcije prije deklarisanja
sayHello(); // Ispisuje: Volim da učim uz IT TUTORIJALE!

function sayHello() {
    alert("Volim da učim uz IT TUTORIJALE!");
}
Pogledajmo kako koristiti primjer u praksi:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>JavaScript Funkcija Hoisting</title>
</head>
<body>
    <script>
    // Pozivanje funkcije prije deklarisanja
    sayHello(); // Ispisuje: Ispisuje: Volim da učim uz IT TUTORIJALE!
    
    function sayHello() {
        document.write("Volim da učim uz IT TUTORIJALE!");
    }
    </script>
</body>
</html>

Kao što vidite, pozvali smo funkciju sayHello() prije nego što je definisana, ali kod i dalje radi. To je zato što je deklaracija funkcije automatski postavljena na vrh iza scene.



Promjenjivo podizanje (Hoisting)

Slično tome, deklaracije varijabli takođe se automatski podižu na vrh svog trenutnog opsega. To znači da će se varijabla, ako je deklarisana unutar funkcionalnog bloka, premjestiti na vrh funkcije, ali ako se deklariše izvan bilo koje funkcije, premjestiće se na vrh skripte i postaće globalno dostupna. Pogledajmo sljedeći primjer da biste vidjeli kako ovo funkcionira:

str = "IT TUTORIJALI!";
alert(str); // Ispisuje: IT TUTORIJALI!
var str;
Pogledajmo kako koristiti primjer u praksi:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>JavaScript Korištenje varijabli prije deklarisanja</title>
</head>
<body>
    <script>
    str = "IT TUTORIJALI!";
    document.write(str); // Ispisuje: IT TUTORIJALI!
    var str;
    </script>
</body>
</html>

Međutim, JavaScript samo podiže deklaracije, a ne inicijalizacije. To znači da ako je varijabla deklarisana i inicijalizirana nakon upotrebe, vrijednost će biti nedefinisana (undefined). Na primjer:

alert(str); // Ispisuje: undefined
var str;
str = "IT TUTORIJALI!";

Evo još jednog primjera koji pokazuje promjenjivo ponašanje JavaScript-a:

var i = 1; // Deklariše i inicijalizira i
alert(i + ", " + j); // Ispisuje: 1, undefined
var j = 2; // Deklariše i inicijalizira j

var x = 5; // Deklariše i inicijalizira x
var y; // Deklariše y
alert(x + ", " + y); // Ispisuje: 5, undefined
y = 10; // Inicijalizira y

var a = 3; // Deklariše i inicijalizira a
b = 6; // Inicijalizira b
alert(a + ", " + b); // Ispisuje: 3, 6
var b; // Deklariše b

var u = 4; // Deklariše i inicijalizira u
alert(u + ", " + v); // Ispisuje: 4, undefined
var v; // Deklariše v
v = 8; // Inicijalizira v
Pogledajmo kako koristiti primjer u praksi:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>JavaScript Varijable Hoisting</title>
</head>
<body>
    <script>
    var i = 1; // Deklariše i inicijalizira i
    document.write(i + ", " + j + "<br>"); // Ispisuje: 1, undefined
    var j = 2; // Deklariše i inicijalizira j
    
    var x = 5; // Deklariše i inicijalizira x
    var y; // Deklariše y
    document.write(x + ", " + y + "<br>"); // Ispisuje: 5, undefined
    y = 10; // Inicijalizira y
    
    var a = 3; // Deklariše i inicijalizira a
    b = 6; // Inicijalizira b
    document.write(a + ", " + b + "<br>"); // Ispisuje: 3, 6
    var b; // Deklariše b
    
    var u = 4; // Deklariše i inicijalizira u
    document.write(u + ", " + v); // Ispisuje: 4, undefined
    var v; // Deklariše v
    v = 8; // Inicijalizira v
    </script>
</body>
</html>

Na prvi pogled varijabilna dizanja (hoisting) može izgledati pomalo zbunjujuće, ali ako pažljivo prođete kroz ove primjere, lako ćete shvatiti kako to funkcionira.