JavaScript: Arrow Functions vs Regular Functions

Katherine
Katherine
Oct 13, 2020 · 5 min read

Once I started learning JavaScript I realized that functions are bread and butter of JavaScript programming language. Alongside classic function declarations there are arrow functions in JS (introduced in ES6). Arrow functions might be confusing in the beginning. In fact, arrow functions are great! They do look nicer, they do take less keystrokes, they are more fun, and they are so handy in React. Let’s take a closer look at their syntax and other differences compare to regular functions.

1. Syntax

Instead of the function keyword, arrow function uses an arrow (=>) made up of an equal sign and a greater-than character (not to be confused with the greater-than-or-equal operator, which is written >=).

It is important to note that arrow functions, introduced in ES6 in 2015, are anonymous, which means that they are not named. The example above shows the anonymous arrow function with two arguments a and b that returns a + b.

Arrow functions may appear unfamiliar and not very readable at first, but that quickly changes as the eyes get used to the structure.

They are very convenient for simple one-line actions, when we’re just too lazy to write many words.

One argument

If we have only one argument, then parentheses around parameters can be omitted, making that even shorter.

No arguments

If you have no arguments, here’s how you can go about it.

NOTE: the difference is that () marks that there might be some default argument and _ says there will be, for sure, no defaults you care about.

Multiline arrow functions

Sometimes we need something a little bit more complex, like multiple expressions or statements. It is also possible, but we should enclose them in curly braces. Then use a normal return within them.

Like in the example below:

Another example:

If you DO use {}, you must explicitly return the return value.

2. “this” binding

When discussing the arrow functions it is important to mention that unlike regular functions, arrow functions do not have their own this. Arrow functions don’t redefine the value of this within their function body. This makes it a lot easier to predict their behavior when passed as callbacks, and prevents bugs caused by use of this within callbacks.

In classic function expressions, the this keyword is bound to different values based on the context in which it is called. With arrow functions, however, this is lexically bound. It means that it uses this from the code that contains the arrow function, in other words, this means the same thing within the function body as it does outside of it.

For example, look at the setTimeout function below:

In the ES5 example, .bind(this) is required to help pass the this context into the function. Otherwise, by default this would be undefined.

ES6 arrow functions can’t be bound to a this keyword, so it will lexically go up a scope, and use the value of this in the scope in which it was defined.

3. Argument binding

Unlike regular functions arrow functions do not have an arguments binding. However, they have access to the arguments object of the closest non-arrow parent function. Named and rest parameters are heavily relied upon to capture the arguments passed to arrow functions.

The arguments is a reference of the name in the enclosing scope, for example:

The arrow function inside the showMe() function references the arguments object. However, this arguments object belongs to the show() function, not the arrow function.

4. Using “new” keyword

Regular functions created using function declarations or expressions are constructible and callable. Since regular functions are constructible, they can be called using the new keyword.

For example, the Car() function creates instances of a car:

Car is a regular function, and when invoked with new keyword, it creates new instances of Car type.

Not having this naturally means another limitation for arrow functions: the arrow functions are only callable and not constructible, i.e arrow functions can never be used as constructor functions. Hence, they can’t be called with new keyword.

If you try to invoke an arrow function prefixed with new keyword, JavaScrip throws an error:

Invoking new Car('blue'), where Car is an arrow function, throws TypeError: Car is not a constructor.

5. Duplicate named parameters

Regular function can have duplicate named parameters:

However, it isn’t possible when using strict mode:

Arrow functions can never have duplicate named parameters, whether in strict or non-strict mode.

Conclusion

You got familiar with two different styles for declaring functions: function expressions and arrow functions. Understanding the differences between regular and arrow functions helps choose the right syntax for specific needs.

Arrow functions excel when a simple change or operation needs to be used repeatedly. But they’re certainly used to write long, full functions too!

Arrow functions:

  • Do not have this
  • Do not have arguments
  • Can’t be called with new

That’s because they are meant for short pieces of code that do not have their own “context”, but rather work in the current one. And they really shine in that use case.

Resources:

📖 https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions

📖 https://developer.mozilla.org/en-US/docs/Glossary/IIFE

📖 https://www.w3schools.com/js/js_functions.asp

📖 https://www.w3schools.com/js/js_arrow_function.asp

📖 https://stackoverflow.com/questions/34361379/are-arrow-functions-and-functions-equivalent-interchangeable

📖 https://www.freecodecamp.org/news/when-and-why-you-should-use-es6-arrow-functions-and-when-you-shouldnt-3d851d7f0b26/

📖 https://eloquentjavascript.net/

📖 https://www.javascripttutorial.net/es6/javascript-arrow-function/

📖 https://javascript.info/arrow-functions-basics

The Startup

Get smarter at building your thing. Join The Startup’s +787K followers.

Sign up for Top 10 Stories

By The Startup

Get smarter at building your thing. Subscribe to receive The Startup's top 10 most read stories — delivered straight into your inbox, once a week. Take a look.

By signing up, you will create a Medium account if you don’t already have one. Review our Privacy Policy for more information about our privacy practices.

Check your inbox
Medium sent you an email at to complete your subscription.

Katherine

Written by

Katherine

The Startup

Get smarter at building your thing. Follow to join The Startup’s +8 million monthly readers & +787K followers.

Katherine

Written by

Katherine

The Startup

Get smarter at building your thing. Follow to join The Startup’s +8 million monthly readers & +787K followers.

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore

If you have a story to tell, knowledge to share, or a perspective to offer — welcome home. It’s easy and free to post your thinking on any topic. Write on Medium

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store