Arrow Functions in JavaScript

Modern JavaScript keeps getting cleaner. One of the biggest readability upgrades introduced in ES6 is the arrow function — a shorter, more elegant way to write functions that you will see everywhere in real codebases.

In this guide we will build up from scratch: starting with the familiar function keyword, then converting each example step by step into an arrow function. Open your browser console and follow along!

1. What Are Arrow Functions?

An arrow function is a shorter syntax for writing a function expression. Instead of typing the full function keyword, you use a => (fat arrow) symbol.

They were introduced in ES6 (2015) and have become the standard way to write functions in modern JavaScript.

Here is the core idea — the same function, written two ways:

// Traditional function
function greet() {
    return "Hello, World!";
}

// Arrow function — same thing, less code
const greet = () => {
    return "Hello, World!";
};

console.log(greet()); // Hello, World!

Both do exactly the same thing. The arrow function just removes the word function and adds => after the parentheses.

💡 Arrow functions are always anonymous (they have no name on their own) and must be stored in a variable to be used.

---

2. Basic Arrow Function Syntax

Let's look at the structure clearly:

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

// Step 1: Remove 'function', store in a variable
const add = function(a, b) {
    return a + b;
};

// Step 2: Add => after the parameters — this is an arrow function!
const add = (a, b) => {
    return a + b;
};

console.log(add(3, 4)); // 7

The transformation is simple:

1. Remove the function keyword

2. Add => between the parameters and the opening {

3. Assign it to a const variable

💡 Try it: Type const square = (n) => { return n * n; } in your console, then call square(5). You should get 25.

---

3. Arrow Functions with One Parameter

When your arrow function takes exactly one parameter, you can drop the parentheses around it. This makes the code even shorter.

// With parentheses (always valid)
const double = (n) => {
    return n * 2;
};

// Without parentheses — same thing, one parameter only
const double = n => {
    return n * 2;
};

console.log(double(6)); // 12

More examples with a single parameter:

const greetUser = name => {
    return "Hello, " + name + "!";
};

const isAdult = age => {
    return age >= 18;
};

console.log(greetUser("Alice")); // Hello, Alice!
console.log(isAdult(20));        // true
console.log(isAdult(15));        // false

💡 Parentheses with one parameter are optional. Many developers keep them for consistency — both styles are perfectly fine.

---

4. Arrow Functions with Multiple Parameters

When you have two or more parameters, the parentheses are required.

// Two parameters — parentheses required
const add = (a, b) => {
    return a + b;
};

const multiply = (x, y) => {
    return x * y;
};

const fullName = (first, last) => {
    return first + " " + last;
};

console.log(add(5, 3));             // 8
console.log(multiply(4, 7));        // 28
console.log(fullName("John", "Doe")); // John Doe

And for zero parameters, you need empty parentheses:

const sayHello = () => {
    return "Hello!";
};

console.log(sayHello()); // Hello!

---

5. Implicit Return vs Explicit Return

This is where arrow functions get their real superpower — the implicit return.

Explicit Return (using curly braces + return keyword)

This is what we have been using. You write the function body inside {} and use return:

const square = (n) => {
    return n * n;
};

Implicit Return (one-liner, no curly braces, no return keyword)

When the function body is a single expression, you can remove the {} and the return keyword entirely. JavaScript will return the result automatically.

// Explicit return
const square = (n) => {
    return n * n;
};

// Implicit return — exact same result!
const square = n => n * n;

console.log(square(5)); // 25

More examples of implicit return:

const double     = n => n * 2;
const add        = (a, b) => a + b;
const greet      = name => "Hello, " + name + "!";
const isEven     = n => n % 2 === 0;

console.log(double(7));          // 14
console.log(add(10, 5));         // 15
console.log(greet("Sara"));      // Hello, Sara!
console.log(isEven(4));          // true
console.log(isEven(7));          // false

The Rule

Style	When to use
n => n * 2	Single expression — use implicit return
n => { return n * 2; }	Multiple lines of logic — use explicit return

💡 Implicit return is what makes arrow functions so popular inside map(), filter(), and reduce() — the code becomes incredibly clean.

---

6. Arrow Functions vs Normal Functions

Here is a practical side-by-side comparison of the main differences.

Syntax

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

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

Key Differences at a Glance

Feature	Normal Function	Arrow Function
Syntax	function name() {}	const name = () => {}
Can be hoisted	✅ Yes	❌ No
Implicit return	❌ No	✅ Yes (single expression)
Best used for	Named, reusable functions	Callbacks, short operations
this keyword	Has its own this	Inherits this from parent

💡 The this keyword behaves differently in arrow functions vs normal functions — but that is a more advanced topic. For now, just know that arrow functions are best used for short, callback-style operations.

When to Use Each

Use a normal function when:

// Reusable named utility function
function calculateTax(price, rate) {
    let tax = price * rate;
    let total = price + tax;
    return total;
}

Use an arrow function when:

// Short callback inside map, filter, etc.
let prices = [100, 200, 300];
let withTax = prices.map(price => price * 1.18);
console.log(withTax); // [118, 236, 354]

---

Practice Assignment

Work through all four tasks. Try them in your browser console or a code editor.

Task 1 — Normal function to calculate square

// Write it as a normal function first
function square(n) {
    return n * n;
}

console.log(square(6));  // 36
console.log(square(9));  // 81

Task 2 — Rewrite using an arrow function

// Arrow function — explicit return
const square = (n) => {
    return n * n;
};

// Arrow function — implicit return (even cleaner!)
const square = n => n * n;

console.log(square(6));  // 36
console.log(square(9));  // 81

Task 3 — Arrow function to check even or odd

const isEven = n => n % 2 === 0;

console.log(isEven(4));  // true
console.log(isEven(7));  // false
console.log(isEven(10)); // true
console.log(isEven(13)); // false

Task 4 — Arrow function inside map()

let numbers = [1, 2, 3, 4, 5];

// Double each number using arrow function in map()
let doubled = numbers.map(n => n * 2);
console.log(doubled); // [2, 4, 6, 8, 10]

// Square each number
let squared = numbers.map(n => n * n);
console.log(squared); // [1, 4, 9, 16, 25]

// Check even/odd for each
let evenCheck = numbers.map(n => n % 2 === 0);
console.log(evenCheck); // [false, true, false, true, false]

🎯 Bonus challenge: Use filter() with an arrow function to get only the even numbers from [1, 2, 3, 4, 5, 6, 7, 8].

---

Quick Reference

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

// One parameter (parens optional)
const double = n => n * 2;

// Multiple parameters
const add = (a, b) => a + b;

// Multi-line body (explicit return required)
const calculateTotal = (price, tax) => {
    let taxAmount = price * tax;
    return price + taxAmount;
};

// Inside map()
let nums = [1, 2, 3];
let result = nums.map(n => n * 10); // [10, 20, 30]

Transformation Cheatsheet

// Step 1 — Normal function
function multiply(a, b) { return a * b; }

// Step 2 — Function expression
const multiply = function(a, b) { return a * b; };

// Step 3 — Arrow function
const multiply = (a, b) => { return a * b; };

// Step 4 — Arrow + implicit return
const multiply = (a, b) => a * b;

---

Wrapping Up

Arrow functions are one of the most used features of modern JavaScript. Here is what to remember:

• Arrow functions use => instead of the function keyword

• One parameter? You can skip the parentheses

• Single expression? You can skip {} and return — that is the implicit return

• They shine brightest inside map(), filter(), and reduce()

• For complex, multi-line, reusable functions — normal functions are still perfectly fine

Once you are comfortable writing arrow functions, your code will look significantly more modern and readable.

---

Found this helpful? Share it with someone learning JavaScript! 🚀

Diagram Ideas

1. Normal function → Arrow function transformation

2. Arrow function syntax breakdown