Article Categories

Selected Reading

Fat vs concise arrow functions in JavaScript

Javascript Web Development Object Oriented Programming

Arrow functions in JavaScript come in two forms: fat arrow (with curly braces) and concise arrow (without curly braces). The concise form is a streamlined syntax for single-expression functions that provides implicit return functionality.

Syntax Comparison

Fat arrow function with explicit return:

let add = (a, b) => { return a + b; }

Concise arrow function with implicit return:

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

Single parameter (parentheses optional):

let square = x => x * x;

No parameters (parentheses required):

let getMessage = () => "Hello World";

Key Differences

Feature	Fat Arrow	Concise Arrow
Syntax	`() => { return value; }`	`() => value`
Return	Explicit `return`	Implicit return
Use Case	Multiple statements	Single expression

Example: Both Forms in Action

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Fat vs Concise Arrow Functions</title>
    <style>
        body {
            font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
            padding: 20px;
        }
        .result {
            font-size: 18px;
            font-weight: 500;
            color: blueviolet;
            margin: 20px 0;
        }
        .btn {
            background-color: #007bff;
            color: white;
            border: none;
            padding: 10px 20px;
            cursor: pointer;
            border-radius: 5px;
        }
    </style>
</head>
<body>
    <h1>Fat vs Concise Arrow Functions</h1>
    <div class="result"></div>
    <button class="btn">Calculate Values</button>
    
    <script>
        let resultDiv = document.querySelector(".result");
        
        // Concise arrow function (implicit return)
        let add = (a, b) => a + b;
        
        // Fat arrow function (explicit return)
        let multiply = (a, b) => {
            return a * b;
        };
        
        // Single parameter concise function
        let square = x => x * x;
        
        // No parameter function
        let getTimestamp = () => new Date().getTime();
        
        document.querySelector(".btn").addEventListener("click", () => {
            resultDiv.innerHTML = `
                <p>Addition (concise): 15 + 25 = ${add(15, 25)}</p>
                <p>Multiplication (fat): 8 × 7 = ${multiply(8, 7)}</p>
                <p>Square (single param): 9² = ${square(9)}</p>
                <p>Timestamp (no params): ${getTimestamp()}</p>
            `;
        });
    </script>
</body>
</html>

When to Use Each Form

Use concise arrow functions when:

The function body contains only a single expression
You want cleaner, more readable code
Working with array methods like map(), filter(), or reduce()

Use fat arrow functions when:

Multiple statements are needed
Complex logic requires explicit control flow
You need to perform operations before returning a value

Practical Example with Array Methods

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

// Concise arrow with implicit return
const doubled = numbers.map(n => n * 2);
console.log("Doubled:", doubled);

// Fat arrow with explicit return for complex logic
const processed = numbers.map(n => {
    if (n % 2 === 0) {
        return n * 3;
    }
    return n * 2;
});
console.log("Processed:", processed);

Doubled: [ 2, 4, 6, 8, 10 ]
Processed: [ 2, 6, 6, 12, 10 ]

Conclusion

Concise arrow functions provide cleaner syntax for simple expressions with implicit returns, while fat arrow functions offer explicit control for complex logic. Choose the appropriate form based on your function's complexity and readability requirements.

AmitDiwan

Updated on: 2026-03-15T23:18:59+05:30

299 Views

Kickstart Your Career

Get certified by completing the course

Get Started

Previous Next