Arrow Function in JS

An arrow function expression is a compact alternative to a traditional function expression, with some semantic differences and deliberate limitations in usage:

• Arrow functions don't have their own bindings to this, arguments, or super, and should not be used as methods.

• Arrow functions cannot be used as constructors. Calling them with new throws a TypeError. They also don't have access to the new.target keyword.

• Arrow functions cannot use yield within their body and cannot be created as generator functions.

Example of Arrow Function in JS

// Traditional anonymous function
(function (a, b) {
  const chuck = 42;
  return a + b + chuck;
});

// Arrow function
(a, b) => {
  const chuck = 42;
  return a + b + chuck;
};

Arrow Functions vs Regular Functions

---

Arrow functions do not have their own this, instead, they inherit this from the surrounding scope.

Regular Function (this changes)

const person = {
    name: "John",
    greet: function() {
        console.log(`Hello, my name is ${this.name}`);
    }
};

person.greet(); // Output: Hello, my name is John

Arrow Function (this is inherited)

const person = {
    name: "John",
    greet: () => {
        console.log(`Hello, my name is ${this.name}`);
    }
};

person.greet(); // Output: Hello, my name is undefined (or empty)

---

Arrow Functions in Callbacks

Arrow functions are commonly used in callbacks because they are shorter and do not change this.

Example: Array map() with Regular Function

javascriptCopyEditconst numbers = [1, 2, 3, 4];
const squares = numbers.map(function(num) {
    return num * num;
});
console.log(squares); // Output: [1, 4, 9, 16]

Example: Array map() with Arrow Function

javascriptCopyEditconst numbers = [1, 2, 3, 4];
const squares = numbers.map(num => num * num);
console.log(squares); // Output: [1, 4, 9, 16]

---

Arrow Functions in setTimeout

javascriptCopyEditsetTimeout(() => {
    console.log("This runs after 2 seconds");
}, 2000);

This is useful because setTimeout runs in a different scope, and a regular function would have a different this.

---

Arrow Function with arguments

Arrow functions do not have their own arguments object, unlike regular functions.

Regular Function (Has arguments)

javascriptCopyEditfunction showArgs() {
    console.log(arguments);
}
showArgs(1, 2, 3); // Output: [1, 2, 3]

Arrow Function (No arguments)

javascriptCopyEditconst showArgs = () => {
    console.log(arguments);
};
showArgs(1, 2, 3); // ❌ Error: arguments is not defined

If you need arguments, use the rest operator ...args:

javascriptCopyEditconst showArgs = (...args) => console.log(args);
showArgs(1, 2, 3); // Output: [1, 2, 3]

When to Use Arrow Functions?

✅ Use Arrow Functions When:

• You need a shorter syntax (e.g., for callbacks).

• You want to avoid binding this manually.

• You're working with functional programming (map(), filter(), reduce()).

❌ Avoid Arrow Functions When:

• You need function hoisting.

• You require this to refer to the calling object (e.g., inside objects or classes).

• You need access to the arguments object.

Summary