What is arrow function in Javascript

Introduced in ES6 (ECMAScript 2015), they have become a popular syntax in modern JavaScript programming.

Here's an example:

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

In this example, add is the function name, a and b are the parameters, and a + b is the return value. The => syntax indicates it's an arrow function.

Arrow functions have several key differences compared to regular functions:

• Concise syntax: They offer a shorter syntax, not requiring the function keyword or curly braces for single-expression bodies.
• Implicit return: If the function body is a single expression, the result is automatically returned without needing the return keyword.
• Lexical this binding: Arrow functions inherit the this value from their surrounding context, avoiding issues related to lexical scoping with the this keyword.

Here's another example that demonstrates the implicit return and lexical this binding in arrow functions:

const person = {
  firstName: 'John',
  lastName: 'Doe',
  fullName: function () {
    return `${this.firstName} ${this.lastName}`;
  },
  arrowFullName: () => `${this.firstName} ${this.lastName}`
};

console.log(person.fullName()); // Output: John Doe
console.log(person.arrowFullName()); // Output: undefined undefined

In this example, person.fullName() is a regular function that correctly returns the full name using the this keyword. However, person.arrowFullName() is an arrow function that inherits the global this value, resulting in undefined for both firstName and lastName.

const person = {
  name: "John",
  age: 30,
  greet: function() {
    // Using a regular function for the greet method
    setTimeout(function() {
      console.log(`Hello, my name is ${this.name}`); // "this" refers to the global object here
    }, 1000);
  },
  greetArrow: function() {
    // Using an arrow function for the greetArrow method
    setTimeout(() => {
      console.log(`Hello, my name is ${this.name}`); // "this" refers to the person object
    }, 1000);
  }
};

person.greet(); // undefined because "this" refers to the global object
person.greetArrow(); // "Hello, my name is John" because "this" refers to the person object

If the function body has a single expression, it automatically returns the result. In the arrow function example, there is no need to explicitly use the return keyword. In this case, it's not shown directly because it's a method inside setTimeout(), but arrow functions would return the value of a single expression.

In the regular greet() method, the this inside setTimeout refers to the global object (or undefined in strict mode), so this.name returns undefined.

In the greetArrow() method, the arrow function inside setTimeout inherits the this value from the surrounding greetArrow() function, which refers to the person object. Thus, this.name correctly returns "John".

Arrow functions are often used for concise syntax, particularly in higher-order functions, array methods like map and filter, or when working with callbacks.