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!
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).
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.
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.
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:
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:
That was a basic overview of the spread operator.
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.