0
Miten nosto hoisting toimii JavaScriptissä

Olli Perikanta

Julkaistu 6.1.2024

Miten nosto (’hoisting’) toimii JavaScriptissä?


JavaScriptissa ”hoisting” viittaa siihen, miten muuttujat ja funktiot nostetaan niiden määrittelykohdasta koodissa ennen varsinaista suoritusta. Tämä tarkoittaa, että voit käyttää muuttujia tai kutsua funktioita ennen kuin ne on virallisesti määritelty koodissa.

Esimerkiksi:

console.log(x); // tulostaa "undefined"
var x = 5;
console.log(x); // tulostaa "5"

Vaikka ensimmäisellä rivillä console.log(x) kutsutaan ennen var x = 5; määrittelyä, JavaScriptin hoistingin ansiosta koodi toimii ja x tulostetaan ensimmäisellä rivillä ”undefined”, koska muuttuja on jo ”nostettu” ennen varsinaista määrittelyä, mutta sillä ei ole vielä arvoa. Toisella rivillä x on määritelty ja se tulostetaan nyt ”5”.

Hoisting vaikuttaa myös funktioihin:

hoistedFunction(); // kutsutaan ennen määrittelyä

function hoistedFunction() {
  console.log("Funktio on nyt määritelty");
}

Tässä tapauksessa funktio voidaan kutsua ennen sen virallista määrittelyä, koska funktio ”nousee ylös” ennen suoritusta.

On kuitenkin hyvä huomata, että hoisting ei siirrä itse arvoja ylös, vaan ainoastaan määrittelyt. Tämä tarkoittaa, että vaikka muuttujan määrittely voi nousta ylös, sen arvo ei ole vielä asetettu, kun sitä käytetään ennen määrittelyä.

Senior Frontend kehittäjä, joka on erikoistunut WordPressin koodaamiseen ja räätälöityjen ratkaisujen tekemiseen.

Kommentit

Näyttää siltä, että sinulla on mahdollisuus olla ensimmäinen kommentoija! Jäikö jotain kysyttävää artikkelista tai haluatko antaa palautetta? Jätä kommentti ja aloita kekustelu.

Jätä kommentti

Kommenttikäytäntö: Kommentointi on tervetullutta ja arvostamme aikaa, jonka lukijat käyttävät ideoiden jakamiseen ja palautteen antamiseen. Kaikki kommentit kuitenkin valvotaan manuaalisesti ja roskapostiksi tai yksinomaan myynninedistämistarkoituksessa pidetyt kommentit poistetaan.