Practice Questions

What are arrow functions in JavaScript?

MediumEasyJavascript

By FrontendAtlas Team · Updated Feb 1, 2026

Preparing for interviews?

Use guided tracks for structured prep, then practice company-specific question sets when you want targeted interview coverage.

Explore interview tracks Browse company questions Open JavaScript prep path

Quick Answer

Arrow functions are a shorter syntax for writing functions in JavaScript, introduced in ES6. They don’t have their own this, arguments, or prototype. Use them for callbacks, but watch edge cases with this binding and constructor usage; add tests for behavior.

Answer

The Core Idea

Arrow functions provide a compact syntax for writing functions. They are especially useful for callbacks and one-liners. However, unlike regular functions, they do not have their own this or arguments binding.

JAVASCRIPT

// Traditional function
function add(a, b) {
  return a + b;
}

// Arrow function
const addArrow = (a, b) => a + b;

console.log(addArrow(2, 3)); // 5

Feature	Description	Example
Shorter Syntax	No need for the `function` keyword or curly braces for one-liners.	`const double = x => x * 2;`
Implicit Return	If the body has a single expression, its value is returned automatically.	`const add = (a, b) => a + b;`
Lexical `this`	Arrow functions don’t create their own `this` — they inherit it from the surrounding scope.	`this` inside arrow → same as outside
No `arguments`	They don’t have an `arguments` object — use rest parameters instead.	`const fn = (...args) => console.log(args);`

Key differences between arrow functions and traditional functions.

Arrow functions and this

In regular functions, this depends on how the function is called. But in arrow functions, this is lexically bound — it refers to the value of this in the outer scope.

JAVASCRIPT

function Counter() {
  this.count = 0;
  setInterval(() => {
    this.count++;
    console.log(this.count);
  }, 1000);
}

new Counter(); // Works ✅ — 'this' refers to the Counter instance

Be careful:

You can’t use arrow functions as constructors (new keyword will throw an error).
They also don’t have their own prototype.

Practical scenario
Using arrow functions inside map or React event handlers to keep callbacks concise.

Common pitfalls

Arrow functions do not have their own this, so methods relying on this can break.
They cannot be used as constructors with new.
Implicit returns can hide logic mistakes when you switch to a block body.

Trade-off or test tip
Prefer arrows for short callbacks, but use named functions for clarity and debugging. Test both behavior and this binding.

Still so complicated?

Think of arrow functions as assistants — they don’t have their own this; they simply use their boss’s this from the outer scope.

Summary

Shorter syntax for cleaner code.
Lexically binds this and doesn’t create its own arguments.
Great for callbacks, array methods, and event handlers.
Avoid them when you need your own this or when defining class methods.