ES6: Arrow functions explained

Introduction

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

Pre-ES6 functions declaration and function expression

// 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:

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

Rewriting the above Pre-ES6 function becomes:

// 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.

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:

From the above, this === window objects.

Checking the window object from browser console:

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,

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:

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:

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!