Search⌘ K
Home
Courses
Step Up Your JS: A Comprehensive Guide to Intermediate JavaScript

Arrow Functions () => {}

Explore how to create efficient and clear arrow functions in JavaScript using ES2015 syntax. Understand when and how to use arrow functions versus traditional functions, including syntax shortcuts for single-line returns and single parameters. Gain practical insights to improve writing and readability of callback functions in your code.

We'll cover the following...

We now have a new way to write a function. The following two functions are equivalent.

Javascript (babel-node)
const standardFnAdd = function(num1, num2) {
    console.log(num1 + num2);
    return num1 + num2;
}
const arrowFnAdd = (num1, num2) => {
    console.log(num1 + num2);
    return(num1 + num2);
};
standardFnAdd(2, 5); // -> 7
arrowFnAdd(2, 5); // -> 7

These new functions are called arrow functions. Let’s break down what’s happening so far. We can omit the function keyword. Between the parameter brackets and the function body brackets, we need to add =>.

This shorthand decreases the number of characters we need to write, but there’s more to it than just that.

Note also that arrow functions can only be written as function ...