Techie BabajiLearn to Code. Build Real Skills.
JavaScript · Functions

Arrow Functions

Arrow functions are a shorter way to write functions. You will see them everywhere in modern JavaScript, especially with array methods.

Beginner 5 min Lesson 10 of 49 Runnable examples
Before you start:Functions
0/49 in JavaScript
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 27, 2026

Related tutorials

Interview questions

Learning objectives#

  • Write arrow functions with and without braces
  • Use implicit returns
  • Return object literals correctly
  • Know when not to use arrows

Explanation#

(a, b) => a + b is a function. With a single parameter you can drop the parentheses: n => n * 2.

Without braces, the expression after => is returned automatically (implicit return). With braces, you must write return.

To return an object directly, wrap it in parentheses: () => ({ name: 'Asha' }). Otherwise the braces are read as a function body.

Arrow functions do not have their own this. That is great for callbacks inside methods, but it means you should not use them as object methods that need this.

Syntax#

JavaScript Illustrative
const f = (a, b) => a + b;
const g = x => { const y = x * 2; return y; };
const h = () => ({ ok: true });

Code example: Short and sweet#

JavaScriptShort and sweet Runnable
const double = n => n * 2;
const sum = (a, b) => a + b;
const makeUser = name => ({ name, active: true });


console.log(double(5), sum(2, 3));
console.log(makeUser('Asha'));
console.log([1, 2, 3].map(n => n * 10));
Expected output
10 5
{ name: 'Asha', active: true }
[ 10, 20, 30 ]
Opens this example in the full playground

Step-by-step explanation#

  1. double has one parameter, so no parentheses are needed, and the result is returned implicitly.
  2. sum takes two parameters, so they are wrapped in parentheses.
  3. makeUser wraps the object in ( ) so it is returned, not treated as a block.
  4. Arrows shine as short callbacks: map(n => n * 10).

Real-world use case#

Arrow functions are the default style for callbacks in React components, array transformations and promise chains.

Common mistakes#

Braces without return

x => { x * 2 } returns undefined. Either drop the braces or add return.

Arrow functions as object methods

const user = { name: 'A', hi: () => this.name } — this is not the user. Use hi() { return this.name; }.

Best practices#

  • Use arrows for short callbacks
  • Use regular methods inside objects and classes when you need this
  • Wrap returned object literals in parentheses
  • Prefer readable names over squeezing logic into one line

Remember this#

No braces = automatic return. Braces = write return yourself.

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

Arrows borrow this from outside; they never create their own.

Practice exercise#

Your task: Rewrite function isEven(n) { return n % 2 === 0; } as an arrow function and use it with filter on [1, 2, 3, 4, 5, 6].

Show solution
JavaScript Runnable
const isEven = n => n % 2 === 0;
console.log([1, 2, 3, 4, 5, 6].filter(isEven)); // [ 2, 4, 6 ]
Opens this example in the full playground

Mini quiz#

Arrow Functions quizPredict the output Question 1 of 1

What does this return?

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

Want more? Practise all JavaScript MCQs · JavaScript interview questions

My notes#

Saved in this browser.

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