What are arrow functions?

JavaScriptJunior~2 min read

What an arrow function is

An arrow function is a shorthand syntax for declaring functions in JavaScript. It is written with an arrow =>.

Example:

javascript

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

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

It does the same thing, but shorter, and reads as:

"take a and b, return their sum".

Main features

Feature	Description
Short syntax	No `function` or `return` keywords needed (for a single expression), and no curly braces.
Has no own `this`	Inherits `this` from the outer scope (lexically).
Has no `arguments`	If you need arguments, use rest parameters (`...args`).
Cannot be a constructor	Cannot be called with `new`.
Has no `prototype`	Not suitable for creating classes or prototype-based methods.

1. Arrow function syntax

Classic short form:

javascript

const double = x => x * 2;

Several parameters:

javascript

const add = (a, b) => a + b;

No parameters:

javascript

const sayHi = () => console.log("Hello!");

A body with several lines (needs `return`):

javascript

const sum = (a, b) => {
  const result = a + b;
  return result;
};

Returning an object:

You need to wrap the object in parentheses, otherwise {} will be read as the function body.

javascript

const createUser = (name, age) => ({ name, age });

2. The main difference - `this` behavior

An arrow function has no this of its own. It inherits this from the outer context in which it was created.

Example with a regular function:

javascript

function Timer() {
  this.seconds = 0;
  setInterval(function () {
    this.seconds++; // 'this' points to window / undefined
  }, 1000);
}

Example with an arrow function:

javascript

function Timer() {
  this.seconds = 0;
  setInterval(() => {
    this.seconds++; // 'this' points to the Timer object itself
  }, 1000);
}

The arrow function "captures" the context of the outer function, so this works as expected.

3. Where arrow functions do not fit

As object methods:

javascript

const user = {
  name: 'Alex',
  sayHi: () => console.log(`Hi, I'm ${this.name}`) // 'this' will not point to user!
};
user.sayHi(); // Hi, I'm undefined

As constructors:

javascript

const User = (name) => { this.name = name; }; // Error
const u = new User('Tim'); // TypeError

When you need arguments:

javascript

const log = () => console.log(arguments); // ReferenceError

Use rest instead:

javascript

const log = (...args) => console.log(args);

4. When arrow functions are ideal

Callbacks (for example, in map, filter, forEach):

javascript
const doubled = [1, 2, 3].map(n => n * 2);
Asynchronous chains (then, catch, finally):

javascript
fetch('/api') .then(res => res.json()) .then(data => console.log(data));
Nested functions where this needs to be preserved:

javascript
class User { constructor(name) { this.name = name; } greetLater() { setTimeout(() => console.log(`Hi, ${this.name}`), 1000); } }

Quick comparison

Property	`function`	`=>` (arrow)
Has its own `this`	Yes	No
Has `arguments`	Yes	No
Can be called with `new`	Yes	No
Can be used as a method	Yes	Not recommended
Syntax	Longer	Short, concise

Short Answer

Interview ready

Premium

A concise answer to help you respond confidently on this topic during an interview.