Sobes.tech
Junior

Ποια είναι η διαφορά μεταξύ βελών και κανονικών συναρτήσεων στη JavaScript;

sobes.tech AI

Απάντηση από AI

  1. Συντακτικό:
    • Κανονική συνάρτηση: function myFunction() { ... }
    • Βελάκι συνάρτηση: () => { ... } ή param => { ... }
  2. Πλαίσιο this:
    • Κανονική συνάρτηση: Το this καθορίζεται από το πλαίσιο κλήσης.
    • Βελάκι συνάρτηση: Το this κληρονομείται λεξικογραφικά από το περιβάλλον (δεν έχει δικό του this).
  3. Κατασκευαστές:
    • Κανονική συνάρτηση: Μπορεί να χρησιμοποιηθεί ως κατασκευαστής (new myFunction()).
    • Βελάκι συνάρτηση: Δεν μπορεί να χρησιμοποιηθεί ως κατασκευαστής.
  4. Αντικείμενο arguments:
    • Κανονική συνάρτηση: Έχει το δικό της αντικείμενο arguments.
    • Βελάκι συνάρτηση: Δεν έχει το δικό της arguments, η πρόσβαση γίνεται μέσω rest παραμέτρων (...args).
  5. Ονοματοδοτημένες συναρτήσεις:
    • Κανονική συνάρτηση: Μπορεί να είναι ονοματοδοτημένη (function myFunction() { ... }).
    • Βελάκι συνάρτηση: Είναι ανώνυμη από προεπιλογή, ανατίθεται σε μεταβλητή (const myFunction = () => { ... }).
  6. Αυτομάτως επιστροφή (implicit return):
    • Κανονική συνάρτηση: Απαιτεί ρητό return για την επιστροφή τιμής.
    • Βελάκι συνάρτηση: Μπορεί να επιστρέφει αυθόρμητα το αποτέλεσμα έκφρασης σε μία γραμμή.

Πίνακας σύγκρισης:

Χαρακτηριστικό Κανονική συνάρτηση Βελάκι συνάρτηση
Συντακτικό function name() { ... } () => { ... }
Πλαίσιο this Δυναμικό (κλήση) Λεξικογραφικό (από το γονικό πλαίσιο)
Κατασκευαστής Ναι Όχι
Αντικείμενο arguments Ναι Όχι (χρησιμοποιεί rest παραμέτρους)
Ονοματοδοσία Μπορεί να είναι ονοματοδοτημένη Ανώνυμη (ανατίθεται)
Αυτομάτως επιστροφή Όχι (συνήθως απαιτεί return) Ναι (για μία γραμμή)
// Παραδείγματα κανονικών συναρτήσεων
function standardFunction() {
  console.log(this); // Εξαρτάται από το πλαίσιο κλήσης
  console.log(arguments); // Διαθέσιμο αντικείμενο arguments
}

const obj = {
  method: standardFunction
};

standardFunction(); // this θα είναι window ή undefined
obj.method(); // this θα είναι το obj
new standardFunction(); // this θα είναι νέο αντικείμενο

// Παραδείγματα βελάκι συναρτήσεων
const arrowFunction = () => {
  console.log(this); // Κληρονομεί το this από το γονικό πλαίσιο
  // console.log(arguments); // Σφάλμα, το arguments δεν είναι διαθέσιμο
};

const outerObj = {
  outerMethod: function() {
    const innerArrowFunction = () => {
      console.log(this); // Κληρονομεί το this από το outerMethod (το outerObj)
    };
    innerArrowFunction();
  }
};

arrowFunction(); // this θα είναι το window ή {} (στο Node.js)
outerObj.outerMethod(); // this μέσα στο innerArrowFunction θα είναι το outerObj

// Αυτομάτως επιστροφή σε βελάκι
const sum = (a, b) => a + b;
console.log(sum(2, 3)); // 5

// Κανονική συνάρτηση με ρητή επιστροφή
function multiply(a, b) {
  return a * b;
}
console.log(multiply(2, 3)); // 6

// Βελάκι δεν μπορεί να είναι κατασκευαστής
// new arrowFunction(); // Σφάλμα: TypeError