# Arrow functions: a simpler way to write functions

Arrow functions are the modern way to write functions in JavaScript — cleaner, shorter, and more readable. Once you see them, you'll want to use them everywhere.

# **What are arrow functions?**

## **Less typing, same power**

In JavaScript you've always been able to write functions using the `function` keyword. Arrow functions are a newer, shorter way to write the exact same thing — introduced in ES6 (2015). They use a `=>` symbol that looks like an arrow, hence the name.

Here's the simplest comparison — both functions do the exact same thing:

**Normal function**

```javascript
function greet(name) {
  return "Hello, " + name;
}
```

**Arrow function**

```javascript
const greet = (name) => {
  return "Hello, " + name;
};
```

**Notice:** Arrow functions don't have the `function` keyword. Instead, you store them in a variable using `const` and use `=>` between the parameters and the body.

# **Syntax breakdown**

## **Anatomy of an arrow function**

Let's label every part of an arrow function so nothing feels mysterious.

**Arrow function syntax — every piece labeled**

![](https://cdn.hashnode.com/uploads/covers/695242a29d62c558ed3be960/98439213-8f64-4851-91d6-0ef88650ebc9.png align="center")

# **One parameter**

## **Single parameter — drop the parentheses**

When your arrow function only takes *one* parameter, you can skip the parentheses around it. This makes the function even shorter.

**Full**

```javascript
const double = (n) => {
  return n * 2;
};
```

**Rule:** One parameter = parentheses optional. Zero or two+ parameters = parentheses required.

**Examples with 0, 1, and 2 parameters**

```javascript

// No parameters — parentheses required
const greet = () => "Hello!";

// One parameter — parentheses optional
const square = n => n * n;

// Multiple parameters — parentheses required
const add = (a, b) => a + b;
```

# **Implicit return**

## **Skipping the** `return` **keyword**

This is the most loved shortcut in arrow functions. When your function body is just a *single expression*, you can remove the curly braces *and* the `return` keyword. The value gets returned automatically — this is called an **implicit return**.

**Explicit**

const square = n => { return n \* n; }

**Implicit**

const square = n => n \* n

Both versions do the exact same thing. The implicit version just removes all the ceremony and leaves only what matters.

**Implicit vs explicit — more examples**

```javascript
// Explicit return (curly braces + return keyword)
const multiply = (a, b) => { return a * b; }

// Implicit return (single expression — no braces, no return)
const multiply = (a, b) => a * b

// Implicit return with a string
const greet = name => `Hello, ${name}!`

// When you need multiple lines, use curly braces + explicit return
const describe = name => {
  const msg = `Name: ${name}`;
  return msg;
}
```

![](https://cdn.hashnode.com/uploads/covers/695242a29d62c558ed3be960/c69b6b0b-9723-4869-9ab0-00c5caebf8f6.png align="center")

# **Arrow vs normal**

## **Key differences to know**

For most everyday tasks, arrow functions and normal functions work identically. But there's one important difference: how they handle `this`. For now, here's what matters as a beginner:

| **Normal function** | **Arrow function** |
| --- | --- |
| Uses `function` keyword | Uses `=>` syntax |
| Can be named or anonymous | Always stored in a variable |
| More verbose, very explicit | Concise, great for short tasks |
| Has its own `this` context | Inherits `this` from surrounding scope |
| Great for methods on objects | Great for callbacks & array methods |

**Don't worry about** `this` **yet.** It's a more advanced topic. For now, use arrow functions for short tasks, callbacks, and array methods like `map()` — and you'll be writing modern JS immediately.

**Arrow functions shine inside map(), filter(), forEach()**

```javascript
const nums = [1, 2, 3, 4, 5];

// With normal function (verbose)
const doubled = nums.map(function (n) {
  return n * 2;
});

// With arrow function (clean!)
const doubled = nums.map((n) => n * 2);
```