Arrow functions provide a concise syntax:

// Traditional function expression
const greet = function(name) {
  return `Hello, ${name}!`;
};

// Arrow function
const greet = (name) => `Hello, ${name}!`;

Key characteristics: - Shorter syntax, especially for simple returns. - Implicit return when the body is a single expression (no {} and no return). - Cannot be used as constructors. - No arguments object (but can use rest parameters). - Lexical this — the most important difference.

Here's how arrow functions compare to traditional functions:

// 1. No parameters
const sayHello = () => console.log('Hello');

// 2. Single parameter (parentheses optional)
const double = x => x * 2;

// 3. Multiple parameters
const add = (a, b) => a + b;

// 4. Block body (requires explicit return)
const multiply = (a, b) => {
  const result = a * b;
  return result;
};

// 5. Returning an object literal (wrap in parentheses)
const makeUser = (name, age) => ({ name, age });

In traditional functions, this is determined by how the function is called (dynamic binding). This can be confusing:

const person = {
  name: 'Alice',
  greet: function() {
    console.log(`Hi, I'm ${this.name}`);
  }
};
person.greet(); // this = person → "Hi, I'm Alice"

const greetFn = person.greet;
greetFn(); // this = global (or undefined in strict mode) → "Hi, I'm undefined"

Arrow functions do not have their own this. They capture this from the enclosing lexical scope at the time they are defined:

const person = {
  name: 'Alice',
  greet: () => {
    console.log(`Hi, I'm ${this.name}`);
  }
};
person.greet(); // this = outer scope (e.g., window) → "Hi, I'm undefined"
// So this is NOT a good use case for arrow functions.

Where does lexical this shine?

Inside callbacks, timers, event listeners, and especially React class components:

function Timer() {
  this.seconds = 0;
  setInterval(function() {
    this.seconds++; // this refers to global, not Timer instance
    console.log(this.seconds);
  }, 1000);
}
// With arrow function:
function Timer() {
  this.seconds = 0;
  setInterval(() => {
    this.seconds++; // this is lexical = Timer instance
    console.log(this.seconds);
  }, 1000);
}

Arrow functions do not have their own arguments object. If you try to use arguments inside an arrow function, it will resolve to the arguments of the enclosing scope.

function outer() {
  const inner = () => {
    console.log(arguments); // refers to outer's arguments
  };
  inner(1, 2, 3); // logs outer's arguments, not [1,2,3]
}
outer('a', 'b');
// Output: ['a', 'b']

To capture arguments in an arrow function, use rest parameters:

const sum = (...args) => args.reduce((acc, val) => acc + val, 0);
console.log(sum(1, 2, 3)); // 6

Arrow functions cannot be used with the new keyword. They do not have a prototype property and do not have their own this binding.

const Person = (name) => {
  this.name = name;
};
const alice = new Person('Alice'); // TypeError: Person is not a constructor

Only regular functions (declared with function) can be constructors.

In React, you'll often use arrow functions in these scenarios:

• Event handlers in class components (as class fields) to automatically bind this.
• Callbacks inside hooks like useEffect or useCallback to preserve the correct this (though hooks usually don't need this).
• Functional components — you can use arrow functions for the component itself or for inline handlers.
• Array methods like map, filter, reduce — arrow functions provide concise syntax and keep this from the outer component if needed.

class MyComponent extends React.Component {
  // Class field arrow function – automatically bound
  handleClick = () => {
    console.log('Clicked!', this.props.id);
  };

  render() {
    return (
      <button onClick={this.handleClick}>
        Click Me
      </button>
    );
  }
}

• Arrow functions provide a shorter syntax but have key behavioural differences:
• Lexical this – inherits this from the outer scope; cannot be rebound.
• No arguments – use rest parameters instead.
• Cannot be constructors – no prototype.
• No new.target.
• Use arrow functions when you need to preserve the surrounding this, such as in React event handlers, callbacks, and array methods.
• Avoid arrow functions for object methods (where you need the object's this) or when you need dynamic binding.

Happy coding!