# 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. ```javascript // 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. ```javascript // 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)** ```javascript const square = (n) => { return n * n;   // 'return' keyword is required with { } }; ``` **Implicit Return (no curly braces)** ```javascript 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** ```javascript // 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 * * * ```javascript // ── 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   ```