Javascript Arrow Function Tutorial

Today, you can create cool websites and applications with Javascript. Because of that, this language is very popular now. While being able to run Javascript on any platform is one of the main drivers of popularity, we have others. In fact, modern Javascript has some cool features that will make your life easier. One of them is the arrow functions. You might have seen them, or even used them without knowing what they are. Well, in this Javascript Arrow Function Tutorial we get you up and running with them!

Javascript Arrow Function Tutorial

The Syntax of an Arrow Function

The simplest thing we can show you is how to write an arrow function. Once we know how to write them, we can see the differences between a standard function and a normal function.

// A normal, named, function
function aNormalFunction (arg1, arg2) {
  // Some code here...
}

// A normal unnamed function
function (arg1, arg2) {
  // Some code here
}

// An arrow function
(arg1, arg2) => {
  // Some code here...
}

As you can see here, arrow functions don’t have a name. Like traditional unnamed functions (like the second), you create them directly where you need them. So, you don’t write them to call them later, you provide them as callbacks, that’s their main goal. An example would be to use them as a callback of the setInterval function, like below.

setInterval(() => {
  console.log('Executed inside arrow function')
}, 1000)

So far it looks just like a syntactic sugar to avoid writing the word function. We’ll see in a minute it is just more than that. For now, focus on how to write an arrow function.

You write an arrow function by listing the list of arguments between brackets. Then, after an arrow “=>” you put a code block between curly brackets.

If the  argument is just one, you can omit the brackets between arguments like this arg1 => { ... }.

The real benefit of an Arrow Function

It is now time to get at the core part of this arrow function tutorial: what is the benefit behind this feature? Surely, the fact that we use => instead of function is not a real benefit. The benefit of an arrow function is that it has no this. Instead, it uses the one of the piece of code where it is created. To put it more formally, here’s the definition from Mozilla web docs.

An arrow function expression has a shorter syntax than a function expression and does not have its own this, arguments, super, or new.target. These function expressions are best suited for non-method functions, and they cannot be used as constructors.

Okay, but what does this mean to me? This is what we want to address as part of this arrow function tutorial. It means simpler and cleaner code. Imagine the setInterval usage we described below. Maybe, you want to edit a value from the context where you create your arrow function. Have a look at the following code.

function Popup () {
  this.displayed = true
  
  setInterval(() => {
    this.displayed = false
  }, 2500)
}

new Popup()

Basically, we set the displayed property to false after 2.5 seconds. We refer to that property with a this: that this refers to the Popup class, not to the arrow function. The same code with a traditional function will do nothing, because this would refer to the function.

With Modern Javascript

Arrow functions are a core part of modern javascript. Most popular frameworks like React or Vue.js rely on them to create beautiful code that remains simple to understand. With them, you can create components that make your frontend application modular and scalable.

Final words on this Arrow Function Tutorial

As part of this arrow function tutorial, we saw how to write arrow functions and why to write them. In case you are looking for a TL;DR, here’s one.

Arrow functions are a shorter way of writing function, and they have no this. Instead, their this refers to the this of the context where you write them. They are meant for non-method functions, and you write them like so: (arg1, arg2) => { ... }.

Probably, the simplest way to start using them is with a framework, but feel free to implement them in your vanilla javascript website. What do you think about Arrow Functions? Would you see yourself using them? As always, let me know in the comments! Still interested in Javascript? You can check this article about Vuex.