JavaScript Arrow Function
Arrow functions were introduced in ES6.
Arrow functions allows a shorter syntax for function expressions.
You don't need the function keyword, the return keyword, and the curly brackets:
let myFunction = (a, b) => a * b;
Try it Yourself »
Before Arrow:
Function to compute the product of a and b
let myFunction = function(a, b) {return a * b}
If the function has only one statement that returns a value, you can remove the brackets and the
return keyword:
Note
This works only if the function has only one statement.
If you have parameters, you pass them inside the parentheses:
In fact, if you have only one parameter, you can skip the parentheses as well:
Note
Arrow functions do not have their own this. They are not well suited for defining object methods.
Arrow functions are not hoisted. They must be defined before they are used.
You can only omit the return keyword and the curly brackets if the function is a single statement. Because of this, it might be a good habit to always keep them:
Example
// This will not work
let myFunction = (x, y) => { x * y } ;
// This will not work
let myFunction = (x, y) => return x * y ;
// Only this will work
let myFunction = (x, y) => { return x * y };
Try it Yourself »
What About this?
The handling of this is also different in arrow functions compared to regular
functions.
In short, with arrow functions there are no binding of
this.
In regular functions the this keyword represented the object that called the
function, which could be the window, the document, a button or whatever.
With arrow functions the this keyword always represents the
object that
defined the arrow function.
Let us take a look at two examples to understand the difference.
Both examples call a method twice, first when the page loads, and once again when the user clicks a 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 the window object twice, because the window object is the "owner" of the function.
Example
With a regular function this represents the
object that calls the function:
// Regular Function:
hello = function() {
document.getElementById("demo").innerHTML
+= this;
}
// The window object calls the function:
window.addEventListener("load", hello);
// A button object calls the
function:
document.getElementById("btn").addEventListener("click", hello);
Example
With an arrow function this represents the
owner of the function:
// Arrow Function:
hello = () => {
document.getElementById("demo").innerHTML
+= this;
}
// The window object calls the function:
window.addEventListener("load", hello);
// A button object calls the
function:
document.getElementById("btn").addEventListener("click", hello);
Remember these differences when you are working with functions. Sometimes the behavior of regular functions is what you want, if not, use arrow functions.
Browser Support
= () => {} is an ES6 feature.
ES6 is fully supported in all modern browsers since June 2017:
| Chrome 51 |
Edge 15 |
Firefox 54 |
Safari 10 |
Opera 38 |
| May 2016 | Apr 2017 | Jun 2017 | Sep 2016 | Jun 2016 |
