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;
});

console.log(addTen(10));
//20

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;

console.log(addTen(10));
//20

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;

console.log(addTen(10));
//20

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};

console.log(addTen(10));
//20

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));
//20

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 = nums.map((num) => {
  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.

Posts

1

Thanks for reading ❤

2

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

3

Follow me on **[Facebook]( https://www.facebook.com/moriohdotcom)** | **[Twitter]( https://twitter.com/moriohdotcom)**

4

5

### Learn More

6

7

☞ [The Complete JavaScript Course 2019: Build Real Projects!](http://learnstartup.net/p/rJWeUz65Z "The Complete JavaScript Course 2019: Build Real Projects!") 

8

☞ [Vue JS 2 - The Complete Guide (incl. Vue Router & Vuex)](http://learnstartup.net/p/BJBa7-l-g "Vue JS 2 - The Complete Guide (incl. Vue Router & Vuex)")

9

☞ [JavaScript Bootcamp - Build Real World Applications](http://learnstartup.net/p/-J13WdymB "JavaScript Bootcamp - Build Real World Applications") 

10

☞ [The Web Developer Bootcamp](https://learnstartup.net/p/SJQU6Gxbg "")

11

☞ [JavaScript: Understanding the Weird Parts](http://learnstartup.net/p/HyUQWUMTqW "JavaScript: Understanding the Weird Parts")

12

☞ [From Javascript to Typescript to Elm](http://tech.learn4startup.com/bc52b1d27c "")

13

☞ [JavaScript Web Workers: A Beginner’s Guide](http://dev.edupioneer.net/580481d0e4 "")

14

☞ [Top 12 Javascript Tricks for Beginners](http://on.geeklearn.net/1540f81ec6 "")

15

☞ [Learn JavaScript - JavaScript Course for Beginners](http://on.geeklearn.net/162c65c573 "")

16

☞ [JavaScript naming conventions: do’s and don’ts](http://tech.learn4startup.com/417232d415 "")

17

☞ [12 Concepts That Will Level Up Your JavaScript Skills](http://dev.edupioneer.net/97a2cf32d6 "")

18

19

*Originally published on [https://dev.to](https://dev.to/kbk0125/javascript-s-arrow-functions-explained-by-going-down-a-slide-1ebm)*

Thanks for reading ❤

javascript 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

Function Expression vs Function Declaration in JavaScript

In this article, we will acquaint ourselves with three simple terms: function declaration, function expression, and hoisting.

JavaScript: The Good Parts of Arrow Functions

JavaScript: The Good Parts of Arrow Functions. You might not know this one major difference between normal functions and ES6 arrow functions in JavaScript.

What is Callback-Function in JavaScript? How it is Replaced By Promises?

Let us understand term Callback by an real-world example: Suppose, you are calling to your Girlfriend (If you have) and she is busy in another call then she send message to you : “I am busy right now, Call back you later.!!”. After completing her work, she calls you back and this is what call back in JavaScript as well. In this post, we'll discuss What is Callback-Function in JavaScript? How it is Replaced By Promises?

Custom JavaScript Functions

In JavaScript you can create functions to write reusable blocks of code with functionality similar to most other programming languages, although, because of the nature of JavaScript, they might behave a bit differently, depending on the circumstances and the way you declare them.

Functional Programming in Javascript 

The mystic term of Functional Programming (FP) must be familiar to any JS developer. The first impression when we say “JS supports functional programming paradigm”.