How to use arrow functions in JavaScript.

The arrow function is a cool addition to the ES6 syntax of writing JavaScript, introduced in 2015, arrow functions are a shorter way to write functions in JavaScript. Using an arrow function strips away the need to use the function keyword when initializing a function. The code snippet below is an example of an arrow function in comparison with the regular ES5 function. It's worth mentioning that arrow functions are completely anonymous (you cannot name them as you would with the regular ES5 syntax).

// cool new ES6 syntax

const greet = name => {
  return 'Hello ' + name;
};
greet('Joe'); // Hello Joe

// old ES5 syntax

function greet(name) {
  return 'Hello ' + name;
}
greet('Janet'); // Hello Janet

Notice how we had to assign the arrow function to a variable called greet? that's what I meant when I said:

It's worth mentioning that arrow functions are completely anonymous.

I know what you're thinking, we used the same four lines of code to write the arrow function so it doesn't make any difference? well, what if I told you that we don't need the return statement, the curly braces or even the parentheses in our first function declaration?

Observe:

const greet = name => 'Hello' + name;
greet('Joe'); // Hello Joe

a supried man
wait, what just happened?

Magical right? well, here's what's happening:

When using arrow functions with on only one argument, there's no need to wrap the argument in a pair of parentheses. The only case we need parentheses is when we are not passing any arguments to the function or we're passing more than one argument. For example, if we needed to pass both the first name and surname to our greet function, here's how we would do it:

const greet = (firstName, surName) => 'Hello ' + firstName + ' ' + surName;
greet('Tony', 'Stark'); // Hello Tony Stark

If we are not performing some kind of complex task in our function, and our function is to return a simple value, we can just specify the return value right after the fat arrow sign =>, so the only time we'd use a curly brace and the return statement is when our arrow function has some other task to perform on the next line.

Sadly, an arrow function cannot replace the regular function because it does not have the same use case as the regular function.

Disadvantages of arrow functions

Arrow functions cannot be used as constructors, using an arrow function will throw an error because arrow functions do not have a prototype property (remember functions are also objects in JavaScript), this is also because arrow functions are not bound to keywords like this, arguments, super or new.target hence it's unsuitable for use as a constructor.
Arrow functions also make bad methods for objects, because it's not bounded to the this keyword, arrow function methods that are going to return a value based on some calculations made from the values of other properties of the object will most likely yield unexpected results.

How then can we use arrow functions?

As a callback function.
As an argument passed to higher-order functions e.g .map(), .sort() etc.
As an Immediately Invoked Function Expression (IIFE).
As a regular function that is not a constructor and doesn't use the this keyword 😅. Although it's fine to use the this keyword in arrow functions, as long as you know what you're doing.

How to use arrow functions in JavaScript.

Comments

More from this blog

How to optimize Vue.js applications

The difference between transition and transition-group components in Vue

Sorting arrays with JavaScript: a deep look into the sort() method

How to build a Markdown blog using Gridsome

How to trigger a Netlify build using Storyblok webhooks

Magical right? well, here's what's happening:

Disadvantages of arrow functions

How then can we use arrow functions?

Resource(s)

Command Palette

Comments

More from this blog

Magical right? well, here's what's happening:

Disadvantages of arrow functions

How then can we use arrow functions?

Resource(s)