Arrow Functions

JavaScript Arrow Function

An Arrow Function in javascript is basically Function Expression, with less code and some limitations. Arrow Functions are primarily used as callback functions in javascript or function Expressions with less code.

Arrow Functions are basically Anonymous Functions used in variables or as callbacks. Arrow Function use Fat Arrows, i.e => to defined a function.

Arrow Function Example

    
    const sayHi = ()=>"hello";
        

sayHi is variable name with value as arrow function. () are for parameters and "hello" is return value.

How to Create Arrow Functions

Arrow functions can be created using single-line or multi-line syntax.

Single-line Arrow Functions

If the function body is a single expression, you can omit curly braces {} and the return keyword. The value of the expression is returned automatically.

const sayHi = x => `hello ${x}`;
const sayBye = x => `bye bye ${x}`;
const sum = (x, y) => x + y;

Multi-line Arrow Functions

For multiple statements, use curly braces {} and explicitly use the return keyword if you want to return a value.

const sayHi = () => {
    return "hello";
};

Arrow Function with Single Parameter

const sayHi = x => {
    return `hello ${x}`;
};

Arrow Function with Multiple Parameters

const sum = (x, y) => {
    return x + y;
};

Arrow Functions are best recommended for following cases.

1. Function expressions (assigning functions to variables)
2. Callback functions (e.g., in map, filter, forEach)
3. Event handlers (when this is not needed)
4. Short utility functions

Arrow functions are not suitable when you need your function to have its own this, arguments, or to be used as a constructor.

Drawbacks

Arrow functions have some important limitations:

1. Do not have their own this binding (they inherit from the parent scope)
2. Do not have their own arguments object
3. Cannot be used as constructors (cannot use new with them)
4. Do not have a prototype property

Arrow Function vs Regular Function

Here is the difference between Arrow Functions and Regular Functions in JavaScript:

Example: Arrow Function vs Regular Function

// Regular function
function add(x, y) {
    return x + y;
}

// Arrow function
const addArrow = (x, y) => x + y;

console.log(add(2, 3));      // 5
console.log(addArrow(2, 3)); // 5
        

Arrow functions in Events

Arrow functions can be used in event listeners as callback where this is not required. However we can use event.target where event is parameter of arrow function.

document.querySelector("button").addEventListener("click",(e)=>{
    document.querySelector("span").innerHTML="Clicked";
});
    

Arrow functions in Arrays

Arrow functions are always recommended in arrays as callback for sort, filter other methods. There this keyword in not required.

    const data=[1,2,3,4,5,6];
    const even=data.filter(i=>i%2==0);

    console.log(data);
    console.log(even);

FAQ: JavaScript Arrow Functions

Summary

JavaScript Arrow Functions provide a concise syntax for writing function expressions and are ideal for callbacks and array methods. However, they have important limitations regarding this, arguments, and cannot be used as constructors. Use arrow functions when you want shorter code and do not need the features of regular functions.