Arrow Functions

Arrow Functions are a shorter and cleaner way to write functions in JavaScript.

They were introduced in ES6 (ECMAScript 2015).

Arrow functions let you write functions with less code and better readability.

Why Arrow Functions?

Before ES6, functions were written using the function keyword, which often resulted in:

Arrow functions solve this by:

Syntax

Traditional Function

function add(a, b) {
    return a + b;
}

Arrow Function

const add = (a, b) => {
    return a + b;
};

Shorter Syntax (Implicit Return)

If the function has only one statement, you can omit {} and return.

const add = (a, b) => a + b;

Arrow Function with One Parameter

Parentheses are optional if there is only one parameter.

const square = x => x * x;

Arrow Function with No Parameters

const greet = () => "Hello JavaScript";
console.log(greet());

Arrow Functions with Objects

When returning an object, wrap it in parentheses.

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

Arrow Functions and this

Arrow functions do not have their own this.

They inherit this from their surrounding scope.

Example

function Person() {
    this.age = 25;

    setTimeout(() => {
        console.log(this.age);
    }, 1000);
}

new Person();

Output

Where Arrow Functions Are Commonly Used

Example with map()

const numbers = [1, 2, 3];
const squares = numbers.map(n => n * n);
console.log(squares);

Limitations of Arrow Functions

Two Minute Drill

Quipoin Menu