Δείγμα καρτών JavaScript από την εφαρμογή μας

Κατεβάστε την εφαρμογή μας από το App Store ή το Google Play για να αποκτήσετε περισσότερες δωρεάν καρτέλες μάθησης ή εγγραφείτε για πρόσβαση σε όλες τις καρτέλες μάθησης.

Τι είναι το λεξικό πεδίο στη JavaScript;

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

function outerFunction() {
  let outerVariable = `I'm outside!`;

  function innerFunction() {
    console.log(outerVariable); // Has access to the 'outerVariable'
  }

  innerFunction();
}
outerFunction(); // Displays `I'm outside!`

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

Τι είναι το hoisting;

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

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

Για μεταβλητές που έχουν δηλωθεί με το var, μόνο η δήλωση μετακινείται, όχι η αρχικοποίηση. Οι μεταβλητές που αρχικοποιούνται πριν τη δήλωση θα επιστρέφονται ως undefined.

Ένα παράδειγμα από κώδικα hoisting για μεταβλητές:

console.log(myVar); // undefined
var myVar = 5;
console.log(myVar); // 5

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

Ένα παράδειγμα από κώδικα hoisting για συναρτήσεις:

console.log(myFunction()); // "Hello World"

function myFunction() {
  return "Hello World";
}

Το Hoisting δεν συμβαίνει για μεταβλητές που έχουν δηλωθεί με let και const.

Τι είναι μια συνάρτηση βέλους και ποια είναι τα πλεονεκτήματά της;

Μια συνάρτηση βέλους, γνωστή επίσης ως συνάρτηση βέλους, είναι ένας τύπος συνάρτησης που εισήχθη στο ECMAScript 6 (ES6). Ονομάζονται συναρτήσεις βέλους επειδή χρησιμοποιούν μια ειδική σύνταξη με ένα βέλος ( => ) για τον προσδιορισμό της συνάρτησης.

Για σύγκριση, μια παραδοσιακή συνάρτηση ίσως να μοιάζει κάπως έτσι:

function sum(a, b) {
  return a + b;
}

Το ισοδύναμό της ως συνάρτηση βέλους είναι:

const sum = (a, b) => a + b;

Το κύριο πλεονέκτημα μιας συνάρτησης βέλους είναι ότι δεν δημιουργεί το δικό της πλαίσιο εκτέλεσης (δέσμευση στο this), το οποίο είναι συχνά πηγή σφαλμάτων στην JavaScript. Στις συναρτήσεις βέλους, το this κληρονομείται από το περιβάλλον πλαίσιο. Ένα άλλο πλεονέκτημα είναι η συντομία της σύνταξης, ιδιαίτερα χρήσιμη όταν οι συναρτήσεις χρησιμοποιούνται ως επιχειρήματα σε άλλες συναρτήσεις, π.χ. σε συναρτήσεις υψηλότερης τάξης.

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

Τι είναι ένα αντικείμενο Promise και πώς μπορεί να χρησιμοποιηθεί;

Το αντικείμενο Promise στην JavaScript χρησιμοποιείται για τον χειρισμό ασύγχρονων λειτουργιών. Μια Promise αντιπροσωπεύει μια τιμή η οποία ενδέχεται να μην είναι διαθέσιμη τη στιγμή που δημιουργείται η Promise, αλλά ενδέχεται να είναι διαθέσιμη στο μέλλον, ή και ποτέ καθόλου.

Ένα αντικείμενο Promise μπορεί να βρίσκεται σε μία από τις τρεις καταστάσεις:
1. Εκκρεμής - η λειτουργία είναι ακόμα σε εξέλιξη, δεν έχει ολοκληρωθεί είτε με επιτυχία είτε με σφάλματα.
2. Εκπληρωμένη - η λειτουργία ολοκληρώθηκε με επιτυχία, η Promise επέστρεψε μια τιμή.
3. Απορριφθείσα - η λειτουργία ολοκληρώθηκε με σφάλμα, η Promise επέστρεψε τον λόγο για το σφάλμα.

Μια Promise που έχει εκπληρωθεί ή απορριφθεί θεωρείται "εκπληρωμένη" και η κατάστασή της δεν αλλάζει ποτέ.

Δημιουργία ενός αντικειμένου Promise:

const promise = new Promise((resolve, reject) => {
  const success = true;
  if (success) {
    resolve('Η λειτουργία ήταν επιτυχής.');
  } else {
    reject('Η λειτουργία απέτυχε.');
  }
});

Χρήση ενός αντικειμένου Promise:

promise
  .then(result => {
    console.log(result); // Θα τυπώσει: 'Η λειτουργία ήταν επιτυχής.'
  })
  .catch(error => {
    console.log(error);
  });

Η μέθοδος .then() εκτελείται όταν η Promise εκπληρώνεται, και .catch() όταν απορρίπτεται. Σε κάθε περίπτωση, το αποτέλεσμα της λειτουργίας ή ο λόγος για την απόρριψη της Promise περνά ως επιχείρημα.

Τι είναι ένα callback;

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

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

Η χρήση μιας τέτοιας συνάρτησης στην πράξη μπορεί να φαίνεται ως εξής:

function executeAfterTimeout(callback, timeout) {
  setTimeout(() => {
    console.log('Πέρασε ο χρόνος!');
    callback();
  }, timeout);
}

executeAfterTimeout(() => {
  console.log('Αυτή είναι μια επανάκληση!');
}, 2000);

Σε αυτή την περίπτωση, η συνάρτηση `executeAfterTimeout` λαμβάνει μια συνάρτηση `callback` ως παράμετρο, η οποία θα εκτελεστεί μετά από ένα καθορισμένο χρονικό διάστημα. Οι συναρτήσεις επανάκλησης είναι εξαιρετικά χρήσιμες για τη διαχείριση της ασύγχρονης ελεγχόμενης ροής στην JavaScript.

Τι είναι ο τελεστής συγχώνευσης τιμών null και πώς λειτουργεί;

Ο τελεστής συγχώνευσης null (??) είναι ένας λογικός τελεστής που επιστρέφει την δεξιά πλευρά της λειτουργίας όταν η αριστερή πλευρά είναι null ή undefined. Με άλλα λόγια, όταν μια μεταβλητή είναι κενή, ο τελεστής συγχώνευσης null επιστρέφει την καθορισμένη τιμή ως αποτέλεσμα.

Η βασική σημειογραφία είναι:

let value = null ?? 'default value';

Σε αυτή την περίπτωση, καθώς η αριστερά πλευρά (value) είναι null, το αποτέλεσμα είναι 'default value'. Επιπλέον, αυτός ο τελεστής διαφέρει από τον τελεστή OR (||), καθώς η λειτουργία OR επιστρέφει τη δεξιά πλευρά όταν η αριστερή πλευρά είναι ψευδής (false, 0, '', null, undefined, NaN), ενώ ο τελεστής συγχώνευσης null επιστρέφει τη δεξιά πλευρά μόνο όταν η αριστερή πλευρά είναι null ή undefined.

Παράδειγμα με OR:

let value1 = 0 || 'default';
console.log(value1); // output: 'default' επειδή το 0 είναι ψευδές

Παράδειγμα με συγχώνευση null:

let value2 = 0 ?? 'default';
console.log(value2); // output: 0, γιατί 0 δεν είναι null ή undefined

Έτσι, σε αντίθεση με το OR, ο τελεστής συγχώνευσης null δεν θεωρεί το 0, '' και NaN τιμές "κενές".

Τι είναι το Symbol και πότε πρέπει να χρησιμοποιηθεί;

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

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

const symbol1 = Symbol('mySymbol'); 
const symbol2 = Symbol('mySymbol'); 
console.log(symbol1 === symbol2); // επιστρέφει false

Το Σύμβολο χρησιμοποιείται συχνά για να ορίζουν (μοναδικές) ιδιότητες των αντικειμένων, ειδικά όταν θέλουμε αυτήν την ιδιότητα να είναι κρυφή ή ιδιωτική. Καλύπτει επίσης ιδιότητες που δεν λαμβάνονται υπόψη όταν επαναλαμβάνουμε τα αντικείμενα χρησιμοποιώντας for...in ή for...of και δεν επιστρέφονται από τη μέθοδο Object.keys(). Επιπλέον, τα σύμβολα επιτρέπουν τη δημιουργία "ψευδών" ιδιωτικών ιδιοτήτων.

let obj = {}; 
let privateProperty = Symbol('private'); 

obj[privateProperty] = 'This is private'; 

console.log(obj[privateProperty]); // 'This is private' 
console.log(Object.keys(obj)); // []

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

Τι είναι τα WeakMap και WeakSet;

WeakMap και WeakSet είναι ειδικές εκδόσεις των αντικειμένων Map και Set της JavaScript που δεν εμποδίζουν την αυτόματη απελευθέρωση μνήμης από τον Garbage Collector.

Το WeakMap είναι μια συλλογή από ζεύγη κλειδιού-τιμής, όπου τα κλειδιά πρέπει να είναι αντικείμενα και οι τιμές μπορεί να είναι οτιδήποτε. Η κύρια διαφορά μεταξύ Map και WeakMap είναι ότι τα κλειδιά στο WeakMap διατηρούνται "αδύναμα", που σημαίνει ότι αν δεν υπάρχουν άλλες αναφορές στο αντικείμενο κλειδί, αυτό θα συλλεχθεί από τον garbage collector και η καταχώρισή του στο WeakMap θα αφαιρεθεί αυτόματα.

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

let john = { name: "John" };

let weakMap = new WeakMap();
weakMap.set(john, "...");

john = null; // αντικαθιστούμε την αναφορά

// το john έχει αφαιρεθεί από τη μνήμη!

Το WeakSet είναι παρόμοιο με το WeakMap σε σχέση με το Map. Είναι ένα σύνολο αντικειμένων, αλλά δεν εμποδίζει τη συλλογή σκουπιδιών εάν το αντικείμενο δεν είναι ορατό πουθενά αλλού. Δεν έχει τυπικές μεθόδους Set όπως το `size` και `clear`, και η μέθοδος `add` δέχεται μόνο αντικείμενα.

Παράδειγμα χρήσης του WeakSet:

let john = { name: "John" };

let weakSet = new WeakSet();
weakSet.add(john);

john = null; // αντικαθιστούμε την αναφορά

// το john έχει αφαιρεθεί από τη μνήμη!

Και το WeakMap και το WeakSet χρησιμοποιούνται κυρίως σε περιπτώσεις όπου θέλουμε να αποθηκεύσουμε επιπλέον πληροφορίες σχετικά με αντικείμενα που πρέπει να αφαιρεθούν όταν το ίδιο το αντικείμενο αφαιρείται.

Κάρτες JavaScript