What are Arrow functions?
Tags: javascript, tutorial, guide, interview
Published: 2021-06-13 08:56:39

---
title: What are Arrow functions?
published: true
description: What are Arrow functions
tags: javascript, tutorial, guide, interview
series: "100 JavaScript Interview Questions"
---

- An arrow function expression is a compact alternative to a traditional function expression, but is limited and can't be used in all situations.
  - Does not have its own bindings to this or super, and should not be used as methods.
  - Does not have arguments, or new.target keywords.
  - Not suitable for call, apply and bind methods, which generally rely on establishing a scope.
  - Can not be used as constructors.
  - Can not use yield, within its body.
- Arrow Functions are a new way of making functions in JavaScript.
- Arrow Function has a cleaner syntax than a function expression 
- We omit the function keyword from traditional function in making arrow function

### Examples of Arrow Functions

```
//ES5 Version
var getCurrentDate = function () {
 return new Date();
};

//ES6 Version
const getCurrentDate = () => new Date();
```

```
//ES5 Version
function greet(name) {
 return "Hello " + name + "!";
}

//ES6 Version
const greet = (name) => `Hello ${name}`;
```

### Comparing traditional functions to arrow functions

```
// Traditional Function
function (a) {
 return a + 100;
}

// Arrow Function Break Down

// 1. Remove the word "function" and place arrow between the argument and opening body bracket
(a) => {
 return a + 100;
}

// 2. Remove the body brackets and word "return" -- the return is implied.
(a) => a + 100;

// 3. Remove the argument parentheses
a => a + 100;
```

- As shown in this code, the { brackets }, ( parentheses ) and "return" are optional, but may be required.

- If you have multiple arguments or no arguments, you'll need to re-introduce parentheses around the arguments

```
// Traditional Function
function (a, b){
 return a + b + 100;
}

// Arrow Function
(a, b) => a + b + 100;
```

```
// Traditional Function (no arguments)

let a = 4;
let b = 2;
function (){
 return a + b + 100;
}

// Arrow Function (no arguments)
let a = 4;
let b = 2;
() => a + b + 100;
```

- Arrow Functions do not magically guess what or when you want to "return".
- If the body requires additional lines of processing, you'll need to re-introduce brackets PLUS the "return"
```
// Traditional Function
function (a, b){
 let chuck = 42;
 return a + b + chuck;
}
// Arrow Function
(a, b) => {
 let chuck = 42;
 return a + b + chuck;
}
```

- For named functions, arrow expressions like variables are treated like variables
```
// Traditional Function
function bob (a){
 return a + 100;
}
// Arrow Function
let bob = a => a + 100;
```

```
const data = {
 result: 0,
 nums: [1, 2, 3, 4, 5],
 computeResult() {
   // "this" here refers to the "data" object
   const addAll = () => {
     // arrow functions "copies" the "this" value of the lexical enclosing function
     return this.nums.reduce((total, cur) => total + cur, 0)
   };
   this.result = addAll();
 }
};
```

- Arrow functions don't have their own this value.
- It captures or gets the this value of lexically enclosing function,
- The function addAll() copies the this value of the computeResult() and if we declare an arrow function in the global scope the value of this would be the window object.

---

Also, to be notified about my new articles and stories:

Subscribe to my [YouTube Channel](https://www.youtube.com/TechTalksWithAK)

Follow me on [Medium](https://ankitdeveloper.medium.com/), [Github](https://github.com/AnkitDroidGit), and [Twitter](https://twitter.com/CodeWithAK_).

You can find me on [LinkedIn](https://www.linkedin.com/in/kumarankitkumar/) as well.

I am quite active on [Dev Community](https://dev.to/ankitkumar) as well and write small topics over there.

If you are Instagram person, follow me [here](https://www.instagram.com/code.with.ak)