JavaScript’s Arrow Functions Explained By Going Down A Slide

JavaScript’s Arrow Functions Explained By Going Down A Slide

If you have ever gone down a water slide, then you can understand arrow functions in JavaScript

If you have been using JavaScript for a few years, you are probably familiar with this syntax:

function addTen(num){
  return num + 10;


This function syntax was popular in ES5, or ECMAScript 5.

There is one major advantage to this syntax: It includes the word function, so it is obvious that you are writing a function!

A function clearly takes in anywhere from 0 to many arguments and runs a specific set of statements every time that it is called.

But then the world of JavaScript took a leap forward with ES6 in 2015.

Now, the same function as above would be written like this:

let addTen = (num) => num + 10;


Now, there is no function keyword, and no return statement! Functions in ES6 are much more terse , or concise.

So, since those obvious clues have been removed, you might be having a little bit of a hard time with understanding the different parts of arrow functions.

Fortunately, as you will soon see with a few animations, arrow functions are pretty easy to understand once you learn to visualize the arrow “=>” in a new way.

So here is how arrow functions are just like a water slide. In order to fully understand this tutorial, it might help to know about map functions and scoping.

Arrow Functions Visualized

Let’s explore the addTen function a little more deeply.

let addTen = (num) => num + 10;


This function will transform one parameter and output that parameter with 10 added.

The transformation happens with that subtle “=>” arrow.

It can also be written with a return statement:

let addTen = (num) => {return num + 10};


I like to transform that arrow into a tube slide in my mind to show what is actually happening. Here is what I mean:

The equals sign is like the tube slide and the arrow is like the landing pad.

Arrow functions follow this pattern:

(parameters) => {statements}

So let’s add those to the diagram with our addTen function example.

The last thing we need to show is how the parameter, which is 10 in this case, goes down the slide and becomes available in the statements of the function. Here’s what that looks like.

That’s all it is! Pretty straightforward.

Now, let’s look at an example where there are two different parameters. Here is our new function:

let multiply = (num1, num2) => {return num1 * num2};

console.log(multiply(2, 10));

In this case we are just multiplying the two parameters together. Both will go down the slide together. Like this:

There’s one more example you should know about- combining the map() method with arrow functions.

The map() method will send every element in an array into the arrow function, in order.

Let’s go through an example- imagine that you have an array of numbers, and you want to get the square root of each one.

Here’s the code.

let nums = [1, 4, 9];

let squares = => {
  return Math.sqrt(num);

console.log (squares)
// [1, 2, 3]

You need to know a little about the map method to understand this one. But, you will probably notice the terse syntax yet again- the map() method is much shorter than writing a for() loop.

Here’s what is happening in this code:

  1. There are three elements in the nums array, so the num parameter goes down the slide 3 times.
  2. The Math.sqrt() method takes the square root of the number each time.
  3. The result is stored in the squares array each time.

    The Difference Between Arrow Functions And Traditional Functions

You might be wondering… is this simply a difference in syntax?

Actually, there is one important way that the traditional ES5 functions and ES6 functions work differently.

The big change is that arrow functions do not have their own scope. Therefore, if you try to use the this keyword, you will be surprised when it does not refer to the scope of the arrow function.

To go back to our slide analogy, this means that this is the same at the top and bottom of the slide. If we were using ES5 functions, then this would be different at the top and bottom of the slide.

To quickly recognize this in code, just look for the function keyword. If you see it, that means that a new scope is being created. If not, assume that you are using the scope of the enclosing function.



Thanks for reading ❤


If you liked this post, share it with all of your programming buddies!


Follow me on **[Facebook](** | **[Twitter](**



### Learn More



☞ [The Complete JavaScript Course 2019: Build Real Projects!]( "The Complete JavaScript Course 2019: Build Real Projects!") 


☞ [Vue JS 2 - The Complete Guide (incl. Vue Router & Vuex)]( "Vue JS 2 - The Complete Guide (incl. Vue Router & Vuex)")


☞ [JavaScript Bootcamp - Build Real World Applications]( "JavaScript Bootcamp - Build Real World Applications") 


☞ [The Web Developer Bootcamp]( "")


☞ [JavaScript: Understanding the Weird Parts]( "JavaScript: Understanding the Weird Parts")


☞ [From Javascript to Typescript to Elm]( "")


☞ [JavaScript Web Workers: A Beginner’s Guide]( "")


☞ [Top 12 Javascript Tricks for Beginners]( "")


☞ [Learn JavaScript - JavaScript Course for Beginners]( "")


☞ [JavaScript naming conventions: do’s and don’ts]( "")


☞ [12 Concepts That Will Level Up Your JavaScript Skills]( "")



*Originally published on [](*

Thanks for reading ❤

Angular 9 Tutorial: Learn to Build a CRUD Angular App Quickly

What's new in Bootstrap 5 and when Bootstrap 5 release date?

Brave, Chrome, Firefox, Opera or Edge: Which is Better and Faster?

How to Build Progressive Web Apps (PWA) using Angular 9

What is new features in Javascript ES2020 ECMAScript 2020

Understanding JavaScript Arrow Functions

Are you new to JavaScript, and wondering what the arrow functions are? Have you see a bunch of arrows all across your team’s codebase and unsure what they really do? Well, you have reached the right spot to learn about arrow functions.

An introduction to functional programming in JavaScript

If you are a JavaScript developer, there’s a good chance you’ve come across concepts like “functional programming”, “functors”, “closures”, or “immutability”. You might be wondering what the heck all these things mean. Maybe you’ve already done some more reading. Or maybe you’re trying to incorporate some of the FP practices into your code.