How do arrow functions differ from regular functions?

Question

How do arrow functions differ from regular functions?

Answer

Arrow functions are lexically scoped — they don’t create their own this, arguments, or prototype.

function Regular() {
  this.name = 'Regular';
  setTimeout(function () {
    console.log(this.name);
  }, 0);
}

function Arrow() {
  this.name = 'Arrow';
  setTimeout(() => {
    console.log(this.name);
  }, 0);
}

new Regular(); // undefined
new Arrow(); // "Arrow"

They’re shorter, cleaner, and ideal for callbacks or array methods.

Real-World Example

Use arrow functions for event handlers in React or callbacks in array methods:

numbers.map((n) => n * 2);

Quick Practice

Convert a traditional function to an arrow function that logs the square of a number.

Summary

Arrow functions are concise, modern, and bind this automatically — perfect for most use cases.