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.

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.


Bootstrap 5 Complete Course with Examples

Bootstrap 5 Tutorial - Bootstrap 5 Crash Course for Beginners

Nest.JS Tutorial for Beginners

Hello Vue 3: A First Look at Vue 3 and the Composition API

Building a simple Applications with Vue 3

Deno Crash Course: Explore Deno and Create a full REST API with Deno

How to Build a Real-time Chat App with Deno and WebSockets

Convert HTML to Markdown Online

HTML entity encoder decoder Online

The essential JavaScript concepts that you should understand

The essential JavaScript concepts that you should understand - For successful developing and to pass a work interview

Data Types In JavaScript

JavaScript data types are kept easy. While JavaScript data types are mostly similar to other programming languages; some of its data types can be unique. Here, we’ll outline the data types of JavaScript.

JavaScript Memory Management System

The main goal of this article is help to readers to understand that how memory management system performs in JavaScript. I will use a shorthand such as GC which means Garbage Collection. When the browsers use Javascript, they need any memory location to store objects, functions, and all other things. Let’s deep in dive that how things going to work in GC.

Create a Line Through Effect with JavaScript

In this post we are going to create an amazing line through effect, with help of CSS and lots of JavaScript. So, head over to your terminal and create a folder LineThroughEffect. Create three files -index.html, main.js and styles.css inside it.

Grokking Call(), Apply() and Bind() Methods in JavaScript

In this article, we will have a look at the call(), apply() and bind() methods of JavaScript. Basically these 3 methods are used to control the invocation of the function.