Discussion on: Arrow Function vs Function

[Piyush Bansal]

Closures can do everything that arrow functions can do, but not vice versa.

Can someone tell me what are the things that are not doable by arrow functions?

[Sergii Shymko]

Removed that sentence as the article does not expand on this topic. Thanks!

[Sergii Shymko]

Arrow functions cannot be called with a dynamic this scope useful to reuse the same callback on different elements.

For example:

let button1 = document.getElementById('button1');
let button2 = document.getElementById('button2');

let callback = function() {
  console.log(`Button ${this.id} clicked.`);
};

button1.onclick = callback;
button2.onclick = callback;

It will log button1 and button2 respectively. Such behavior cannot be reproduced by a single arrow function. You'd have to declare two arrow functions each enclosing the context of the respective element.

[Piyush Bansal]

Can't we just get this info from 'event.target'?

[Sergii Shymko]

Good point. That's true for DOM events, but not in general case of arbitrary callback.

[Sergii Shymko]

Arrow functions cannot be used as class constructors, for instance:

const Class1 = function () {};
const Class2 = () => {};

let obj1 = new Class1();  // Ok
let obj2 = new Class2();  // TypeError: Class2 is not a constructor

[Piyush Bansal]

Cool, this is something new I didn't know.