Customize Consent Preferences

We use cookies to help you navigate efficiently and perform certain functions. You will find detailed information about all cookies under each consent category below.

The cookies that are categorized as "Necessary" are stored on your browser as they are essential for enabling the basic functionalities of the site. ... 

Always Active

Necessary cookies are required to enable the basic features of this site, such as providing secure log-in or adjusting your consent preferences. These cookies do not store any personally identifiable data.

No cookies to display.

Functional cookies help perform certain functionalities like sharing the content of the website on social media platforms, collecting feedback, and other third-party features.

No cookies to display.

Analytical cookies are used to understand how visitors interact with the website. These cookies help provide information on metrics such as the number of visitors, bounce rate, traffic source, etc.

No cookies to display.

Performance cookies are used to understand and analyze the key performance indexes of the website which helps in delivering a better user experience for the visitors.

No cookies to display.

Advertisement cookies are used to provide visitors with customized advertisements based on the pages you visited previously and to analyze the effectiveness of the ad campaigns.

No cookies to display.

5.5 Η δήλωση const στους πίνακες στην JavaScript

Στη γλώσσα προγραμματισμού JavaScript, η const είναι μια δήλωση που χρησιμοποιείται για να δημιουργήσει μια σταθερή μεταβλητή με τιμή που δεν μπορεί να αλλάξει.

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

Εδώ είναι ένα παράδειγμα:

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
const fruits = ['Apple', 'Banana', 'Orange'];
fruits[0] = 'Mango'; // Επιτρέπεται
console.log(fruits); // Εμφανίζει: ['Mango', 'Banana', 'Orange']
fruits = ['Grapes', 'Watermelon']; // Απαγορεύεται
const fruits = ['Apple', 'Banana', 'Orange']; fruits[0] = 'Mango'; // Επιτρέπεται console.log(fruits); // Εμφανίζει: ['Mango', 'Banana', 'Orange'] fruits = ['Grapes', 'Watermelon']; // Απαγορεύεται
const fruits = ['Apple', 'Banana', 'Orange'];
fruits[0] = 'Mango'; // Επιτρέπεται
console.log(fruits); // Εμφανίζει: ['Mango', 'Banana', 'Orange']

fruits = ['Grapes', 'Watermelon']; // Απαγορεύεται

Στο παράδειγμα παραπάνω, ο πίνακας fruits δηλώνεται ως const, και αρχικοποιείται με μερικές τιμές φρούτων. Αν και η δήλωση const αποτρέπει την εκ νέου ανάθεση του πίνακα, επιτρέπει την τροποποίηση των μεμονωμένων τιμών του πίνακα. Στο παράδειγμα, μπορούμε να αλλάξουμε την τιμή του πρώτου στοιχείου από “Apple” σε “Mango”. Ωστόσο, προσπαθώντας να αναθέσουμε έναν ολοκαίνουργιο πίνακα στη μεταβλητή fruits θα προκαλέσει ένα σφάλμα, καθώς η const απαγορεύει την αναθεσμένη αξία.

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

Η χρήση της λέξης-κλειδιού const για τη δήλωση ενός πίνακα στη γλώσσα προγραμματισμού JavaScript μπορεί να είναι παραπλανητική. Η δήλωση const δεν καθιστά τον πίνακα αναλλοίωτο (immutable), αλλά καθιστά αναλλοίωτη την αναφορά (reference) στον πίνακα.

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

Εδώ είναι ένα παράδειγμα που επεξηγεί τη συμπεριφορά του πίνακα που δηλώνεται ως const:

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
const numbers = [1, 2, 3];
numbers[0] = 4;
console.log(numbers); // Εμφανίζει: [4, 2, 3]
numbers = [5, 6, 7]; // Απαγορεύεται
const numbers = [1, 2, 3]; numbers[0] = 4; console.log(numbers); // Εμφανίζει: [4, 2, 3] numbers = [5, 6, 7]; // Απαγορεύεται
const numbers = [1, 2, 3];
numbers[0] = 4;
console.log(numbers);  // Εμφανίζει: [4, 2, 3]

numbers = [5, 6, 7];  // Απαγορεύεται

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

[adinserter block=”2″]

Για να καταστήσετε έναν πίνακα αναλλοίωτο (immutable), πρέπει να χρησιμοποιήσετε πρόσθετες τεχνικές όπως τη χρήση της μεθόδου Object.freeze().

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

Εδώ είναι ένα παράδειγμα:

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
const numbers = [1, 2, 3];
console.log(numbers); // Εμφανίζει: [1, 2, 3]
const numbers = [1, 2, 3]; console.log(numbers); // Εμφανίζει: [1, 2, 3]
const numbers = [1, 2, 3];
console.log(numbers);  // Εμφανίζει: [1, 2, 3]

Στο παράδειγμα παραπάνω, ο πίνακας numbers δηλώνεται ως const και αμέσως εκχωρείται η τιμή [1, 2, 3] σε αυτόν κατά τη δήλωσή του. Από εκεί και πέρα, ο πίνακας δεν μπορεί να αναθεωρηθεί να αναθέσει μια διαφορετική τιμή, αλλά μπορούν να τροποποιηθούν τα στοιχεία του πίνακα.

Σημείωση: Πρέπει να σημειωθεί ότι η αρχική εκχώρηση του πίνακα που δηλώνεται ως const πρέπει να είναι μια τιμή που μπορεί να αξιολογηθεί κατά τη δήλωση. Δεν είναι δυνατό να δηλωθεί ένας const πίνακας χωρίς αρχική τιμή ή να δηλωθεί με αρχική τιμή undefined ή null.

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

Αν ένας πίνακας δηλωθεί εντός ενός block (όπως ένα block που περικλείεται από άγκιστρα {}), ο πίνακας αυτός είναι ορατός μόνο εντός του block και δεν επηρεάζει τον πίνακα που δηλώνεται έξω από το block.

Εδώ είναι ένα παράδειγμα:

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
{
const numbers = [1, 2, 3];
console.log(numbers); // Εμφανίζει: [1, 2, 3]
}
console.log(numbers); // Σφάλμα: η μεταβλητή numbers δεν έχει οριστεί
{ const numbers = [1, 2, 3]; console.log(numbers); // Εμφανίζει: [1, 2, 3] } console.log(numbers); // Σφάλμα: η μεταβλητή numbers δεν έχει οριστεί
{
  const numbers = [1, 2, 3];
  console.log(numbers);  // Εμφανίζει: [1, 2, 3]
}

console.log(numbers);  // Σφάλμα: η μεταβλητή numbers δεν έχει οριστεί

Στο παράδειγμα παραπάνω, ο πίνακας numbers δηλώνεται εντός ενός block που περικλείεται από άγκιστρα {}. Εντός του block, ο πίνακας numbers είναι ορατός και μπορεί να χρησιμοποιηθεί. Ωστόσο, μόλις βγούμε από το block, ο πίνακας numbers δεν είναι πλέον ορατός και προκαλεί ένα σφάλμα κατά την προσπάθεια εμφάνισής του.

Στην JavaScript, ένας πίνακας που δηλώνεται με τη λέξη-κλειδί var δεν έχει block scope, αλλά έχει function scope ή global scope, ανάλογα με τον τρόπο που δηλώνεται.

Όταν ένας πίνακας δηλώνεται με το var έξω από ένα block (π.χ. μέσα σε μια function), τότε ο πίνακας είναι ορατός σε ολόκληρη τη function και μπορεί να χρησιμοποιηθεί σε οποιοδήποτε μέρος της.

Εδώ είναι ένα παράδειγμα:

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
function example() {
var numbers = [1, 2, 3];
if (true) {
var x = 10; // Ορατός σε όλη την function
}
console.log(numbers); // Εμφανίζει: [1, 2, 3]
console.log(x); // Εμφανίζει: 10
}
example();
console.log(numbers); // Σφάλμα: η μεταβλητή numbers δεν είναι ορατή εδώ
console.log(x); // Σφάλμα: η μεταβλητή x δεν είναι ορατή εδώ
function example() { var numbers = [1, 2, 3]; if (true) { var x = 10; // Ορατός σε όλη την function } console.log(numbers); // Εμφανίζει: [1, 2, 3] console.log(x); // Εμφανίζει: 10 } example(); console.log(numbers); // Σφάλμα: η μεταβλητή numbers δεν είναι ορατή εδώ console.log(x); // Σφάλμα: η μεταβλητή x δεν είναι ορατή εδώ
function example() {
  var numbers = [1, 2, 3];
  if (true) {
    var x = 10; // Ορατός σε όλη την function
  }
  console.log(numbers); // Εμφανίζει: [1, 2, 3]
  console.log(x); // Εμφανίζει: 10
}

example();
console.log(numbers); // Σφάλμα: η μεταβλητή numbers δεν είναι ορατή εδώ
console.log(x); // Σφάλμα: η μεταβλητή x δεν είναι ορατή εδώ

Όπως φαίνεται στο παράδειγμα, ο πίνακας numbers και η μεταβλητή x που δηλώνονται με το var εντός της function example() είναι ορατοί σε ολόκληρη τη function, αλλά δεν είναι ορατοί έξω από αυτήν. Ωστόσο, εάν το var χρησιμοποιηθεί εκτός function (δηλαδή σε επίπεδο global scope), τότε ο πίνακας θα είναι ορατός παντού στο πρόγραμμα.

Η επανδήλωση (redeclaring) ενός πίνακα που έχει δηλωθεί με τη λέξη-κλειδί var επιτρέπεται οπουδήποτε στο πρόγραμμα. Αυτό σημαίνει ότι μπορείτε να δηλώσετε ξανά έναν πίνακα με το ίδιο όνομα χρησιμοποιώντας το var χωρίς να προκαλείτε σφάλμα.

Εδώ είναι ένα παράδειγμα:

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
var numbers = [1, 2, 3];
console.log(numbers); // Εμφανίζει: [1, 2, 3]
var numbers = [4, 5, 6];
console.log(numbers); // Εμφανίζει: [4, 5, 6]
var numbers = [1, 2, 3]; console.log(numbers); // Εμφανίζει: [1, 2, 3] var numbers = [4, 5, 6]; console.log(numbers); // Εμφανίζει: [4, 5, 6]
var numbers = [1, 2, 3];
console.log(numbers); // Εμφανίζει: [1, 2, 3]

var numbers = [4, 5, 6];
console.log(numbers); // Εμφανίζει: [4, 5, 6]

Στο παράδειγμα παραπάνω, ο πίνακας numbers δηλώνεται αρχικά με το var και εκχωρείται η τιμή [1, 2, 3]. Στη συνέχεια, δηλώνουμε ξανά τον πίνακα numbers με το var και εκχωρούμε την νέα τιμή [4, 5, 6]. Ο πίνακας επαναδηλώνεται με τη νέα τιμή και δεν προκαλεί κανένα σφάλμα.

[adinserter block=”3″]

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

Η επανδήλωση (redeclaring) ή η αναθεώρηση (reassigning) ενός πίνακα που έχει δηλωθεί με τη λέξη-κλειδί const δεν επιτρέπεται στον ίδιο scope ή τον ίδιο block. Όταν ένας πίνακας δηλώνεται με const, η αναφορά (reference) προς αυτόν τον πίνακα παραμένει σταθερή και δεν μπορεί να αναθεωρηθεί ή να επανδηλωθεί με έναν άλλο πίνακα.

Εδώ είναι ένα παράδειγμα που δείχνει πως η επανδήλωση ή η αναθεώρηση ενός πίνακα που δηλώνεται με const προκαλεί σφάλμα:

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
const numbers = [1, 2, 3];
console.log(numbers); // Εμφανίζει: [1, 2, 3]
const numbers = [4, 5, 6]; // Σφάλμα: η δήλωση επανδήλωσης δεν επιτρέπεται
console.log(numbers);
const numbers = [1, 2, 3]; console.log(numbers); // Εμφανίζει: [1, 2, 3] const numbers = [4, 5, 6]; // Σφάλμα: η δήλωση επανδήλωσης δεν επιτρέπεται console.log(numbers);
const numbers = [1, 2, 3];
console.log(numbers); // Εμφανίζει: [1, 2, 3]

const numbers = [4, 5, 6]; // Σφάλμα: η δήλωση επανδήλωσης δεν επιτρέπεται
console.log(numbers);

Στο παράδειγμα παραπάνω, ο πίνακας numbers δηλώνεται αρχικά με const και εκχωρείται η τιμή [1, 2, 3]. Αν προσπαθήσουμε να τον επανδηλώσουμε με την ίδια μεταβλητή numbers, προκαλείται σφάλμα καθώς η const απαγορεύει την επανδήλωση στο ίδιο scope. Επίσης, δεν μπορούμε να τον αναθέσουμε με έναν άλλο πίνακα μέσα στο ίδιο block.

Το const διασφαλίζει ότι η αναφορά προς τον πίνακα παραμένει αμετάβλητη και μπορείτε να τροποποιήσετε μόνο τα στοιχεία του πίνακα, αλλά όχι τον ίδιο τον πίνακα ή την αναφορά προς αυτόν.

Η επανδήλωση ή η αναθεώρηση (reassigning) ενός υπάρχοντος πίνακα που δηλώνεται με const δεν επιτρέπεται στο ίδιο scope ή το ίδιο block. Ακολουθούν τα σωστά και λανθασμένα παραδείγματα:

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
const cars = ["Volvo", "BMW"]; // Επιτρέπεται
const cars = ["Volvo", "BMW"]; // Μη επιτρεπτό - η επανδήλωση δεν επιτρέπεται
var cars = ["Volvo", "BMW"]; // Μη επιτρεπτό - η επανδήλωση δεν επιτρέπεται
cars = ["Volvo", "BMW"]; // Μη επιτρεπτό - η επανδήλωση δεν επιτρέπεται
{
const cars = ["Volvo", "BMW"]; // Επιτρέπεται
const cars = ["Volvo", "BMW"]; // Μη επιτρεπτό - η επανδήλωση δεν επιτρέπεται
var cars = ["Volvo", "BMW"]; // Μη επιτρεπτό - η επανδήλωση δεν επιτρέπεται
cars = ["Volvo", "BMW"]; // Μη επιτρεπτό - η επανδήλωση δεν επιτρέπεται
}
const cars = ["Volvo", "BMW"]; // Επιτρέπεται const cars = ["Volvo", "BMW"]; // Μη επιτρεπτό - η επανδήλωση δεν επιτρέπεται var cars = ["Volvo", "BMW"]; // Μη επιτρεπτό - η επανδήλωση δεν επιτρέπεται cars = ["Volvo", "BMW"]; // Μη επιτρεπτό - η επανδήλωση δεν επιτρέπεται { const cars = ["Volvo", "BMW"]; // Επιτρέπεται const cars = ["Volvo", "BMW"]; // Μη επιτρεπτό - η επανδήλωση δεν επιτρέπεται var cars = ["Volvo", "BMW"]; // Μη επιτρεπτό - η επανδήλωση δεν επιτρέπεται cars = ["Volvo", "BMW"]; // Μη επιτρεπτό - η επανδήλωση δεν επιτρέπεται }
const cars = ["Volvo", "BMW"]; // Επιτρέπεται

const cars = ["Volvo", "BMW"]; // Μη επιτρεπτό - η επανδήλωση δεν επιτρέπεται
var cars = ["Volvo", "BMW"]; // Μη επιτρεπτό - η επανδήλωση δεν επιτρέπεται
cars = ["Volvo", "BMW"]; // Μη επιτρεπτό - η επανδήλωση δεν επιτρέπεται

{
  const cars = ["Volvo", "BMW"]; // Επιτρέπεται

  const cars = ["Volvo", "BMW"]; // Μη επιτρεπτό - η επανδήλωση δεν επιτρέπεται
  var cars = ["Volvo", "BMW"]; // Μη επιτρεπτό - η επανδήλωση δεν επιτρέπεται
  cars = ["Volvo", "BMW"]; // Μη επιτρεπτό - η επανδήλωση δεν επιτρέπεται
}

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

Η επανδήλωση (redeclaring) ενός πίνακα που έχει δηλωθεί με τη λέξη-κλειδί const επιτρέπεται όταν η νέα δήλωση γίνεται σε άλλο scope ή άλλο block.

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

Εδώ είναι ένα παράδειγμα που δείχνει πως η επανδήλωση ενός πίνακα με const σε διαφορετικά scopes είναι επιτρεπτή:

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
const cars = ["Volvo", "BMW"]; // Δηλωμένος πίνακας με const
function example() {
const cars = ["Mercedes", "Audi"]; // Άλλος πίνακας με const σε διαφορετικό scope
console.log(cars); // Εμφανίζει: ["Mercedes", "Audi"]
}
example(); // Εκτελεί την function και εμφανίζει τον δικό της πίνακα
console.log(cars); // Εμφανίζει: ["Volvo", "BMW"] - ο αρχικός πίνακας στον αρχικό scope
const cars = ["Volvo", "BMW"]; // Δηλωμένος πίνακας με const function example() { const cars = ["Mercedes", "Audi"]; // Άλλος πίνακας με const σε διαφορετικό scope console.log(cars); // Εμφανίζει: ["Mercedes", "Audi"] } example(); // Εκτελεί την function και εμφανίζει τον δικό της πίνακα console.log(cars); // Εμφανίζει: ["Volvo", "BMW"] - ο αρχικός πίνακας στον αρχικό scope
const cars = ["Volvo", "BMW"]; // Δηλωμένος πίνακας με const

function example() {
  const cars = ["Mercedes", "Audi"]; // Άλλος πίνακας με const σε διαφορετικό scope
  console.log(cars); // Εμφανίζει: ["Mercedes", "Audi"]
}

example(); // Εκτελεί την function και εμφανίζει τον δικό της πίνακα
console.log(cars); // Εμφανίζει: ["Volvo", "BMW"] - ο αρχικός πίνακας στον αρχικό scope

Στο παράδειγμα παραπάνω, ο πίνακας cars δηλώνεται με const στον αρχικό scope, και μετά επανδηλώνεται με το ίδιο όνομα, αλλά με διαφορετική τιμή, μέσα στην function example(). Η επανδήλωση γίνεται σε διαφορετικό scope, και επομένως δεν προκαλεί σφάλμα.

21 Αυγούστου, 2023
top
error: Content is protected !!
Μετάβαση σε γραμμή εργαλείων