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

Η βασική διαφορά βρίσκεται στον τρόπο που λειτουργούν με this.

Μια κλασική συνάρτηση έχει το δικό της this, το οποίο καθορίζεται από το πλαίσιο στο οποίο καλείται (πώς καλείται).

Μια βελόνα (arrow) συνάρτηση δεν έχει το δικό της this. Κληρονομεί this λεξικογραφικά από το περιβάλλον στο οποίο ορίστηκε.

Άλλες διαφορές:

• Αντικείμενο arguments: Οι κλασικές συναρτήσεις έχουν πρόσβαση στο αντικείμενο arguments, οι βελόνας όχι (αλλά μπορούν να χρησιμοποιηθούν παράμετροι rest).
• Κατασκευαστές: Οι κλασικές συναρτήσεις μπορούν να χρησιμοποιηθούν ως κατασκευαστές με τον τελεστή new. Οι βελόνας όχι.
• Ιδιότητα prototype: Οι κλασικές συναρτήσεις έχουν την ιδιότητα prototype. Οι βελόνας όχι.

Παράδειγμα χρήσης με this:

// Παράδειγμα με κλασική συνάρτηση
const obj = {
  name: 'Αντικείμενο',
  greet: function() {
    console.log(this.name); // this αναφέρεται στο obj
  }
};

obj.greet(); // Εμφανίζει: Αντικείμενο

const greetFunc = obj.greet;
greetFunc(); // Εμφανίζει: undefined (ή Window στον browser) - το this χάνει το πλαίσιο

// Παράδειγμα με βελόνα
const objArrow = {
  name: 'Αντικείμενο με βελόνα',
  greet: () => {
    console.log(this.name); // this κληρονομεί το εξωτερικό πλαίσιο (σε αυτήν την περίπτωση global ή Window)
  }
};

objArrow.greet(); // Εμφανίζει: undefined (ή το όνομα του παραθύρου στον browser, αν το name οριστεί παγκόσμια)

const greetArrowFunc = objArrow.greet;
greetArrowFunc(); // Εμφανίζει: undefined (ή το όνομα του παραθύρου στον browser) - το this δεν αλλάζει