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

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!




Step by step, learning to code with FreeCodeCamp

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

Webdriver JavascriptExecutor interact with elements and open and handle multiple tabs and get url…

Integrate Keycloak with Nuxt.js OAuth2 module

Custom user authentication with Express, Sequelize, and Bcrypt

Using PM2 to manage ASP.NET Core, React & KeyCloak

How To Build SSR Page With Next.Js

react-native-navigation: Error Plugin with id ‘kotlin-android’ not found and compileSdkVersion is…

Array Destructuring

Understanding Angular

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Hugh Burgess

Hugh Burgess

Step by step, learning to code with FreeCodeCamp

More from Medium

Learning JavaScript in 2022

React.js — Basic Hooks (useState, useEffect, & useContext)

HTML Collections vs Node Lists in JavaScript

Generic Picture of JavaScript Code

<vanilla javascript> TO DO LIST