Less typing, cleaner syntax, and the modern way to write JavaScript functions.
The first time I saw an arrow function, I thought someone had accidentally deleted half the code. No function keyword? No curly braces? No return statement? And it still works?
const square = n => n * n;
That's a complete, working function. It takes a number, squares it, and returns the result. Compare that to the traditional version:
function square(n) {
return n * n;
}
Same behavior, half the characters. Arrow functions were introduced in ES6 (2015), and they've become the default way to write functions in modern JavaScript. In the ChaiCode Web Dev Cohort 2026, they show up in almost every lesson — callbacks, array methods, event handlers, React components. If you're going to write modern JS, you need to be comfortable with them.
Let's break it down step by step.
What Are Arrow Functions?
An arrow function is a shorter, more concise syntax for writing function expressions. It uses the => (fat arrow) instead of the function keyword.
That's really it. Arrow functions aren't some completely different concept — they're just a cleaner way to write the function expressions you already know.
The Name
The => symbol looks like an arrow, which is why they're called "arrow functions." Some people also call them "fat arrow functions" because => uses the equals sign (fat) rather than a thin hyphen (->).
Arrow Function Syntax — The Transformation
Let me show you how a regular function transforms into an arrow function, step by step. This is the mental model that made it click for me.
Starting Point: A Regular Function Expression
const greet = function(name) {
return `Hello, ${name}!`;
};
Step 1: Remove the function Keyword, Add =>
const greet = (name) => {
return `Hello, ${name}!`;
};
Step 2: If the Body Is a Single Expression, Remove {} and return
const greet = (name) => `Hello, ${name}!`;
Step 3: If There's Only One Parameter, Remove the Parentheses
const greet = name => `Hello, ${name}!`;
Done. Four lines became one. Let's visualize that transformation:
REGULAR FUNCTION:
const greet = function(name) {
↑ ↑
keyword params
return `Hello, ${name}!`;
↑
explicit return
};
⬇ Transform ⬇
ARROW FUNCTION:
const greet = name => `Hello, ${name}!`;
↑ ↑ ↑
param arrow implicit return
(no return keyword needed)
Arrow Functions with One Parameter
When your function takes exactly one parameter, you can skip the parentheses around it. This is the shortest form of an arrow function.
// With parentheses — works fine
const double = (n) => n * 2;
// Without parentheses — also works, slightly cleaner
const double = n => n * 2;
console.log(double(5)); // 10
console.log(double(12)); // 24
More Examples
const shout = message => message.toUpperCase() + "!!!";
console.log(shout("hello")); // "HELLO!!!"
const isPositive = num => num > 0;
console.log(isPositive(5)); // true
console.log(isPositive(-3)); // false
const getLength = str => str.length;
console.log(getLength("Pratham")); // 7
Each of these is a complete function — one parameter in, one value out. Clean and readable.
Arrow Functions with Multiple Parameters
When you have zero or more than one parameter, the parentheses are required.
Zero Parameters
const sayHello = () => "Hello, World!";
console.log(sayHello()); // "Hello, World!"
The () is mandatory here — you can't just write => "Hello, World!" with nothing before the arrow.
Two or More Parameters
const add = (a, b) => a + b;
console.log(add(10, 5)); // 15
const fullName = (first, last) => `${first} ${last}`;
console.log(fullName("Pratham", "Bhardwaj")); // "Pratham Bhardwaj"
const max = (a, b) => a > b ? a : b;
console.log(max(15, 22)); // 22
Quick Reference: When to Use Parentheses
| Parameters | Parentheses | Example |
|---|---|---|
| Zero | ✅ Required | () => "hello" |
| One | ❌ Optional |
n => n * 2 or (n) => n * 2
|
| Two or more | ✅ Required | (a, b) => a + b |
My personal preference: I always include parentheses even with one parameter. (n) => n * 2 is barely longer than n => n * 2, and it's consistent with the other cases. But both are valid — pick a style and stick with it.
Implicit Return vs Explicit Return
This is probably the thing that confuses beginners the most about arrow functions, so let me be very clear about it.
Implicit Return — No {}, No return Keyword
When the function body is a single expression, you can omit the curly braces and the return keyword. The result of the expression is automatically returned.
// Implicit return — the expression after => is returned automatically
const square = n => n * n;
const greet = name => `Hello, ${name}!`;
const isEven = n => n % 2 === 0;
console.log(square(4)); // 16
console.log(greet("Pratham")); // "Hello, Pratham!"
console.log(isEven(7)); // false
No curly braces = implicit return. The arrow function evaluates the expression and gives it back. Simple.
Explicit Return — With {} and return
When the function body has multiple statements or you use curly braces for any reason, you must write return explicitly. Without it, the function returns undefined.
// Explicit return — curly braces mean you MUST write return
const calculateDiscount = (price, percentage) => {
const discount = price * percentage / 100;
const finalPrice = price - discount;
return finalPrice;
};
console.log(calculateDiscount(1000, 20)); // 800
The Gotcha: Forgetting return with Curly Braces
This is a real bug that I've made more than once:
// ❌ BUG — curly braces but no return
const multiply = (a, b) => {
a * b; // This computes the value but doesn't return it!
};
console.log(multiply(3, 4)); // undefined 😱
// ✅ FIXED — add return
const multiply = (a, b) => {
return a * b;
};
console.log(multiply(3, 4)); // 12 ✅
The rule is dead simple:
- No curly braces → result is returned automatically (implicit)
-
Curly braces → you must write
returnyourself (explicit)
Visual Comparison
IMPLICIT RETURN (single expression, no braces):
const add = (a, b) => a + b;
↑
this value is returned automatically
EXPLICIT RETURN (multiple statements, with braces):
const add = (a, b) => {
const sum = a + b; ← statement 1
return sum; ← you MUST return manually
};
Arrow Function vs Normal Function: The Basic Differences
At a beginner level, here are the main differences you need to know:
| Feature | Normal Function | Arrow Function |
|---|---|---|
| Syntax | function name(params) {} |
(params) => {} |
function keyword |
✅ Required | ❌ Not used |
| Implicit return | ❌ Always needs return
|
✅ Yes, for single expressions |
| Parentheses (1 param) | ✅ Required | ❌ Optional |
| Hoisting | ✅ Declarations are hoisted | ❌ Not hoisted (they're expressions) |
| Best for | Standalone, named functions | Callbacks, inline functions |
Hoisting Difference — Quick Reminder
// Normal function declaration — hoisted, works before definition
console.log(add(2, 3)); // 5 ✅
function add(a, b) {
return a + b;
}
// Arrow function — NOT hoisted, fails before definition
// console.log(multiply(2, 3)); // ❌ ReferenceError
const multiply = (a, b) => a * b;
console.log(multiply(2, 3)); // 6 ✅ — works after definition
Arrow functions are always function expressions assigned to variables. And as we covered in a previous article, function expressions aren't hoisted.
💡 Note: Arrow functions also behave differently with
thiskeyword compared to regular functions. That's an important topic, but it involves concepts like execution context and binding that go beyond beginner territory. For now, just know the difference exists — we'll tackle it when we're ready.
Arrow Functions in Action: Real-World Use Cases
Arrow functions truly shine when used as callbacks — functions passed as arguments to other functions. This is where you'll use them the most.
With map() — Transform Every Element
const numbers = [1, 2, 3, 4, 5];
// Normal function
const doubled1 = numbers.map(function(num) {
return num * 2;
});
// Arrow function — so much cleaner
const doubled2 = numbers.map(num => num * 2);
console.log(doubled2); // [2, 4, 6, 8, 10]
With filter() — Keep Only What Matches
const ages = [15, 22, 17, 30, 12, 25];
const adults = ages.filter(age => age >= 18);
console.log(adults); // [22, 30, 25]
With forEach() — Do Something with Each Element
const fruits = ["Apple", "Mango", "Banana"];
fruits.forEach(fruit => console.log(`I like ${fruit}`));
// I like Apple
// I like Mango
// I like Banana
With setTimeout() — Delayed Execution
setTimeout(() => {
console.log("This runs after 2 seconds ⏰");
}, 2000);
See how natural the arrow function looks as a callback? No function keyword cluttering things up, no unnecessary return. It's exactly why arrow functions became the modern standard for inline functions.
Let's Practice: Hands-On Assignment
Part 1: Normal Function → Arrow Function
// Normal function: square of a number
function square(n) {
return n * n;
}
console.log(square(5)); // 25
// Rewrite as arrow function
const squareArrow = n => n * n;
console.log(squareArrow(5)); // 25
Part 2: Even or Odd Checker
const checkEvenOdd = n => n % 2 === 0 ? "Even" : "Odd";
console.log(checkEvenOdd(4)); // "Even"
console.log(checkEvenOdd(7)); // "Odd"
console.log(checkEvenOdd(0)); // "Even"
console.log(checkEvenOdd(13)); // "Odd"
Part 3: Arrow Function Inside map()
const prices = [100, 250, 500, 1200, 3000];
// Add 18% GST to each price
const withGST = prices.map(price => Math.round(price * 1.18));
console.log(withGST); // [118, 295, 590, 1416, 3540]
// Format as currency strings
const formatted = prices.map(price => `₹${price}`);
console.log(formatted); // ["₹100", "₹250", "₹500", "₹1200", "₹3000"]
Part 4: Multiple Conversions — Normal to Arrow
// Convert each of these to arrow functions:
// 1. Normal
function greet(name) {
return `Hello, ${name}!`;
}
// Arrow
const greetArrow = name => `Hello, ${name}!`;
// 2. Normal
function getArea(length, width) {
return length * width;
}
// Arrow
const getAreaArrow = (length, width) => length * width;
// 3. Normal
function getCurrentYear() {
return new Date().getFullYear();
}
// Arrow
const getCurrentYearArrow = () => new Date().getFullYear();
// Test them all
console.log(greetArrow("Pratham")); // "Hello, Pratham!"
console.log(getAreaArrow(10, 5)); // 50
console.log(getCurrentYearArrow()); // 2026
Arrow Function Syntax Breakdown — Complete Reference
┌─────────────────────────────────────────────────────────────────┐
│ ARROW FUNCTION ANATOMY │
├─────────────────────────────────────────────────────────────────┤
│ │
│ const functionName = (param1, param2) => expression; │
│ ↑ ↑ ↑ ↑ ↑ │
│ variable parameters fat arrow implicit return │
│ name (inputs) symbol (single expr) │
│ │
├─────────────────────────────────────────────────────────────────┤
│ │
│ const functionName = (param1, param2) => { │
│ // multiple statements │
│ return result; ← explicit return required │
│ }; │
│ │
├─────────────────────────────────────────────────────────────────┤
│ │
│ SHORTHAND RULES: │
│ • 1 param → parentheses optional: n => n * 2 │
│ • 0 params → parentheses required: () => "hello" │
│ • 2+ params → parentheses required: (a, b) => a + b │
│ • 1 expression → braces optional: n => n * 2 (auto return) │
│ • 2+ statements → braces required: (n) => { ... return; } │
│ │
└─────────────────────────────────────────────────────────────────┘
Key Takeaways
-
Arrow functions are a shorter syntax for function expressions. They use
=>instead of thefunctionkeyword. - With one parameter, parentheses are optional. With zero or multiple parameters, parentheses are required.
-
Implicit return: if the body is a single expression (no curly braces), the result is returned automatically. Explicit return: if you use curly braces, you must write
return. - Arrow functions are not hoisted — you must define them before calling them, just like any function expression.
- They're the modern standard for callbacks and inline functions —
map(),filter(),forEach(),setTimeout(), and beyond.
Wrapping Up
Arrow functions felt like magic when I first saw them, but they're really just syntactic sugar — a shorter, cleaner way to write function expressions. The key is understanding when you can use implicit return (single expression, no braces) vs when you need explicit return (multiple statements, with braces). Once that clicks, you'll naturally reach for arrow syntax every time.
I'm working through all of this in the ChaiCode Web Dev Cohort 2026 under Hitesh Chaudhary and Piyush Garg, and arrow functions are one of those things that show up in every single lesson now. Array methods, event handlers, React components — they all use arrow functions. Getting comfortable with them early pays off immediately.
Connect with me on LinkedIn or visit PrathamDEV.in to follow my journey. More articles coming as I keep building and learning.
Happy coding! 🚀
Written by Pratham Bhardwaj | Web Dev Cohort 2026, ChaiCode