DEV Community

Cover image for ES6: Arrow functions explained
Naftali Murgor
Naftali Murgor

Posted on

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
}

Enter fullscreen mode Exit fullscreen mode

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
 }
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

Droping the parentheses and the return keyword altogether.

const add = (x, y) => x + y
Enter fullscreen mode Exit fullscreen mode

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

From the above, this === window objects.

Checking the window object from browser console:

window snippet

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
Enter fullscreen mode Exit fullscreen mode

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() 
Enter fullscreen mode Exit fullscreen mode

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" 
Enter fullscreen mode Exit fullscreen mode

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!

Discussion (0)