DEV Community

Arrow Function vs Function

Sergii Shymko on October 30, 2020

In JavaScript, arrow functions provide a concise syntax for anonymous function expressions stripped off of their OOP baggage. They are a syntactic ...
Read full post
Collapse
 
terpinmd profile image
terpinmd •

Hmm. I think there are some issues with this write-up. Not sure why you are calling function() closures. Both "function" and fat arrow are functions, and they both can be closures, with the difference being their lexical scope.

A closure is just a function that has access to variables in its scope. Its really more of a pattern/feature.

Also I don't know that "function" is more or less OOP than fat arrow.

I think you should consider editing this article, at minimum the terminology is not correct for what you are calling a closure

Collapse
 
sshymko profile image
Sergii Shymko • • Edited

Thanks for a very detailed constructive feedback! Much appreciated!

Indeed, coming from PHP, I've used the term "closure" synonymously to "anonymous function" that can optionally reference the outer scope (becoming a closure). Agreed, it's unacceptable in JavaScript and strictly speaking incorrect. Updated the article accordingly.

The OOP remark referred to inability to use arrow functions as class constructors. See the code example in the comment below. Will try to rephrase or expand on this topic to avoid confusion.

P.S.

the best way to get the right answer on the internet is not to ask a question; it's to post the wrong answer.

Cunningham's Law

Thanks!

Collapse
 
theking2 profile image
theking2 •

Please add this to ##No arguments

_ can be used to replace ()

let callback = _ => void this.doSomething();

Collapse
 
sshymko profile image
Sergii Shymko •

Good tip, but it's not like the underscore has a special meaning. It's merely an argument variable name. Parentheses can be omitted when it's the only argument. One downside is, depending on how the JS/TS project is setup, the unused argument may be flagged by the linter.

Collapse
 
theking2 profile image
theking2 •

You are absolutely right-

Collapse
 
piyush1104 profile image
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?

Collapse
 
sshymko profile image
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
Enter fullscreen mode Exit fullscreen mode
Collapse
 
piyush1104 profile image
Piyush Bansal •

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

Collapse
 
sshymko profile image
Sergii Shymko • • Edited

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;
Enter fullscreen mode Exit fullscreen mode

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.

Collapse
 
piyush1104 profile image
Piyush Bansal •

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

Thread Thread
 
sshymko profile image
Sergii Shymko •

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

Collapse
 
sshymko profile image
Sergii Shymko •

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