JavaScript Arrow Functions
Arrow Functions were introduced in ES6 and are commonly used in modern JavaScript.
Arrow Functions allow a shorter syntax for function expressions.
You can skip the function keyword, the return keyword, and the curly brackets:
let myFunction = (a, b) => a * b;
Try it Yourself »
Arrow Function Syntax
An arrow function uses the => symbol.
An arrow function is always written as a function expression.
Example
const add = (a, b) => {
return a + b;
};
This arrow function does the same thing as a regular function expression.
Shorter Syntax
If the function body contains only one statement:
You can remove the word function, the curly brackets and the return keyword.
Before Arrow
Function to compute the product of a and b:
let add = function(a, b) {return a * b}
Arrow Functions with One Parameter
If a function has only one parameter, you can omit the parentheses:
With Paranthesis
let square = (x) => x * x;
Try it Yourself »
Without Paranthesis
let square = x => x * x;
Try it Yourself »
With Paranthesis
let hello = (val) => "Hello " + val;
Try it Yourself »
Without Paranthesis
let hello = val => "Hello " + val;
Try it Yourself »
Arrow Functions Return Value by Default
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.
Arrow Function Parameters
If you have parameters, you pass them inside the parentheses:
If you have only one parameter, you can skip the parentheses as well:
Arrow Functions with No Parameters
If there are no parameters, parentheses are required.
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 »
Arrow Functions Are Not Declarations
Arrow functions are always expressions and must be assigned to a variable.
They cannot be used before they are defined.
Example
hello(); // Error
let hello = () => "Hello";
Note
Arrow functions must be defined before they are used.
Arrow Functions and the this Keyword
Arrow functions do not have their own this value.
They inherit this from the surrounding code.
Example
const person = {
name: "John",
greet: function() {
return this.name;
}
};
Using an arrow function as a method often gives unexpected results.
Example
const person = {
name: "John",
greet: () => {
return this.name;
}
};
In this case, this does not refer to the person object.
When to Use Arrow Functions
- For short functions
- For callbacks and array methods
- When you do not need your own this
When Not to Use Arrow Functions
- As object methods
- When you need your own this
- When using function declarations
Common Mistakes
Forgetting Parentheses Rules
Parentheses are required for zero or multiple parameters.Using Arrow Functions as Methods
Arrow functions do not bind this.Expecting Hoisting
Arrow functions are not hoisted.
Next Chapter
Next: The this Keyword
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 |
