Techie BabajiLearn to Code. Build Real Skills.
ES6+ (Modern JavaScript) · Foundations

Arrow Functions

Arrow functions are shorter, but their real superpower is how they handle this. Knowing when to use them — and when not to — is a common interview question.

Beginner 5 min Lesson 3 of 23 Runnable examples
Before you start:JavaScript: Arrow Functionslet and const
0/23 in ES6+
On this page · 5 min · Beginner

On this page

  1. Learning objectives
  2. Explanation
  3. Syntax
  4. Code example
  5. Step by step
  6. Real-world use
  7. Common mistakes
  8. Best practices
  9. Remember this
  10. Practice exercise
  11. Mini quiz
  12. Related topics
  13. My notes
Reading time
5 min
Difficulty
Beginner
Updated
Oct 28, 2026

Related tutorials

Interview questions

Learning objectives#

  • Write arrows with zero, one or many parameters
  • Use implicit return, including for objects
  • Explain lexical this
  • Know where arrow functions do not work

Explanation#

Shapes: () => 42, x => x * 2, (a, b) => a + b, and (x) => { const y = x * 2; return y; } with a body.

Without braces, the expression is returned automatically (implicit return). To return an object literal, wrap it in parentheses: () => ({ ok: true }).

Arrows have no own this. They use the this of the surrounding code (lexical this). That makes them perfect for callbacks inside methods — no more var self = this.

Because of that, arrows are a poor choice for object methods and event handlers that need this to be the object/element. They also cannot be used with new and have no arguments object.

Syntax#

JavaScript Illustrative
const add = (a, b) => a + b;
const makeUser = name => ({ name, active: true });

Code example: Implicit returns and lexical this#

JavaScriptImplicit returns and lexical this Runnable
const square = n => n * n;
const makeUser = name => ({ name, active: true });
console.log(square(5));
console.log(makeUser('Ravi'));


const timer = {
  seconds: 0,
  start() {                       // regular method: this = timer
    [1, 2, 3].forEach(() => {
      this.seconds++;             // arrow borrows this from start()
    });
    console.log('seconds:', this.seconds);
  },
};
timer.start();


const counter = {
  count: 10,
  regular() { return this.count; },
};
console.log(counter.regular());
Expected output
25
{ name: 'Ravi', active: true }
seconds: 3
10
Opens this example in the full playground

Step-by-step explanation#

  1. square has one parameter, so the parentheses are optional and n * n is returned.
  2. makeUser wraps the object in ( ) so the braces are not read as a function body.
  3. Inside start(), this is timer. The arrow callback has no this of its own, so it uses timer too.
  4. counter.regular is a normal method, so this is counter.

Real-world use case#

array.map(x => …), promise.then(data => …) and React event handlers like onClick={() => setOpen(true)} are all arrow functions.

Common mistakes#

Arrow as an object method

const o = { n: 1, get: () => this.n } returns undefined — the arrow’s this is the outer scope, not o. Use get() { return this.n; }.

Forgetting parentheses around an object

() => { ok: true } returns undefined; the braces are a function body with a label. Write () => ({ ok: true }).

new with an arrow

const P = () => {}; new P() throws TypeError: P is not a constructor. Use a class.

Best practices#

  • Use arrows for callbacks and short helpers
  • Use method shorthand for object methods
  • Keep implicit-return arrows to one clear expression
  • Use classes, not arrows, when you need new

Remember this#

Arrows don’t have their own this — they borrow it from where they were written.

Returning an object? Wrap it: () => ({ … }).

Callback → arrow. Method → shorthand method.

Practice exercise#

Your task: Convert to arrows: function double(n) { return n * 2; } and function toPair(k, v) { return { key: k, value: v }; }

Need a hint?
The second one returns an object — remember the parentheses.
Show solution
JavaScript Runnable
const double = n => n * 2;
const toPair = (key, value) => ({ key, value });
console.log(double(4), toPair('a', 1)); // 8 { key: 'a', value: 1 }
Opens this example in the full playground

Mini quiz#

Arrow Functions quizPredict the output Question 1 of 3

What is printed?

const f = () => { value: 1 };
console.log(f());
Score so far: 0/0

Want more? Practise all ES6+ MCQs · ES6+ interview questions

My notes#

Saved in this browser.

Progress is saved in this browser. Sign in to sync.