JavaScript

JAVASCRIPTIIN LIITTYVÄÄ KOULUTUSTA VUONNA 2025!

Kurssit saatavilla kautta Suomen. Tule ja varaa oma koulutustapahtumasi heti! Koulutuksen järjestää asiantuntijasi Koulutus- ja konsultointipalvelu KK Mediat.

JavaScriptin muuttujat (let, var, const) ja niiden näkyvyysalueet

Muuttujalla tarkoitetaan muistiin tallennettavaa väliaikaista tietoa. Esimerkkejä tällaisista tiedoista ovat numeroarvot, loogiset arvot ja merkkijonot. Näiden lisäksi JavaScript mahdollistaa myös nk. null-arvojen ja taulukkomuuttujien luomisen.

JavaScriptin muuttujien hallinta on kehittynyt huomattavasti ES6:n (ECMAScript 2015) myötä. Tässä artikkelissa käymme läpi eri tavat muuttujien määrittämiseksi sekä miten muuttujien näkyvyys (scope) sekä elinkaari määräytyvät.

Muuttujan nimeäminen

Muuttujien nimeämisessä voi käyttää kirjaimia (skandit ovat kiellettyjä), numeroita ja alaviivaa. Muuttujan nimen on aina alettava joko kirjaimella tai alaviivalla. JavaScriptissä isot ja pienet kirjaimet muuttujan nimessä tulkitaan eri merkeiksi.

Muuttujan nimeksi ei saa myöskään antaa varattua sanaa. Varattuja sanoja ovat mm. ohjausrakenteet, osoittimien nimet ja muut JavaScriptin rakenteessa ja syntaksissa käytetyt termit.

Muuttujan määrittäminen

Muuttujan voi määrittää kolmella eri rakenteella: 


var muuttuja1; 
let muuttuja2;
const MUUTTUJA3 = arvo;

Esimerkiksi: 


var a; 
let b;
const c = 5; 

b = 2+2;
a = c*b;

Muuttujan tietotyyppi

JavaScriptissä devaajan ei tarvitse itse määritellä tietotyyppejä, sillä JavaScript hoitaa itse tyyppien tunnistamisen. Tästä syystä myös varhaisimman muuttujatyypin määrittely tapahtuu termillä var - variant (muuttuva).

Periaatteena kuitenkin pidetään seuraavia:

Muuttujan näkyvyysalue

JavaScriptissa muuttujan näkyvyysalue (scope) määrittää, missä osassa koodia muuttujaa voidaan käyttää. Muuttujan näkyvyysalue voi olla joko:

Ja kuten edellisessä opasartikkelin osassa kävimme läpi, lohkon määrittävät aaltosulkeet {}.

Paikalliset muuttujat

Sekä let että const rakenteella määritetyt muuttujat ovat aina paikallisesti määriteltyjä. Eli jos edellä mainituilla termeillä määritellään muuttuja if-lohkon sisällä, se ei näy kyseisen lohkon ulkopuolelle. 


function test() {
    let localVar = "Paikallinen";
    if (true) {
        let blockVar = "Paikallinen";
        console.log(localVar); // Toimii
    }
    console.log(blockVar); // Virhe! blockVar ei ole näkyvissä tässä kohden  
}
test();

Sen sijaan var rakenteella määritetyt paikalliset muuttujat ovat näkyvissä koko sisältävän funktion laajuudessa. Tältä kohden käytös poikkeaa siis huomattavasti let ja const määreillä luoduista muuttujista. Vaikka tätä käytöstä voidaan joskus haluta, se voi myös aiheuttaa merkittäviä ongelmia, jos devaaja ei tiedosta eri tavalla luotujen muuttujien eroja. 


function test() {
    var localVar = "Paikallinen";
    if (true) {
        var blockVar = "Paikallinen";
        console.log(localVar); // Toimii
    }
    console.log(blockVar); // Toimii, koska muuttuja on määritelty var-rakenteella 
}
test();

Globaalit muuttujat

Jos muuttuja määritellään kaikkien lohkorakenteiden ulkopuolella, tulee siitä globaali muuttuja. Globaali muuttuja on käytettävissä minkä tahansa samasta lähteestä olevan skriptin kautta - vaikka skripti olisi eri JS-tiedostosta.

Myös globaali var-määreellä luotu muuttuja käyttäytyy eri tavalla kuin globaali muuttuja, joka on luotu let ja const rakenteilla.

JavaScript automaattisesti nostaa (nk. hoisting) var-määreellä luodut globaalit muuttujamäärittelyt suoritettavan JavaScriptin alkuun, riippumatta millä rivillä ne on todellisuudessa määritelty. Tämä tarkoittaa,, että globaaliin muuttujaan voidaan viitata vaikka sitä ei olisi vielä määritelty. Esimerkiksi: 


function test() {
    console.log(globalVar); // Toimii, koska globalVar on var-rakenteella määritelty globaali muuttuja
}
test();
var globalVar = "Globaali arvo";

Sen sijaan let ja const määreillä luodut muuttujat on fyysisesti määriteltävä ennen kuin muuttujaa kutsutaan: 


let globalVar = "Globaali arvo";
function test() {
    console.log(globalVar); // Toimii, koska globalVar on globaali muuttuja
}
test();

Artikkelin tiedot

Otsikko: JavaScriptin muuttujat (let, var, const) ja niiden näkyvyysalueet

Kuvaus: Opi JavaScriptin muuttujien määrittely let, var ja const rakenteilla. Hallitse muuttujien käyttö ja näkyvyysalueet (scope).

Julkaisija: Koulutus- ja konsultointipalvelu KK Mediat

Viimeksi päivitetty: