JavaScript 101: Arrow Functions
Tags: javascript, beginners, explainlikeimfive
Published: 2019-06-21 14:05:44

---
title: JavaScript 101: Arrow Functions
published: true
description: Arrow functions - they're the more concise version of regular functions and they've been gaining popularity since they were first introduced in ES6. Let's dive into the major differences.
tags: javascript, beginners, explainlikeimfive
cover_image: https://thepracticaldev.s3.amazonaws.com/i/278c7t3k1s7gcy19zho3.png
series: JavaScript 101
---

Arrow functions - they're the more concise version of regular functions and they've been gaining popularity since they were first introduced in ES6. Not only is the syntax much cleaner but they also provide implicit returns which we'll dive into.

> Hold up! If you haven't read the first part in this series, [JavaScript 101: Breaking Down Functions](https://dev.to/karaluton/javascript-101-breaking-down-functions-4p34), then make sure to check that out.

Let's start with how the arrow function's syntax is different from regular functions.

Here we have a regular function:
```javascript
function helloWorld(name) {
 console.log('Hello ' + name);
}
``` 

If we wanted to use an arrow function, it would look like this:

```javascript
const helloWorld = name => {
  console.log('Hello ' + name);
}
```

There are some key differences with arrow functions. We've dropped having to declare the function using the `function` keyword. Our parameters are a bit different than before as well. They now come after an equal sign and before the fat arrow (`=>`). 

You may have also noticed that we're now declaring our arrow function as a variable. That's because arrow functions are _anonymous functions_ or functions that are declared without a name. You don't have to assign them to a variable but doing so allows you trace them more easily when you have an error.

> 🌟 **Quick tip:** If you only have one parameter the parentheses are optional. If you don't have any parameters then you'll need to use empty parentheses.

Here's our example with multiple parameters:


```javascript
const helloWorld = (name, emoji) => {
  console.log(emoji + ' Hello ' + name);
}
```

And our example with no parameters:

```javascript
const helloWorld = () => {
  console.log('Hello');
}
```

Now that we've covered the syntax of arrow functions let's talk about another big benefit - implicit returns! This will make your code even shorter than before. Let's take the example we've been using and switch to a return instead of a console.log.

```javascript
const helloWorld = name => {
  return 'Hello ' + name;
}
```

Because we're only returning a single line of code we can use the arrow function's ability to do an implicit return and rewrite our function like so:

```javascript
const helloWorld = name => 'Hello ' + name;
```

When utilizing implicit returns, you're able to drop the `return` keyword as well as the curly brackets. This makes for really nice one-line functions.

Implicit returns aren't the only big difference between arrow functions and regular functions. Another big one is how they handle the `this` keyword. 

In regular functions, the `this` keyword is bound depending on the context in which it was called. However, inside of arrow functions, `this` is lexically bound meaning that it's static and determined by the scope that it's in. 

This is still something that I'm trying to grasp myself but [JavaScript Kit](http://www.javascriptkit.com/javatutors/javascriptarrowfunctions2.shtml) has a great explanation if you're wanting to dive in more.

---

Be sure to follow me on [Twitter](https://twitter.com/karaluton) for lots of posts about tech, and if I'm being honest, lots of posts about dogs too.