JavaScript ES6: Arrow Functions & the spread operator

In the previous tutorial we looked at classes and modules, in this final tutorial I’m going to give you a basic understanding of Arrow Functions and the spread operator. After each topic, a resources section is provided with resources to help you understand if you are confused and to learn more about the feature. Let’s begin!

Arrow Functions

What are arrow functions?

Arrow functions are anonymous functions that does not bind its own this. Firstly, what is an anonymous function? An anonymous function is a function that is defined without any named identifier to refer to it. Read this to see examples of anonymous functions.

Creating an arrow function

The above code is how to create an arrow function. You can also create an arrow function using variables to allow you to make reference to them.

Any parameters goes between the brackets. It’s just like a normal function but without the word function and with a arrow (=>).

Does not bind it’s own this? What does that mean?

Let’s use an example to explain this very simply (example taken from Mozilla’s Reference on arrow functions).

Normal function declaration

The function Person is defined. Inside it, this.age is initialized to 18. A setInterval method is called that takes in a function that is defined using the normal function declaration style that increments (++) this.age every second. However, the function growUp() defines it’s own this. The this.age is different to the this.age outside the setInterval method.

In simple words, you can’t increment the age in the Person function.

Arrow functions solves this problem by basically binding the this to the main function which in this case, is Person.

Using arrow functions

In the above code, the normal function was replaced with an anonymous function. Therefore, the code will work as it should. The this inside this arrow function means the Person function firstly defined.

Resources:

JavaScript: Arrow Functions for Beginners by hackernoon- Provides a great explanation to the no binding of this.

Mozilla’s Reference on arrow functions- Make sure to read the comments within the code snippets.


The spread Operator

Another useful feature is the spread operator. As defined in Mozilla’s Reference, “ The spread syntax allows an expression to be expanded in places where multiple arguments (for function calls) or multiple elements (for array literals) or multiple variables (for destructuring assignment) are expected.”

It is created by using 3 dots followed by the name of the variable that contains the values to be inserted. ( …a assuming a is a variable that holds an array of numbers).

Let’s explain this using an example:

Example of the spread operator

Two variables were created. The spread operator was used in the arrow of variable b to insert the values of the array into array b. This says “take the values from array a and put them first in this position in array b. Hence the output will include all the values from a along with b.

The spread operator can also be used to spread function arguments like this:

The spread operator using function arguments.

That was a basic overview of the spread operator.

Resources:

Mozilla’s Reference — spread syntax

Hackernoon — JavaScript & The spread Operator

Conclusion

This was a basic overview of the arrow function and the spread operator. If you confused, use the resources provided so you can understand them.

This also concludes this series on the features of JavaScript ES6. I hope you learnt as much as I did from creating these tutorials. I created this not only to help those understand ES6 in a simpler way but also to help me learn more. Thank you for reading!

Previous tutorials:

JavaScript ES6: Destructuring & Template Literals

Javascript ES6: let and const

JavaScript ES6: Classes & Modules