Suggest an edit

Improve this article

Refine the answer for “What are arrow functions?”. Your changes go to moderation before they’re published.

Approval required

Content

What you’re changing

Title (EN)

Short answer (EN)

Shown above the full answer for quick recall.

Answer (EN)

## 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

1. 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
```

2. As constructors:

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

3. 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 |

Markdown · drag & drop images · ⌘B / ⌘I shortcuts589 words

For the reviewer

Note to the moderator (optional)

Visible only to the moderator. Helps review go faster.