JavaScript Arrow Functions For Beginners
Tags: javascript, beginners, codenewbie, webdev
Published: 2020-09-14 21:31:43

**19/09/2020**

###**Introduction**

Hello and welcome to my first blog post. The most popular advice in the Twitter dev community lately (August 2020) is to start a blog. Even if you’re a total beginner when it comes to coding it’s still recommended. This is because trying to explain something to someone else helps solidify your own understanding of the subject. Plus there’s the bonus that on the off chance another beginner happens to find this blog, it might help them out too. So this is me trying to understand and explain arrow functions.

###**Arrow Functions**

Arrow functions were introduced in ES6 (also known as ECMAScript 2015) to the joy of professional developers and to the despair of beginners everywhere. For professionals it meant they could write more concise code and for beginners it was one more thing on the pile that they needed to learn.

###**Regular Functions vs Arrow Functions**

The best way to see the difference between regular functions and arrow functions is to compare the two. Let’s take a look at some regular functions and see how they would be written as arrow functions. The following code creates a function that logs “Hello” in the console and calls that function:
```javascript
function regularFunction() {
  console.log("Hello");
}

regularFunction();
```
And here is the function above written as an arrow function:
```javascript
const arrowFunction = () => {
  console.log("Hello");
};

arrowFunction();
```
Both functions do exactly the same thing.

###**Using Parameters**

The example functions above did not take any parameters so we left the parentheses ‘()’ empty. However, arrow functions can also accept parameters. The following regular function adds two numbers together:
```javascript
function regularFunction(a, b) {
  console.log(a + b);
}

regularFunction(2, 3);
```
This calls the function with the arguments ‘2’ and ‘3’, adds them together and then logs the answer in the console. Here’s the same function written as an arrow function with the same parameters and arguments:
```javascript
let arrowFunction = (a, b) => {
  console.log(a + b);
};

arrowFunction(2, 3);
```
Now you’re probably thinking the same as me: “Wait a minute, this looks like more code than we had before! I'm not going to count the characters but one of these => has definitely been added. How is this better?” Well, it’s not better as far as I can tell but that’s because we haven’t used the shiny new syntax yet.

###**Syntactic Sugar**

As a beginner, I console log everything so I can see if the code is working the way I expect it to (it usually isn’t). So just for fun, let’s go back a step and pretend I’m a confident coder that knows what they’re doing and use `return` instead of `console.log()`.

Here’s our arrow function using `return` instead of `console.log()`:
```javascript
let arrowFunction = (a, b) => {
  return a + b;
};
```
Now here comes the syntactic sugar (a difference in syntax) that developers crave so much. If the arrow function only returns a single value, you do not need to include the `return` keyword or the curly braces `{}`. Once they’re gone you can move the rest of the code up to the first line. This turns our arrow function into the following:
```javascript
let arrowFunction = (a, b) => a + b;
```
Which I’ll admit does look more concise.

###**Breakdown**

Here’s a breakdown of each part to help understand what’s going on:
```javascript
let arrowFunction = (a, b) => a + b;
```

`let arrowFunction =` assigns the function to a variable called arrowFunction.
`(a, b)` are the parameters of the function. If there is only one parameter, you do not need to wrap it inside parentheses.
`=>` you can think of this as an arrow pointing to the function body.
`a + b` the code that will be returned once the function has ran.

###**A Slightly More Complex Example**

Arrow functions are more convenient when used instead of anonymous functions (functions without a name). Here is a common example of fetching data from an API containing regular functions:
```javascript
fetch("https://picsum.photos/v2/list")
  .then(function (response) {
    return response.json();
  })
  .then(function (data) {
    console.log(data);
})
```
Here is the same example using arrow functions:
```javascript
fetch("https://picsum.photos/v2/list")
  .then(response => response.json())
  .then(data => console.log(data));
}
```
Arrow functions are starting to look better now!

###**Scope**

An important point to be aware of is that arrow functions do not have their own scope. That means if you use the `this` keyword inside an arrow function, it will not refer to the scope of the arrow function but will refer to the scope of whatever the arrow function is inside instead.

###**Are Arrow Functions Popular?**

Yes. Every JavaScript tutorial made after 2015 that I’ve come across will have arrow functions thrown in like there’s no tomorrow. Pretend each one of these sprinkles is an arrow function and the person is a developer:

![A developer bathing in arrow functions](https://media.giphy.com/media/wZtxwyGdLV838qwYNt/giphy.gif)

This is just a conservative estimate for illustrative purposes. The real number of arrow functions per tutorial is much higher.

###**Conclusion**

Well it turns out the Twitter dev community was right. I can watch a video on a topic and think I understand it. I can write the code by myself and keep tweaking it until it works and think I understand it. But tell me to imagine I'm explaining it to another beginner and I've got nothing. This tiny blog post took me a few hours to make. I hope this helped someone but if not then no problem. It’s definitely helped me which is why I did it. Bye-bye.

###**Special Thanks**

Special thanks to Laura Harvey (@lauracharvey on Twitter) for proofreading and for the feedback!

###**Sources**

w3schools - https://www.w3schools.com/js/js_arrow_function.asp

MDN Web Docs - https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions

freeCodeCamp - https://www.freecodecamp.org/

Web Dev Simplified - JavaScript ES6 Arrow Functions Tutorial https://www.youtube.com/watch?v=h33Srr5J9nY

SaiD Hayani - https://www.freecodecamp.org/news/write-less-do-more-with-javascript-es6-5fd4a8e50ee2/

Cynthia Lee - https://www.freecodecamp.org/news/when-and-why-you-should-use-es6-arrow-functions-and-when-you-shouldnt-3d851d7f0b26/