JavaScript Arrow Functions

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