Arrow functions in JavaScript: Everything you need to know about them
Tags: javascript, webdev, beginners, tutorial
Published: 2021-01-06 14:58:37

**Arrow function** is an alternative form of creating a function in JavaScript. It was introduced in ES6.

They go by name `arrow functions`, because they are created with arrow symbol - `=>`.

The main benefit of arrow functions is a short syntax which most of the times increases code readability. They come really handy when you need to quickly create a function that is an argument for another function.

In most cases they can be used interchangeably with regular functions but you need to remember about few differences.

Arrow functions are anonymous functions. It means they cannot have a name. You can bypass it by assigning them to a variable and call them with this variable name.

Let's take a look at the simple conversion from regular function to arrow function.

```jsx
function add(x, y) {
	return x + y;
}

// we assign an anonymous to a variable
const add = function(x, y) {
	return x + y;
}

// we remove "function" keyword and add an arrow after arguments
const add = (x, y) => {
	return x + y;
}
```

The code sample above shows 3 ways to declare a function. In the last one we are using `=>`. Notice we don't need a `function` keyword anymore to declare a function. We also added `=>` after list of arguments.

Arrow function allow us to use even shorter syntax.

```jsx
// returns x + y
const add = (x, y) => (
	x + y
)

// the same function in one line
const add = (x, y) => x + y

// you can skip parentheses when using only one argument
const add1 = x => x + 1
```

If your function contains only the `return` you can use the short form of arrow functions.

You can omit `{` `}` and `return` keyword and the expression after `=>` will be the value returned from this function.

When you return an object you need to remember about adding `(` `)`.

```jsx
// this won't work
const createUser = (id, name) => {
	id: id,
	name: name
}
```

In this case the curly braces used to create the object will conflict with curly braces used to create a function body. You need to add parentheses to ensure you are returning an object.

```jsx
const createUser = (id, name) => ({
	id: id,
	name: name
})
```

## Using short form to improve code readability

Let's take a look how using short form of arrow function can improve code readability when returning a function from other function.

```jsx
function createAddFunction(number) {
	return function(x) {
		return x + number
	}
}
```

`createAddFunction` is a function which creates other function. This pattern is called `currying` and you can read about it more at [What is Function Currying in JavaScript and When to Use It](https://slawkolodziej.com/posts/what-is-function-currying-in-javascript-and-when-to-use-it). You can use it for example to create a function which increments a number by `1`. 

```jsx
const add1 = createAddFunction(1)
add1(5) // 6
```

The definition of `createAddFunction` can be shortened by using features of arrow function we just learned. Let's take a look at the steps to reduce it to one line.

```jsx
// initial version
function createAddFunction(number) {
	return function(x) {
		return x + number
	}
}

// changing the inner function to arrow function
function createAddFunction(number){
	return x => x + number
}

// changing the outer function to arrow function
const createAddFunction = number => (
	x => x + number
)

// one line version
const createAddFunction = number => x => x + number
```

## What are the differences between regular and arrow functions

### `this` in arrow functions

The most important difference is how `this` behaves inside those 2 function declaration types.

Arrow functions do not create its own `this` but use its value from the place they were defined.

The explanation of `this` in JavaScript would need a separate blog post, but I will show you few examples illustrating the differences.

```jsx
const logThisOutside = () => {
	console.log(this)
}

function Button() {
	this.name = 'My Button'
	function logThis() {
		console.log(this)
	}
	const logThisArrow = () => {
		console.log(this)
	}

	logThis() // Window
	logThisArrow() // { name: 'My Button' }
	logThisOutside() // Window
}

new Button()
```

As you can see `logThisArrow` and `logThisOutside` use the value of `this` from the place they were defined in. It happens because as apposed to regular function, arrow functions do not create its own `this`, but use the value from the outer scope.

### Using `this` in arrow functions to your advantage

```jsx
function Button() {
  this.name = 'My Button'

  const that = this
  document.querySelector("button").addEventListener("click", function() {
    console.log('click', this); // Button DOM Element
    console.log('that', that) // { name: 'My Button' }
    this.name = 'Button Clicked' // won't work as expected
    that.name = 'Button Clicked' // name value changed
  });

  document.querySelector("button").addEventListener("click", () => {
    console.log("click arrow", this); // { name: 'My Button' }
    this.name = 'Button Clicked' // name value changed
  });
}

new Button()
```

We created two event listeners. In one of the we used regular function and arrow function in the other one.

In case of regular function in event listener, when you click on a button `this` will have a value of DOM element that was clicked. If we would want to change the value of `this.name` we would have to first create a variable `const that = this` and then modify it by `that.name = 'Button Clicked'`. It's a common hack used to modify `this` from outer scope.

As a mentioned before, arrow functions do not create its own `this` so you can safely change value of `name` by `this.name = 'Button Clicked`.

### Accessing arguments in arrow functions

The other feature of arrow functions is they do not create a special variable `arguments` inside a function body.

Let's see how `arguments` work in regular function.

```jsx
function add() {
	console.log(arguments)
}

add(1, 2, 3) // console: [1, 2, 3]
```

Regular function has access to special `arguments` variable that stores all arguments that function was called with even if they were not defined between the parenthesis.

Arrow functions do not create `arguments` variable but there is other solution we can use to achieve the same - rest parameters.

```jsx
const add = (...args) => {
	console.log(args)
}

add(1, 2, 3) // console: [1, 2, 3]
```

## Summary

Arrow functions offer a short syntax for creating functions. They allow to omit keywords like `function` and `return` to improve readability of your code. Please use it we caution because too much nested arrow functions can create code which is confusing for readers.

Arrow functions do not create its own `this` and `arguments` special variables which is its main difference from regular functions.

If you want to read about other differences check out [MDN Arrow function expressions](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions).

---

I'm regularly publishing my insights on web development. 
Consider [subscribing to my newsletter](https://slawkolodziej.com/newsletter).
Visit my blog at [slawkolodziej.com](https://slawkolodziej.com) to find out more interesting content.
Follow me on [Twitter](https://twitter.com/slawkolodziej).