1. What Are Arrow Functions?
Arrow functions are a shorter, more modern way to write functions in JavaScript. Introduced in ES6 (2015), they let you write the same logic with less code — making your programs easier to read and maintain.
💡 Key Idea
Arrow functions don't replace regular functions entirely — they're a cleaner alternative for many common situations, especially short callbacks and one-liners.
2. Basic Arrow Function Syntax
The transformation from a regular function to an arrow function follows a simple pattern: remove the function keyword, and add => between the parameters and the body.
// Regular Function
function fnName (params){
const value = params;
return value;
};
// Arrow Function
const arrowFnName = (params){
return value
}
Side-by-Side Comparison
| Regular Function |
Arrow Function |
| function greet (){ |
|
| return "Hello, Namste!" |
|
| }; |
|
// output = Hello, Namste! | const greet = () => "Hello, Namste From Arrow Function!";
// output = Hello, Namste From Arrow Function! |
3. Arrow Functions With One Parameter
When an arrow function has exactly one parameter, you can drop the parentheses around it. This makes the syntax even shorter.
With Parentheses | Without Parentheses |
const double = (n) => {
return n * 2;
}; | const double = n => {
return n * 2;
}; |
| |
📌 Rule
Only one parameter? You may omit the parentheses. Zero or two+ parameters? Parentheses are required.
4. Arrow Functions With Multiple Parameters
When your function takes two or more parameters, always wrap them in parentheses — just like a regular function.
// Two parameters — parentheses required
const add = ( a, b ) {
return a + b;
};
console.log(add(12,6)) // output 18
// Three parameters
const fullName = (first, middle, last) => {
return first + ' ' + middle + ' ' + last;
};
console.log(fullName('Vikas', 'Kumar', 'Singh')); // Vishal Kunar Singh
5. Implicit Return vs Explicit Return
This is one of the most powerful features of arrow functions. When the function body is a single expression, you can skip both the curly braces {} and the return keyword — the result is returned automatically.
Explicit Return (with curly braces)
const square = (n) => {
return n * n; // 'return' keyword is required with { }
};
Implicit Return (no curly braces)
const square = (n) => n*n // 'return' is implied, no { } needed
⚠️ Important
Implicit return only works for a single expression. If you need multiple statements or lines of logic, always use the explicit form with { } and return.
More Examples
// Greeting — implicit return
const greet = name => 'Hello, ' + name + '!';
console.log(greet('Alice')); // Hello, Alice!
// Check even/odd — implicit return
const isEven = n => n % 2 === 0;
console.log(isEven(4)); // true
console.log(isEven(7)); // false
// Addition — implicit return
const add = (a, b) => a + b;
console.log(add(10, 5)); // 15
6. Arrow Functions vs Regular Functions
Arrow functions and regular functions are mostly interchangeable for simple tasks. The key beginner-friendly differences are about syntax — the deeper differences (like how 'this' works) are for more advanced topics.
Feature | Regular Function | Arrow Function |
Syntax | function name() {} | const name = () => {} |
Shorter syntax | No | Yes |
Implicit return | No | Yes (single expression) |
Hoisting | Yes | No |
'this' binding | Own 'this' | Inherits from parent (advanced) |
7. Arrow Functions in Action — Using map()
Arrow functions shine when used as callbacks inside array methods like map(), filter(), and reduce(). They make the code much easier to read at a glance.
Regular Function with map() | Arrow Function with map() |
const nums = [ 2, 4 , 8, 9 ,18, 45 ];
const doubled = nums.map(
function (n) {
return n * 2;
})
// output [ 4, 8, 16, 18, 36, 90 ]
| const nums = [ 2, 4 , 8, 9 ,18, 45 ];
const doubled = nums.map(
n => n*2
)
// output [ 4, 8, 16, 18, 36, 90 ] |
| |
Quick Reference — Cheat Sheet
// ── SYNTAX PATTERNS ──────────────────────────────────────────
// No parameters
const sayHi = () => 'Hi!';
// One parameter (parens optional)
const double = n => n * 2;
// Multiple parameters (parens required)
const add = (a, b) => a + b;
// Multiple lines (explicit return required)
const greetFull = (first, last) => {
const name = first + ' ' + last;
return 'Hello, ' + name + '!';
};
// ── WITH ARRAY METHODS ────────────────────────────────────────
const nums = [1, 2, 3, 4, 5];
const doubled = nums.map(n => n * 2); // [2, 4, 6, 8, 10]
const evens = nums.filter(n => n % 2 === 0); // [2, 4]
const sum = nums.reduce((acc, n) => acc + n, 0); // 15
