Learning to Code: Day 55 — JavaScript: ES6 Part 2
Good morning my dears, are we all keeping well? Thanks for joining me on this section of ES6 Part 2. Today we’ll look at arrow functions and some other flexible tools. Let’s crack on! Cheers as always to FreeCodeCamp for the lessons.
—
Arrow Functions
Arrow functions help us write concise anonymous functions. What do we mean by this? Well we often don’t require all functions to have a name, especially when passing one as an argument to another, instead they exist as inline functions. They are for single use and not required afterwards elsewhere.
Take a peek at this syntax:
This can be easily simplified with arrow function syntax:
Spot the difference!
Furthermore, we can simplify this new chunk of code into one line. Impossible I hear you cry! Charlatan! But hold steady, this is possible because when there is only a return value and no function body, an arrow function omits the need to have a return keyword and it gets rid of surrounding curly brackets “{}” at no extra price. We end up with this:
Ooft, ain’t she pretty now. Nice and neat and the code still returns the string “value”. My OCD is at peace.
Arrow Functions with Parameters
We can also pass arguments into an arrow function.
If there is only a single argument, then the brackets can be omitted, as seen in this updated example of the above, here:
With more than one argument, then we use parenthesis “()”. Note the change now:
Default Parameters for Functions
ES6 introduces this new way to create more flexible functions. Take a look at this bad boy:
See what’s going on here? The default parameter for name is used as “Anonymous” if no value is given to it by the user. We can set our own default parameters which act like a backup value when no value is given, even though traditionally the unspecified argument would have returned “undefined”. Magic!
If there were two arguments in the above example and you wanted to default parameter one of them, it would look like: (argument1, name = “Anonymous”).
The ‘Rest’ Parameter
The Rest Parameter (“…”) helps us when we create functions, because we can take an indefinite number of arguments which are stored in an array and accessed later on from inside the function.
Note: Spot the Rest Parameter in the brackets on the first line.
The Rest Parameter eliminates the need for us to check through the args array and we also apply map(), filter() and reduce() on the parameters array.
What are those three? Well lemme refresh your memory on them:
map(): The
map()method creates a new array with the results of calling a function for every array element. Themap()method calls the provided function once for each element in an array, in order. - w3schoolsfilter(): The filter() method creates an array filled with all array elements that pass a test (provided as a function). - w3schools
reduce(): The
reduce()method reduces the array to a single value. Thereduce()method executes a provided function for each value of the array (from left-to-right). The return value of the function is stored in an accumulator (result/total). - w3schools
Using the Spread Operator to Evaluate Arrays In-Place
The Spread Operator is a nifty little tool that allows us to “spread” out or expand an array for processing and includes other expressions in places where multiple parameters and arguments are expected.
The Spread Operator is taking action here in the brackets as …arr, spreading out the array called arr and then Math.max() method to seeks out the highest value in the array. This operator only works “in-place” like that of an argument to a function or in an array literal, and wouldn’t work alone like this:
This would throw up an error.
Let’s use a Spread Operator to copy contents of one array into another:
—
Aaaand let’s leave it there. We’ll pick up on this next time looking at Destructuring Assignment syntax. See you then!
