Arrow Functions in JavaScript

Arrow functions provide a concise way to write functions using the => syntax. Introduced in ES6, they are commonly used for callbacks and array methods.

• Use a shorter syntax than regular functions and support implicit returns for single expressions.
• Do not have their own this, arguments, or prototype.
• Cannot be used as constructors with the new keyword.

Syntax:

const functionName = (parameters) => {
    // function body
};

• functionName: Name assigned to the arrow function.
• parameters: Inputs passed to the function.
• =>: Arrow notation used to define the function.
• { }: Contains the function body.

Arrow Functions with Different Parameters

Arrow functions can be defined with no parameters, a single parameter, or multiple parameter:

1. Without Parameters

Use empty parentheses () when there are no parameter

const greet = () => "Hello World";

console.log(greet());

Hello World

2. With One Parameter

Parentheses around a single parameter are optional.

const square = x => x * x;

console.log(square(4));

16

3. With Multiple Parameters

Multiple parameters must be enclosed in parentheses.

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

console.log(add(5, 3));

8

Implicit and Explicit Return

Arrow functions support two types of return syntax:

1. Implicit return

Used when the function body contains a single expression.

const multiply = (a, b) => a * b;

console.log(multiply(3, 5));

15

2. Explicit return

Used with {} when a value needs to be returned using return.

const multiply = (a, b) => {
    return a * b;
};

console.log(multiply(3, 5));

15

Returning Object Literals

Wrap an object literal in parentheses when using an implicit return.

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

console.log(createUser("Ryan", 22));

{ name: 'Ryan', age: 22 }

Without parentheses, {} is interpreted as the function body rather than an object literal.

Default Parameters

• Arrow functions support default parameters.
• The default value is used when an argument is not provided.

const greet = (name = "Guest") => {
    console.log(`Hello, ${name}!`);
};

greet();
greet("Ryan");

Hello, Guest!
Hello, Ryan!

Arrow Functions with Array Methods

Arrow functions are commonly used as callback functions with methods such as map(), filter(), and reduce().

const names = ["Sam", "Sarah", "John"];

const lengths = names.map(name => name.length);

console.log(lengths);

[ 3, 5, 4 ]

• name => name.length is the callback passed to map().
• The callback returns the length of each string.

this in Arrow Functions

Arrow functions do not have their own this.

• They use the this value from the surrounding lexical scope.
• This is useful when a callback needs access to the surrounding this.
• Unlike regular functions, their this cannot be changed using call(), apply(), or bind().

function Person() {
    this.name = "Ryan";

    setTimeout(function() {
        console.log("Regular:", this.name);
    }, 100);

    setTimeout(() => {
        console.log("Arrow:", this.name);
    }, 200);
}

new Person();

Regular: undefined
Arrow: Ryan

The arrow function retains the this value from the surrounding Person function.

Arrow Functions and arguments

Arrow functions do not have their own arguments object.

• Use rest parameters when you need to collect multiple arguments.

const numbers = (...args) => {
    console.log(args);
};

numbers(10, 20, 30);

[ 10, 20, 30 ]

Arrow Functions and new

• Arrow functions cannot be used as constructors.
• They cannot be called with the new keyword.

const Person = () => {
    this.name = "Ryan";
};

const person = new Person();

This results in a TypeError.

Arrow Functions and prototype

• Arrow functions do not have their own prototype property.
• Regular constructor functions have a prototype property.

const Person = () => {};

console.log(Person.prototype);

undefined

Arrow Functions as Object Methods

Arrow functions can be assigned to object properties, but they do not get the object as their this.

const user = {
    name: "Ryan",

    greet: () => {
        console.log(this.name);
    }
};

user.greet();

undefined

When an object method needs this to refer to the object, use method shorthand or a regular function:

const user = {
    name: "Ryan",

    greet() {
        console.log(this.name);
    }
};

user.greet();

Ryan

Async Arrow Functions

Arrow functions can be used with async and await.

• async makes the function return a Promise.
• await can be used inside the function to wait for a Promise.

const fetchData = async () => {
    const response = await fetch("https://api.example.com/data");
    const data = await response.json();

    return data;
};

Also Check:

• Arrow Function vs. Regular Function