ES6: Arrow functions explained
Tags: node, javascript, tutorial, webdev
Published: 2022-01-12 09:15:28


## Introduction

ES6 introduced arrow functions. In arrow functions, we drop the `function` keyword.

### Pre-ES6 functions declaration and function expression
```typescript
// function declaration
function add(x , y) {
  return x + y // add and return value to calling function in one line
}
// somewhere else
const sum = add(2, 8)
console.log(sum) // prints 10

// function expression
const multiply = function (x, y) {
  return x * y
}

```
#### ES6 Arrow functions

In ES6 arrow functions:
1. we drop the `function` keyword
2. before after the params, we introduce "arrow" symbol => , equal symbol + 
3. function signature takes this form `(param1, param2) => { body}`
4. we assign this to a `const` to make it usable elsewhere in our program.
so a complete signature for arrow function becomes:

 ```typescript
const arrowFn = (param1,param2) => { 
  // function body
 }
 ```

Rewriting the above Pre-ES6 function becomes:
```typescript
// function expression
const add = function (x, y) {
  return x + y
}

// in ES6 arrow functions, becomes:
const add = (x, y) => {
  return x + y
}

// usage
const sum = add(2, 8) // sum now holds value of 10
console.log(sum) // prints 10 to the console
```
Droping the parentheses and the `return` keyword altogether.

```typescript
const add = (x, y) => x + y
```

### Arrow functions and lexical `this`
In JavaScript `this` points to the `window` object of the browser(in the browser).

Checking  `this` object from browser console:

![this snippet](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/izheyxz9n6p5aise4jw6.png)

From the above, `this === window` objects.

Checking the `window` object from browser console:

![window snippet](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/chepubudppwnh9rgw4wm.png)

In JavaScript, `this` keyword points to the object in the current execution context. You'd rarely use `this` unless your code requires an explicit use of `this`

Say you have a function,
```typescript
function multipy() {
  console.log(typeof this)
}
multiply() // prints object, when multiply is called, we this will point to the global this, window object in the browser environment
```

In an object literal:

```typescript
const hero = {
  name: 'Sasuke',
  printDetails: function() {
    console.log(`hero details, name: ${this.name}`)
  },
  printThis: function() {
    console.log(this) // when called, this will point to hero object, logs hero object, try it out :)
  }
}
hero.printDetails() // prints hero details, name: Sasuke
hero.printThis() 
```

Arrow function lacks its “own” this. Using the arrow function in object literals causes this to point to the lexical this and not the enclosing object literal.

Observe:

```typescript
const hero = {
  name: 'Sasuke',
  // change to arrow function
  printDetails: () => {
    console.log(`hero details, name: ${this.name}`) 
  },
  printThis: function() {
    console.log(this) // when called, this will point to hero object, logs the surrounding this, eg window object, try it out :)
  }
}
hero.printDetails() // prints hero details, name: undefined
hero.printThis() // logs refference to the  "surrounding object" 
```

### Summary
Arrow functions introduce a cleaner syntax for writing function expressions. Arrow functions do not replace regular function declaration.

When to use Arrow functions:
1. In callbacks:
`items.map((item) => { // do something with item})` is a bit cleaner than `items.map(function(item) { // do something with item})`
2. Create functions that are not hoisted. Function declarations(the pre-ES6 functions) get hoisted and can be called anywhere in the program.

Read more next week about 👉 [for/of]()
***
Until next week, adios!