JavaScript Arrow Functions

Arrow functions were introduced in ES6.

Arrow functions allow us to write shorter functions:

Syntax

let myFunction = (a, b) => a * b;

Try It Yourself

Before:

hello = function() {
  return "Hello World!";
}

Try It Yourself

After using arrow functions:

hello = () => {
  return "Hello World!";
}

Try It Yourself

It has indeed become shorter! If the function has only one statement and the statement returns a value, you can remove the parentheses and return Keyword:

Default return value of arrow function:

hello = () => "Hello World!";

Try It Yourself

Note:This only works if the function has only one statement.

If you have parameters, pass them inside the parentheses:

Arrow function with parameters:

hello = (val) => "Hello " + val;

Try It Yourself

In fact, if there is only one parameter, you can also omit the parentheses:

Arrow function without parentheses:

hello = val => "Hello " + val;

Try It Yourself

this What should we do?

Compared to regular functions, arrow functions have a different handling of this also differs.

In short, using arrow functions does not have the same handling for this binding.

In regular functions, the keyword this refers to the object that calls the function, which can be a window, document, button, or anything else.

For arrow functions,this The keyword always refers to the object that defines the arrow function.

Let's look at two examples to understand the differences.

These two examples call the method twice, once when the page loads and once when the user clicks the button.

The first example uses a regular function, and the second example uses an arrow function.

The result shows that the first example returns two different objects (window and button), and the second example returns two window objects because the window object is the 'owner' of the function.

instance

For regular functions, this refers to the object that calls the function:

// Regular function:
hello = function() {
  document.getElementById("demo").innerHTML += this;
}
// Call the function with the window object:
window.addEventListener("load", hello);
// Call the function with the button object:
document.getElementById("btn").addEventListener("click", hello);

Try It Yourself

instance

used arrow functions, then this Indicates the owner of the function:

// Arrow Function:
hello = () => {
  document.getElementById("demo").innerHTML += this;
}
// Call the function with the window object:
window.addEventListener("load", hello);
// Call the function with the button object:
document.getElementById("btn").addEventListener("click", hello);

Try It Yourself

Remember these differences when using functions. Sometimes, the behavior of regular functions is exactly what you want, and if not, please use arrow functions.

Browser Support

The following table indicates the first browser version to fully support JavaScript arrow functions:

Chrome IE Firefox Safari Opera
Chrome 45 Edge 12 Firefox 22 Safari 10 Opera 32
September 2015 July 2015 May 2013 September 2016 September 2015