Functions as a methods in JS ES6 classes

Question

class dog extends animal {
    speakAge = (age) => console.log(this.calcAge('dog', age));
}

i do not understand how does it work? this not a method like

class dog extends animal {
    speakAge(age) { console.log(this.calcAge('dog', age)) } ;
}

what are those called? and do they have lexical scope ?

This is still experimental syntax. – Bergi Jul 12 '20 at 20:19 — Bergi, Jul 12 '20 at 20:19

Bhavesh Lohana · Answer 1 · 2020-07-12T19:11:44.443

They are called Arrow functions, introduced in ES6. Arrow functions were created to simplify function scope and make using the ‘this’ keyword much more straightforward. While in ES5 ‘this’ referred to the parent of the function, in ES6, arrow functions use lexical scoping — ‘this’ refers to its current surrounding scope and no further. Thus the inner function knew to bind to the inner function only, and not to the object’s method or the object itself.

Edit: As pointed out in comments, Arrow functions aren’t methods, they’re anonymous function expressions, so the only way to add them to a class is by assignment to a property.

For example,

class Dog {
  constructor(name, bread) {
    this.name = name;
    this.bread = bread;
    // functions
    this.bark = () => {
      return `Bark Bark! My name is ${this.name}`;
    }
  }
}
const mini = new Dog('Leo', 'Pug');
mini.bark();

i am aware but i am more concerned about their use in classes — Nish, Jul 12 '20 at 18:10

Functions as a methods in JS ES6 classes

1 Answers1