JS Arrow Function

JavaScript Arrow Functions: Concise Syntax and Lexical this

JavaScript arrow functions (=>) offer a compact way to write function expressions while preserving the outer scope's this value. Introduced in ES6, they shine inside array callbacks like map(), filter(), and event handlers.

Implicit Returns and Syntax Shortcuts

When an arrow function has one expression, you can omit both {} braces and the return keyword. Notice the clean variants:

• One parameter: const double = n => n * 2; (or (n) => n * 2 with Prettier).
• Multiple parameters: const add = (a, b) => a + b;
• Returning an object literal implicitly: Wrap { ... } in parentheses () => ({ ok: true }) so JavaScript does not mistake { for a function body block.

Lexical this in Action

Unlike regular function declarations, arrow functions never create their own this binding. They capture this from the surrounding function where they are defined, which eliminates older const self = this; workarounds inside timers and callbacks.

const prices = [10, 25, 40];
const withTax = prices.map((p) => Number((p * 1.1).toFixed(2)));
console.log("With tax:", withTax);

// Returning an object literal requires parentheses around {}
const buildTag = (label) => ({ label, slug: label.toLowerCase() });
console.log("Tag object:", buildTag("JavaScript"));

// Lexical this preserved inside callback
const timerBox = {
  seconds: 3,
  start() {
    setTimeout(() => {
      console.log(`Timer finished after ${this.seconds}s`);
    }, 10);
  },
};
timerBox.start();

Common Mistakes to Avoid

• Writing x => { id: x } without parentheses: JavaScript parses { id: x } as a labeled block returning undefined. Always write x => ({ id: x }).
• Using arrow functions for constructors: Arrow functions cannot be called with new; doing so throws TypeError: Fn is not a constructor.
• Relying on arguments inside arrow functions: Arrow functions have no arguments object. Use rest parameters (...args) instead.

Frequently Asked Questions

When should I avoid arrow functions?

Avoid arrow functions for object methods that need this to point to the object, constructor functions, and generator functions (function*).

Are arrow functions hoisted like function declarations?

No, because arrow functions are assigned to const or let variables, they stay in the Temporal Dead Zone until their declaration line executes.

Do arrow functions support default parameters and destructuring?

Yes, const greet = ({ name = "Guest" } = {}) => \Hi, ${name}`;` works identically to standard functions.