Arrow Functions

Arrow functions allow us to write shorter function syntax.

const name = function() 
{
  return "Mary";
}


const name = () => 
{
  return "Mary";
}

 

If the function has only one statement, and the function returns a value, we can remove the curly brackets and the return keyword

const name = () => "Mary";

Note that, if you include curly brackets (ie your function is in a block), then you must include the return keyword

const name = () => { return "Mary"};

 

If a function has only one parameter, we can remove the round brackets

/* With round brackets */
const square = (number) => number * number;

/* Without round brackets */
const square = number => number * number;

 

An arrow function cannot contain a line break between its parameters and its arrow.

/* Syntax error */
const result = ()
  => 1;


/* This is allowed */
const func = () =>
  1;

 

JSON objects can return JSON objects (also called an object literal). The JSON object needs to be wrapped in parentheses.

const setDetails = (name, age) => ({name: name, age: age});

let details = setDetails ("Mary", 20);
alert(details.name + "  " + details.age); 

Binding

With arrow functions the this keyword represents the object that called the arrow function. Therefore, with arrow functions there is no binding of this.

In the example below, we need to bind the call to displayMessage(), so that the interval will operate on this specific object instance.

class BindExample
{
    constructor(delay, message)
    {
        this.message = message;
        setInterval(this.displayMessage.bind(this), delay); // works
    }
                          
    displayMessage = () => console.log(this.message);
}
            
let bindHello = new BindExample(1000, "Hello");
let bindWorld = new BindExample(5000, "World");

We can implement the same functionality using an arrow function, as shown below. In this case, we do not need to bind this, as it refers to the object that called the arrow function.

class BindExample
{
    constructor(delay, message)
    {
        this.message = message;
        setInterval( () => this.displayMessage(), delay); // works
    }
                          
    displayMessage = () => console.log(this.message);
}
            
let bindHello = new BindExample(1000, "Hello");
let bindWorld = new BindExample(5000, "World");

 

Note that we cannot embed a function inside the setInterval using a standard function call, as shown below.

class BindExample
{
    constructor(delay, message)
    {
        this.message = message;
        setInterval(function(){this.displayMessage.bind(this);}, delay); // Does not work
    }
                          
    displayMessage = () => console.log(this.message);
}
            
let bindHello = new BindExample(1000, "Hello");
let bindWorld = new BindExample(5000, "World");

 

 
<div align="center"><a href="file:///C|/Users/Derek/Documents/Notes/versionC/index.html" title="DKIT Lecture notes homepage for Derek O&#39; Reilly, Dundalk Institute of Technology (DKIT), Dundalk, County Louth, Ireland. Copyright Derek O&#39; Reilly, DKIT." target="_parent" style='font-size:0;color:white;background-color:white'>&nbsp;</a></div>