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 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:

-FreeCodeCamp

This can be easily simplified with arrow function syntax:

-FreeCodeCamp

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:

-FreeCodeCamp

Ooft, ain’t she pretty now. Nice and neat and the code still returns the string “value”. My OCD is at peace.

We can also pass arguments into an arrow function.

-FreeCodeCamp

If there is only a single argument, then the brackets can be omitted, as seen in this updated example of the above, here:

-FreeCodeCamp

With more than one argument, then we use parenthesis “()”. Note the change now:

-FreeCodeCamp

ES6 introduces this new way to create more flexible functions. Take a look at this bad boy:

-FreeCodeCamp

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 (“…”) 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.

-FreeCodeCamp

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. The map() method calls the provided function once for each element in an array, in order. - w3schools

filter(): 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. The reduce() 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

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.

-FreeCodeCamp

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:

-FreeCodeCamp

This would throw up an error.

Let’s use a Spread Operator to copy contents of one array into another:

-FreeCodeCamp

Aaaand let’s leave it there. We’ll pick up on this next time looking at Destructuring Assignment syntax. See you then!

Step by step, learning to code with FreeCodeCamp