Muuttujien näkyvyysalue if-else -lauseissa JavaScriptissä

Oletetaan yksinkertaisuuden vuoksi, että meillä on aina toteutuva ehto:

javascriptif (true) {
  
}

Tarkastellaan seuraavaa koodia:

javascriptif (true) {
  let res = '!';
}

console.log(res);

Kuten näet, muuttujaan res pitäisi tallentua arvo '!'. Kuitenkin, jos suoritat tämän koodin, konsoliin tulostuu virhe!

Asia on siinä, että muuttujat, jotka on määritelty aaltosulkeiden sisällä, ovat näkyvissä vain niiden sisällä, eivätkä näy ulkopuolella. Tieteellisesti ilmaisten kyse on muuttujien näkyvyysalueesta.

Voidaan sanoa, että aaltosulkeiden sisällä määriteltyjen muuttujien näkyvyysalueena ovat vain nuo aaltosulkeet. Kuitenkin, jos muuttuja on määritelty aaltosulkeiden ulkopuolella, se on näkyvissä sekä niiden sisällä että ulkopuolella:

javascriptlet res; // muuttuja määritelty ulkopuolella

if (true) {
  res = '!';
}

console.log(res); // tulostaa '!'

Seuraavassa esimerkissä muuttujaan res ehdosta riippuen tallennetaan joko arvo 1 tai arvo 2:

javascriptlet num = 5;

if (num >= 0) {
  let res = 1;
} else {
  let res = 2;
}

console.log(res);

Kuitenkin, jos suoritat tämän koodin, konsoliin tulostuu virhe. Kuten nyt jo ymmärrät, kyse on muuttujien näkyvyydestä. Ongelman ratkaisemiseksi määritellään muuttuja ehdon ulkopuolelle:

javascriptlet test = true;
let res; // määritellään muuttuja ehdon ulkopuolelle

if (test) {
  res = 1;
} else {
  res = 2;
}

console.log(res); // tulostaa 1

javascriptlet age = 17;

if (age >= 18) {
  let adult = true;
} else {
  let adult = false;
}

console.log(adult);