ES6++: 5- Arrow Functions
Tags: javascript, es6, esnext
Published: 2022-11-17 12:27:40

---
title: ES6++: 5- Arrow Functions
published: true
description: 
series: es6++
tags: javascript, es6, esnext
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/icyx5tnjwy6rdrlsqe5l.png
# Use a ratio of 100:42 for best results.
# published_at: 2022-10-25 09:51 +0000
---

## Arrow Functions

Arrow functions are a new way to write functions in **ES6**. They are a shorter syntax for writing functions and they do not have their own `this` and `arguments`. They also do not have a `prototype` property.

## How to use arrow functions?

To use arrow functions you need to use the `=>` operator instead of the `function` keyword.

```js
// normal function
function add(a, b) {
  return a + b;
}

// arrow function
const add = (a, b) => {
  return a + b;
};
```

Actually, we can shorten that even more:

```js
const add = (a, b) => a + b;
```

What we did here is that, when we have only a return statement in the function body, we can remove the curly braces and the `return` keyword and the function will return the value of the expression.

Let's see couple more examples:

```js
// normal function
function isPositive(number) {
  return number >= 0;
}

// arrow function

const isPositive = (number) => number >= 0;
```

```js
// normal function
function randomString() {
  return Math.random().toString(36).substring(2);
}

// arrow function

const randomString = () => Math.random().toString(36).substring(2);
```

## More Shorter Syntax

If the arrow function has only one parameter you can remove the parentheses:

```js
// normal function

function double(number) {
  return number * 2;
}

// arrow function

const double = (number) => {
  return number * 2;
};

// shorter syntax
const double = (number) => number * 2;

// more shorter syntax
const double = number => number * 2;
```

## No Parameters

If the arrow function has no parameters you need to use empty parentheses:

```js
// normal function

function getPi() {
  return Math.PI;
}

// arrow function

const getPi = () => {
  return Math.PI;
};

// shorter syntax
const getPi = () => Math.PI;
```

## Arrow Functions and `this`

Arrow functions do not have their own `this`, which means that the `this` keyword inside an arrow function will refer to the `this` keyword in the outer scope.

```js
// normal function
function Person() {
  this.age = 0;

  setTimeout(function growUp() {
    this.age++; // The this refers to the global object, which is window
  }, 1000);
}

let p = new Person();
```

In the above example, the `this` keyword inside the `growUp` function refers to the global object, which is `window`. To fix this we can use the `bind` method:

```js
// normal function
function Person() {
  this.age = 0;

  setTimeout(
    function growUp() {
      this.age++; // The this refers to the Person object
    }.bind(this),
    1000
  );
}

let p = new Person();
```

The bind method returns a new function, where the `this` keyword is bound to the `Person` object.

In **ES6** we can use arrow functions to solve this problem:

```js
// normal function
function Person() {
  this.age = 0;

  setTimeout(() => {
    this.age++; // The this refers to the Person object
  }, 1000);
}

let p = new Person();
```

## Arrow Functions and `arguments`

Arrow functions do not have their own `arguments` object. The `arguments` object is an array-like object that contains the arguments passed to the function.

```js
// normal function
function sum() {
  let total = 0;
  for (let i = 0; i < arguments.length; i++) {
    total += arguments[i];
  }
  return total;
}

console.log(sum(1, 2, 3, 4, 5)); // 15
```

In the above example, the `arguments` object contains the arguments passed to the `sum` function. We can use the `arguments` object to loop through the arguments and add them to the `total` variable.

In **ES6** we can use the rest parameter to solve this problem:

```js
// normal function
function sum(...args) {
  let total = 0;
  for (let i = 0; i < args.length; i++) {
    total += args[i];
  }
  return total;
}

console.log(sum(1, 2, 3, 4, 5)); // 15
```

## Arrow Functions and `prototype`

Arrow functions do not have a `prototype` property. This means that you cannot use the `new` keyword with arrow functions.

```js
const Person = (name) => {
  this.name = name;
};

const p = new Person("John"); // TypeError: Person is not a constructor
```

## Best Practices

You'll end up in your real projects using most of the time Arrow functions, they are shorter and easier, also with the help of the rest parameter you can pass as many arguments as you want.

So use Arrow functions if you want to get rid of the `this` headache and if you want to write shorter functions.

## 🎨 Conclusion

In this article, we learned about arrow functions in **ES6**. We learned how to use arrow functions and how they are different from normal functions. We also learned about the `this` keyword and the `arguments` object in arrow functions.

## ☕♨️ Buy me a Coffee ♨️☕

If you like my articles and work, you can [buy me a coffee](https://www.paypal.com/paypalme/hassanzohdy), it will help me to keep going and keep creating more content.

## 😍 Join our community

Join our community on [Discord](https://discord.gg/pb2vmdfhGf) to get help and support (Node Js 2023 Channel).

## 📚 Bonus Content 📚

You may have a look at these articles, it will definitely boost your knowledge and productivity.

General Topics

* [Event Driven Architecture: A Practical Guide in Javascript](https://dev.to/hassanzohdy/event-driven-architecture-the-best-paradigm-that-i-love-to-work-with-in-javascript-and-node-js-1gnk)
* [Best Practices For Case Styles: Camel, Pascal, Snake, and Kebab Case In Node And Javascript](https://dev.to/hassanzohdy/best-practices-for-case-styles-camel-pascal-snake-and-kebab-case-in-node-and-javascript-55oi)
* [After 6 years of practicing MongoDB, Here are my thoughts on MongoDB vs MySQL
](https://dev.to/hassanzohdy/after-6-years-of-practicing-mongodb-here-are-my-thoughts-on-mongodb-vs-mysql-574b)

Packages & Libraries

* [Collections: Your ultimate Javascript Arrays Manager](https://dev.to/hassanzohdy/collections-your-ultimate-javascript-array-handler-3o15)
* [Supportive Is: an elegant utility to check types of values in JavaScript](https://dev.to/hassanzohdy/supportive-is-an-elegant-utility-to-check-types-of-values-in-javascript-1b3e)
* [Localization: An agnostic i18n package to manage localization in your project](https://dev.to/hassanzohdy/mongez-localization-the-simplest-way-to-translate-your-website-regardless-your-favorite-framework-4gi3)

 React Js Packages

* [useFetcher: easiest way to fetch data in React Js](https://dev.to/hassanzohdy/usefetcher-the-easiest-way-to-fetch-data-in-react-45o9)

Courses (Articles)

* [Node Js 2023 Course: Node With Typescript, The Ultimate Guide](https://dev.to/hassanzohdy/nodejs-course-2023-introduction-to-nodejs-3n4e)
* [React Js: Let"s Create File Manager With React Js and Node Js](https://dev.to/hassanzohdy/lets-create-a-file-manager-from-scratch-with-react-and-typescript-chapter-i-a-good-way-to-expand-your-experience-5g4k)