Περιοχή ορατότητας μεταβλητών σε if-else στην JavaScript

Ας υποθέσουμε για απλότητα ότι έχουμε μια συνθήκη που εκτελείται πάντα:

javascriptif (true) {
  
}

Ας εξετάσουμε τον ακόλουθο κώδικα:

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

console.log(res);

Όπως βλέπετε, στη μεταβλητή res θα πρέπει να καταχωριστεί η τιμή '!'. Ωστόσο, αν εκτελέσετε αυτόν τον κώδικα, θα εμφανιστεί ένα σφάλμα στην κονσόλα!

Το γεγονός είναι ότι οι μεταβλητές που δηλώνονται μέσα σε αγκύλες, είναι ορατές μόνο μέσα σε αυτές τις αγκύλες και δεν είναι ορατές έξω. Επιστημονικά εδώ μιλάμε για την περιοχή ορατότητας των μεταβλητών.

Μπορούμε να πούμε ότι η περιοχή ορατότητας των μεταβλητών που δηλώνονται μέσα σε αγκύλες είναι μόνο αυτές οι αγκύλες. Ωστόσο, εάν μια μεταβλητή δηλωθεί έξω από τις αγκύλες τότε είναι ορατή και μέσα σε αυτές, και έξω:

javascriptlet res; // η μεταβλητή δηλώνεται έξω

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

console.log(res); // θα εμφανίσει '!'

Στο επόμενο παράδειγμα, στη μεταβλητή res ανάλογα με τη συνθήκη, καταγράφεται είτε η τιμή 1, είτε η τιμή 2:

javascriptlet num = 5;

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

console.log(res);

Ωστόσο, αν εκτελέσετε αυτόν τον κώδικα, στην κονσόλα θα εμφανιστεί σφάλμα. Όπως πλέον καταλαβαίνετε, όλο το θέμα είναι στην ορατότητα των μεταβλητών. Για την επίλυση του προβλήματος ας δηλώσουμε τη μεταβλητή έξω από τη συνθήκη:

javascriptlet test = true;
let res; // δηλώνουμε τη μεταβλητή έξω από τη συνθήκη

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

console.log(res); // θα εμφανίσει 1

javascriptlet age = 17;

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

console.log(adult);