ES6 Arrow Functions: All you need to know
Tags: javascript, codenewbie, beginners, todayilearned
Published: 2019-09-04 14:51:40

ES6 introduced arrow functions which provide a way to write shorter and cleaner code.

```javascript
// Old way
function squareOld(number) {
	return number ** 2;
}

// ES6 way
const squareNew = number => number ** 2;

// Callbacks become cleaner
let array = [1, 2, 3, 4, 5, 6];

// Old
array.filter(function(value) {
	return value % 2 === 0;
});
// [2, 4, 6]

// ES6
array.filter(value => value % 2 === 0);
// [2, 4, 6]
```

Note the following things:

1. The arrow function syntax returns the function which we need to store in a variable
2. We don't write the <code>return</code> keyword. When the function definition is of a single line, the output of that line is returned
3. There are not brackets around the argument <code>number</code>. (This isn't the case when there are more than one arguments)

### The Arrow Syntax

```javascript
// No arguments
const sayHi = () => console.log("Hi");

// One argument, One line
const addFive = number => number + 5;

// Multiple arguments, One line
const addNumbers = (a, b) => a + b;

// One argument, Multiple lines
const doStuffAndAddFive = number => {
	let flavour = "vanilla";
	makeIceCream(flavour);
	eatIceCream();
	return number; /* Note that here we have to use the return keyword */
};

// Multiple arguments, Multiple lines
const doStuffAndAddNumbers = (a, b) => {
	let flavour = "vanilla";
	makeIceCream(flavour);
	eatIceCream();
	return a + b;
};
```

### Binding in vanilla functions

Binding is what differentiates arrow functions from the vanilla functions. Every function has access to the <code>this</code> variable.

Consider the following:

```javascript
function getThis() {
	return this;
}
getThis();
// returns the global object
```

The above function returns the global object when invoked.

Now consider this:

```javascript
let obj = {
	fruit: "Apple",
	calories: 100,
	getThis: function() {
		return this;
	}
};

obj.getThis();
// returns the obj object
```

Now lets look at an ES6 _class_ example:

```javascript
class Fruit {
	constructor(name, calories) {
		this.name = name;
		this.calories = calories;
	}
	getThis() {
		return this;
	}
}

let apple = new Fruit("Apple", 97);
apple.getThis();
// returns apple
```

A peculiar case:

```javascript
let person = {
	name: "Sally",
	getName: function() {
		return this.name;
	}
};

let name = "Sergie";

person.getName();
// "Sally"

let foo = person.getName;

foo();
// "Sergie"
```

When we called <code>person.getName()</code>, <code>this</code> referred to the person object. Then, when we initialiazed <code>foo</code> with the same definition as <code>person.getName</code>,<code>this</code> referred to the global object.

How to figure out where the <code>this</code> keyword points to?

A good "hack" that works _*most*_ of the times is to check if the function call is preceded by the _dot operator_. If it is, then <code>this</code> in the function definition will refer to the object before the dot operator. In the above case <code>person.getName()</code>, resulted in <code>this</code> being referenced to <code>person</code>. If there is no dot operator, <code>this</code> will usually refer to the global object.

Note that this is just a hack and not a rule.

### Binding of arrow functions

Unlike vanilla functions, where binding of <code>this</code> changes according to where the code is defined _lexically_ and not the definition itself, the binding in arrow function remains the same everywhere.

Let's consider the previous code with arrow function:

```javascript
let person = {
  name: "Sally",
  getName: () => this.name;
}

let name = "Sergie";

person.getName();
// "Sergie"

let foo = person.getName;

foo();
// "Sergie"
```

Thus, in both the cases, the arrow function referrenced to the global object with <code>this</code>. In the case of arrow function, the <code>this</code> binding does'nt change. Another hack to check where does the <code>this</code> object of the arrow function points to, is to observe what would be the value of <code>this</code> just before declaring the arrow function.

```javascript
let object = {
	whatsThis: this,
	getThisNew: () => this,
	getThisOld: function() {
		return this;
	}
};

object.whatsThis();
// global

object.getThisNew();
// global

object.getThisOld();
// object
```

Let's test what we know so far in the case of ES6 classes. Note that unlike objects where <code>this</code> refers does not refer to the object itself, in classes it does refer to the instance of the class.

```javascript
class Fruit {
	constructor(name) {
		this.name = name;
	}
	getNameOld() {
		return this.name;
	}
	getNameNew = () => this.name;
}

// global variable
let name = "Sally";

let apple = new Fruit("Apple");

apple.getNameNew();
// "Apple"

apple.getNameOld();
// "Apple"

// Now let's make two new functions:
let foo = apple.getNameOld;
let bar = apple.getNameNew;

foo();
// "Sally"

bar();
// "Apple"
```

Notice how <code>foo</code> returned <code>"Sally"</code> as it got _binded_ to the global object while <code>bar</code> got binded to the <code>apple</code> object and returned <code>"Apple"</code>.

Thus in summary, vanilla functions follow the _dot_ operator "hack" while the arrow functions stay _binded_ to the value of <code>this</code> that was there just before the function was defined. This binding stays even if the function is re-declared unlike the vanilla flavour.

> And that is all that you need to know about the ES6 Arrow Functions. If you found a mistake or have some doubt, let me know in the comments. Thank You for reading and have a wonderful day 😄