8.3 Η έννοια της “εμβέλειας” (scope) στη JavaScript

Η έννοια της “εμβέλειας” (scope) στη JavaScript αναφέρεται στην περιοχή όπου ορίζονται μεταβλητές και πού μπορούν να προσπελαστούν από τον κώδικα. Οι μεταβλητές σε JavaScript έχουν περιορισμένη πρόσβαση σε διάφορα τμήματα του κώδικα, ανάλογα με το πού ορίζονται.

Υπάρχουν δύο βασικά επίπεδα εμβέλειας στη JavaScript:

1. Εμβέλεια των Συναρτήσεων (Function Scope): Οι μεταβλητές που ορίζονται μέσα σε μια συνάρτηση είναι ορατές μόνο μέσα στη συνάρτηση. Δεν μπορούν να προσπελαστούν έξω από αυτήν.
2. Εμβέλεια των Μπλοκ (Block Scope): Από την εισαγωγή του ES6 (ECMAScript 2015), με τη χρήση των let και const, ορισμένες μεταβλητές μπορούν να έχουν εμβέλεια μέσα σε ένα μπλοκ (όπως ένας βρόχος ή ένα μπλοκ if). Οι μεταβλητές που ορίζονται με var έχουν εμβέλεια στην πλησιέστερη συνάρτηση, ανεξάρτητα από το μπλοκ.

Παράδειγμα εμβέλειας των συναρτήσεων:

function example() {
  var x = 10; // Ορίζουμε τη μεταβλητή x μέσα στη συνάρτηση
  console.log(x); // Εκτυπώνει 10
}

console.log(x); // Θα προκαλέσει σφάλμα ReferenceError γιατί η x δεν είναι ορατή εδώ

Παράδειγμα εμβέλειας μπλοκ (ES6):

if (true) {
  let y = 20; // Η y έχει εμβέλεια μόνο μέσα σε αυτό το μπλοκ
  const z = 30; // Η z έχει εμβέλεια μόνο μέσα σε αυτό το μπλοκ
}

console.log(y); // Θα προκαλέσει σφάλμα ReferenceError γιατί η y δεν είναι ορατή εδώ
console.log(z); // Θα προκαλέσει σφάλμα ReferenceError γιατί η z δεν είναι ορατή εδώ

Σημείωση: Οι μεταβλητές που ορίζονται με var έχουν εμβέλεια μόνο μέσα στην πλησιέστερη συνάρτηση, και δεν έχουν εμβέλεια μπλοκ. Χρησιμοποιώντας let και const, μπορείτε να επιτύχετε εμβέλεια μπλοκ.

Η εμβέλεια μπλοκ αναφέρεται στο εύρος ισχύος μιας μεταβλητής ή μιας σταθεράς που ορίζεται μέσα σε ένα μπλοκ κώδικα. Ένα μπλοκ μπορεί να είναι μια δήλωση if, ένας βρόχος for, ένα μπλοκ while, ένα μπλοκ συνάρτησης, κ.λπ.

[adinserter block=”2″]

Οι μεταβλητές που ορίζονται με τον τύπο δήλωσης let και οι σταθερές που ορίζονται με τον τύπο δήλωσης const έχουν εμβέλεια μπλοκ. Αυτό σημαίνει ότι αυτές οι μεταβλητές ή σταθερές είναι ορατές μόνο μέσα στο μπλοκ όπου ορίζονται, καθώς και σε υπο-μπλοκ που βρίσκονται μέσα σε αυτό το μπλοκ.

Ένα παράδειγμα με εμβέλεια μπλοκ:

if (true) {
  let blockScopedVar = "I am inside a block";
  const anotherBlockScopedVar = "I am also inside a block";

  console.log(blockScopedVar); // Εμφανίζει "I am inside a block"
  console.log(anotherBlockScopedVar); // Εμφανίζει "I am also inside a block"
}

console.log(blockScopedVar); // Προκαλεί σφάλμα ReferenceError, γιατί blockScopedVar δεν είναι ορατή εδώ
console.log(anotherBlockScopedVar); // Προκαλεί σφάλμα ReferenceError, γιατί anotherBlockScopedVar δεν είναι ορατή εδώ

Σε αυτό το παράδειγμα, η μεταβλητή blockScopedVar και η σταθερά anotherBlockScopedVar έχουν εμβέλεια μόνο μέσα στο μπλοκ if, και δεν είναι ορατές έξω από αυτό.

Η εμβέλεια μπλοκ βοηθά στη μείωση του κινδύνου συγκρούσεων ονομάτων μεταβλητών, καθώς οι μεταβλητές που ορίζονται μέσα σε διαφορετικά μπλοκ δεν μπορούν να προσπελαστούν μεταξύ τους.

Η τοπική εμβέλεια (local scope) αναφέρεται στην περιοχή όπου μια μεταβλητή είναι ορατή και προσπελάσιμη. Οι μεταβλητές που ορίζονται μέσα σε μια συνάρτηση έχουν τοπική εμβέλεια, πράγμα που σημαίνει ότι είναι ορατές μόνο μέσα στη συνάρτηση όπου ορίζονται.

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

Παράδειγμα με τοπική εμβέλεια:

function greet() {
  const message = "Hello, world!"; // Η μεταβλητή message έχει τοπική εμβέλεια μέσα στη συνάρτηση
  console.log(message);
}

greet(); // Εμφανίζει "Hello, world!"

console.log(message); // Προκαλεί σφάλμα ReferenceError, γιατί η message δεν είναι ορατή εδώ

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

Η τοπική εμβέλεια βοηθά στη διατήρηση του κώδικα πιο οργανωμένου και αποφεύγει συγκρούσεις ονομάτων μεταβλητών μεταξύ διαφορετικών μερών του κώδικα.

Η εμβέλεια συνάρτησης (function scope) αναφέρεται στην περιοχή όπου μια μεταβλητή είναι ορατή και προσπελάσιμη μέσα σε μια συνάρτηση. Όταν μια μεταβλητή ορίζεται μέσα σε μια συνάρτηση, τότε έχει εμβέλεια μόνο μέσα στο σώμα της συνάρτησης.

Αυτό σημαίνει ότι η μεταβλητή είναι ορατή μόνο μέσα στη συνάρτηση και δεν μπορεί να προσπελαστεί έξω από αυτήν.

Παράδειγμα με εμβέλεια συνάρτησης:

function calculateSquare(num) {
  const square = num * num; // Η μεταβλητή square έχει εμβέλεια συνάρτησης
  return square;
}

console.log(calculateSquare(5)); // Εμφανίζει 25

console.log(square); // Προκαλεί σφάλμα ReferenceError, γιατί η square δεν είναι ορατή εδώ

Στο παράδειγμα παραπάνω, η μεταβλητή square έχει εμβέλεια συνάρτησης, οπότε είναι ορατή μόνο μέσα στη συνάρτηση calculateSquare(). Δεν μπορεί να προσπελαστεί έξω από το σώμα της συνάρτησης.

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

[adinserter block=”3″]

Οι καθολικές μεταβλητές στη JavaScript αναφέρονται σε μεταβλητές που ορίζονται έξω από το σώμα μιας συνάρτησης ή εκτός του τρέχοντος block scope. Αυτές οι μεταβλητές είναι προσπελάσιμες από οπουδήποτε στον κώδικά σας.

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

Παράδειγμα με καθολική μεταβλητή:

// Καθολική μεταβλητή, ορατή από οπουδήποτε
const globalVar = "I am global";

function foo() {
  console.log(globalVar); // Μπορούμε να προσπελάσουμε την καθολική μεταβλητή εδώ
}

foo();

console.log(globalVar); // Εξακολουθούμε να μπορούμε να προσπελάσουμε την καθολική μεταβλητή εδώ

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

Στη JavaScript, ο όρος “global scope” αναφέρεται στην εμβέλεια μιας μεταβλητής ή μιας συνάρτησης που έχει οριστεί στο πιο υψηλό επίπεδο του κώδικα, δηλαδή έξω από οποιαδήποτε συνάρτηση ή block.

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

Παράδειγμα με global scope:

// Μεταβλητή με global scope
const globalVariable = "I am global";

function foo() {
  console.log(globalVariable); // Μπορούμε να προσπελάσουμε την global μεταβλητή εδώ
}

foo();

console.log(globalVariable); // Εξακολουθούμε να μπορούμε να προσπελάσουμε την global μεταβλητή εδώ

Η χρήση global scope μπορεί να είναι χρήσιμη για μεταβλητές ή συναρτήσεις που χρειάζεστε να είναι προσπελάσιμες από πολλά μέρη του κώδικα. Ωστόσο, πρέπει να χρησιμοποιείται με προσοχή, καθώς η υπερβολική χρήση global μεταβλητών μπορεί να οδηγήσει σε περίπλοκο και δυσνόητο κώδικα, καθώς και να δημιουργήσει περιβάλλοντα με περισσότερες πιθανότητες για συγκρούσεις και σφάλματα.

Στη JavaScript, τα αντικείμενα και οι συναρτήσεις είναι επίσης μεταβλητές. Αυτό σημαίνει ότι μπορείτε να τα αποθηκεύσετε σε μεταβλητές, να τα περάσετε σε συναρτήσεις, να τα επιστρέψετε από συναρτήσεις και γενικά να τα χρησιμοποιήσετε όπως και άλλες μεταβλητές.

Παραδείγματα:

1. Αποθήκευση συνάρτησης σε μεταβλητή:

const myFunction = function() {
  console.log("This is a function stored in a variable.");
};

myFunction(); // Κλήση της συνάρτησης μέσω της μεταβλητής

2. Αποθήκευση αντικειμένου σε μεταβλητή:

const person = {
  firstName: "John",
  lastName: "Doe",
  age: 30
};

console.log(person.firstName); // Πρόσβαση στην ιδιότητα "firstName" του αντικειμένου

3. Περάστε μια συνάρτηση ως παράμετρο σε μια άλλη συνάρτηση:

function greet(name) {
  console.log(`Hello, ${name}!`);
}

function sayHello(greetingFunction) {
  greetingFunction("Alice");
}

sayHello(greet); // Καλεί την greet συνάρτηση μέσω της sayHello συνάρτησης

Αυτή η ιδιότητα της JavaScript να μεταχειρίζεται αντικείμενα και συναρτήσεις ως μεταβλητές είναι βασική για τη λειτουργία της γλώσσας και τη δυνατότητα να δημιουργείτε πολύπλοκο και ευέλικτο κώδικα.

[adinserter block=”4″]

Αν αναθέσετε μια τιμή σε μια μεταβλητή που δεν έχει δηλωθεί, αυτή η μεταβλητή θα γίνει αυτόματα μια global μεταβλητή, δηλαδή θα είναι προσβάσιμη από οποιοδήποτε μέρος του κώδικα, στο ίδιο script ή αρχείο. Αυτό μπορεί να έχει αναπάντεχες συνέπειες και πρέπει να χρησιμοποιείται με προσοχή.

Παράδειγμα:

function myFunction() {
  newVariable = "I am automatically global"; // Η newVariable δεν έχει δηλωθεί με "var", "let", ή "const"
}

myFunction(); // Καλεί την συνάρτηση

console.log(newVariable); // Εκτυπώνει "I am automatically global"

Στο παραπάνω παράδειγμα, η μεταβλητή newVariable δεν έχει δηλωθεί με την χρήση των var, let ή const. Ωστόσο, καθώς της έχει αναθεθεί μια τιμή μέσα στη συνάρτηση, γίνεται αυτόματα global. Αυτό σημαίνει ότι μπορεί να προσπελαστεί από οποιοδήποτε μέρος του κώδικα που ακολουθεί στο ίδιο script ή αρχείο.

Είναι σημαντικό να δηλώνετε τις μεταβλητές με τα σωστά keywords (var, let, ή const) για να αποφύγετε ανεπιθύμητες παρεμβολές και συγκρούσεις στον κώδικά σας.

Όλοι οι σύγχρονοι φυλλομετρητές υποστηρίζουν την εκτέλεση της JavaScript σε “Αυστηρή Λειτουργία” (“Strict Mode”).

Στη JavaScript, το παγκόσμιο πεδίο (global scope) αναφέρεται στο περιβάλλον της JavaScript.

Στο HTML, το παγκόσμιο πεδίο (global scope) είναι το αντικείμενο window.

Η διάρκεια ζωής μιας μεταβλητής στη JavaScript ξεκινά όταν δηλωθεί.

Οι μεταβλητές των συναρτήσεων (τοπικές) διαγράφονται όταν ολοκληρωθεί η εκτέλεση της συνάρτησης.

Σε έναν φυλλομετρητή ιστού, οι παγκόσμιες μεταβλητές διαγράφονται όταν κλείσετε το παράθυρο (ή την καρτέλα) του φυλλομετρητή.