📘 Lesson · Lesson 23

Arrow Functions

What Arrow Functions Are

// Regular function expression:
const add = function(a, b) {
    return a + b;
};

// Arrow function — same thing, shorter:
const add = (a, b) => {
    return a + b;
};

Arrow functions are a shorter way to write functions, introduced in ES6 (2015). They do the same job as a regular function but with less typing: you drop the function keyword and add an arrow => between the parameters and the body. You'll see them everywhere in modern JavaScript — especially in array methods and event handlers, where compact one-liners keep code readable. They're not just shorthand though; they behave slightly differently with the this keyword, which we'll cover at the end.

The Arrow Syntax — step by step

// A regular function:
function greet(name) {
    return "Hello " + name;
}

// Step 1: as an expression
const greet = function(name) { return "Hello " + name; };

// Step 2: remove "function", add =>
const greet = (name) => { return "Hello " + name; };

// Step 3: single param — drop the parentheses
const greet = name => { return "Hello " + name; };

// Step 4: single expression — drop braces AND return
const greet = name => "Hello " + name;      // the final, cleanest form

Follow the transformation and the syntax stops looking cryptic. Start with a function expression, remove the function keyword, place => after the parameter list, and you have an arrow function. From there, two optional shortcuts kick in (covered next): with exactly one parameter you can drop the parentheses, and with a single expression body you can drop the braces and the return. Arrow functions are always assigned to a variable (usually const), since they have no name of their own.

Implicit Return — the biggest time-saver

// With braces, you MUST write return:
const double = (n) => { return n * 2; };

// Without braces, the value is returned AUTOMATICALLY:
const double = (n) => n * 2;        // implicit return

// More examples:
const square = n => n * n;
const isAdult = age => age >= 18;
const greet = name => `Hello, ${name}!`;

// ⚠ Careful — braces mean "a block", so this returns undefined:
const bad = n => { n * 2; };        // no return statement!

If an arrow function's body is a single expression with NO curly braces, its value is returned automatically — no return keyword needed. This "implicit return" is what makes arrow functions so compact and pleasant for small operations. The trap: the moment you add curly braces, you're writing a normal function body, and you MUST write return yourself. Forgetting this is the classic arrow-function bug — your function silently returns undefined. Remember: no braces = automatic return; braces = you must return.

Parameter Shorthand Rules

// No parameters — empty parentheses are REQUIRED:
const sayHi = () => console.log("Hi");

// ONE parameter — parentheses optional (both are fine):
const double = (n) => n * 2;
const double = n => n * 2;          // cleaner

// TWO or more — parentheses REQUIRED:
const add = (a, b) => a + b;

The parentheses rules are simple: with zero parameters you need empty (); with exactly one parameter they're optional (most developers omit them); with two or more they're required. Many teams pick one style and stick to it — always including parentheses is also perfectly valid and arguably more consistent. Combine this with implicit return and you get beautifully terse code: const isEven = n => n % 2 === 0; says everything in one clear line.

Arrow vs Regular Functions — the real difference

	Regular function	Arrow function
Syntax	Longer	Shorter
Implicit return	No	Yes (no braces)
`this` keyword	Its own `this`	Inherits from surroundings
Hoisted?	Declarations are	No

Arrow functions aren't just prettier — they treat the this keyword differently. A regular function gets its own this depending on how it's called, which historically caused a lot of confusion. An arrow function has NO this of its own; it simply uses the this from the surrounding code. In practice this makes arrow functions ideal inside methods and callbacks, and unsuitable as object methods themselves. Practical guidance for now: use arrow functions for short callbacks and array methods (where they shine), and regular function declarations for standalone named functions. You'll develop a feel for it with practice.

Exam Corner

Q: Write an arrow function that doubles a number. const double = n => n * 2;

Q: What is implicit return? When an arrow function has no braces, its single expression is returned automatically.

Q: When must you write return in an arrow function? When the body is wrapped in curly braces.

Q: When are parentheses around a parameter optional? When there is exactly one parameter.

Q: How does an arrow function treat this? It doesn't have its own this — it inherits it from the surrounding scope.

Arrow Functions क्या हैं

// Regular function expression:
const add = function(a, b) {
    return a + b;
};

// Arrow function — vahi cheez, chhoti:
const add = (a, b) => {
    return a + b;
};

Arrow functions functions लिखने का छोटा तरीका हैं, ES6 (2015) में आए. वे regular function जैसा ही काम करते हैं पर कम typing के साथ: आप function keyword हटाते हैं और parameters तथा body के बीच arrow => जोड़ते हैं. आप उन्हें modern JavaScript में हर जगह देखेंगे — खासकर array methods और event handlers में, जहां संक्षिप्त one-liners code readable रखते हैं. पर ये सिर्फ shorthand नहीं; वे this keyword के साथ थोड़ा अलग व्यवहार करते हैं, जो हम अंत में cover करेंगे.

Arrow Syntax — कदम दर कदम

// Regular function:
function greet(name) {
    return "Hello " + name;
}

// Step 1: expression ke roop me
const greet = function(name) { return "Hello " + name; };

// Step 2: "function" hatao, => jodo
const greet = (name) => { return "Hello " + name; };

// Step 3: ek param — parentheses hatao
const greet = name => { return "Hello " + name; };

// Step 4: ek expression — braces AUR return hatao
const greet = name => "Hello " + name;      // aakhri, sabse saaf roop

बदलाव follow कीजिए और syntax रहस्यमय लगना बंद हो जाता है. Function expression से शुरू कीजिए, function keyword हटाइए, parameter list के बाद => रखिए, और आपके पास arrow function है. वहां से, दो optional shortcuts आते हैं (आगे cover): ठीक एक parameter के साथ आप parentheses हटा सकते हैं, और single expression body के साथ braces तथा return हटा सकते हैं. Arrow functions हमेशा variable में assign होते हैं (आमतौर पर const), क्योंकि उनका अपना कोई नाम नहीं.

Implicit Return — सबसे बड़ा time-saver

// Braces ke saath, return LIKHNA hi padega:
const double = (n) => { return n * 2; };

// Braces ke bina, value APNE AAP return hoti hai:
const double = (n) => n * 2;        // implicit return

// Aur examples:
const square = n => n * n;
const isAdult = age => age >= 18;
const greet = name => `Hello, ${name}!`;

// ⚠ Savdhan — braces matlab "block", to yeh undefined lautata hai:
const bad = n => { n * 2; };        // koi return statement nahi!

अगर arrow function की body single expression है BINA curly braces के, उसकी value अपने आप return होती है — कोई return keyword नहीं चाहिए. यह "implicit return" ही arrow functions को छोटे कामों के लिए इतना संक्षिप्त और सुखद बनाता है. जाल: जिस पल आप curly braces जोड़ें, आप normal function body लिख रहे हैं, और आपको खुद return लिखना HOGA. यह भूलना classic arrow-function bug है — आपका function चुपचाप undefined लौटाता है. याद रखिए: braces नहीं = अपने आप return; braces = आपको return करना होगा.

Parameter Shorthand Rules

// Koi parameter nahi — khali parentheses ZARURI:
const sayHi = () => console.log("Hi");

// EK parameter — parentheses optional (dono theek):
const double = (n) => n * 2;
const double = n => n * 2;          // saaf

// DO ya zyada — parentheses ZARURI:
const add = (a, b) => a + b;

Parentheses rules सरल हैं: शून्य parameters के साथ आपको खाली () चाहिए; ठीक एक parameter के साथ वे optional हैं (ज़्यादातर developers हटा देते हैं); दो या ज़्यादा के साथ ज़रूरी हैं. कई teams एक style चुनकर उस पर टिकती हैं — हमेशा parentheses शामिल करना भी बिल्कुल valid और तर्कसंगत रूप से ज़्यादा consistent है. इसे implicit return के साथ मिलाइए और खूबसूरती से संक्षिप्त code मिलता है: const isEven = n => n % 2 === 0; सब कुछ एक साफ line में कहता है.

Arrow vs Regular Functions — असली अंतर

	Regular function	Arrow function
Syntax	लंबा	छोटा
Implicit return	नहीं	हां (braces बिना)
`this` keyword	अपना `this`	आस-पास से लेता है
Hoisted?	Declarations हैं	नहीं

Arrow functions सिर्फ सुंदर नहीं — वे this keyword को अलग तरह से संभालते हैं. Regular function को अपना this मिलता है इस पर निर्भर कि वह कैसे call हुआ, जिसने ऐतिहासिक रूप से बहुत उलझन पैदा की. Arrow function का अपना कोई this NAHI होता; यह बस आस-पास के code का this use करता है. व्यवहार में यह arrow functions को methods और callbacks के अंदर आदर्श बनाता है, और खुद object methods के रूप में अनुपयुक्त. अभी के लिए व्यावहारिक मार्गदर्शन: छोटे callbacks और array methods के लिए arrow functions use कीजिए (जहां वे चमकते हैं), और standalone named functions के लिए regular function declarations. अभ्यास से आपको इसका अंदाज़ा हो जाएगा.

Exam Corner

Q: Number को दोगुना करने वाला arrow function लिखिए. const double = n => n * 2;

Q: Implicit return क्या है? जब arrow function में braces न हों, उसका single expression अपने आप return होता है.

Q: Arrow function में return कब लिखना पड़ता है? जब body curly braces में लिपटी हो.

Q: Parameter के चारों ओर parentheses कब optional हैं? जब ठीक एक parameter हो.

Q: Arrow function this को कैसे संभालता है? उसका अपना this नहीं — वह आस-पास के scope से लेता है.

← Back to JavaScript Tutorial

💻 Live Code Editor

इस पेज का code यहाँ तैयार है — बदलिए और तुरंत नतीजा देखिए. कुछ install किए बिना.

// Regular function expression:
const add = function(a, b) {
    return a + b;
};

// Arrow function — same thing, shorter:
const add = (a, b) => {
    return a + b;
};

// A regular function:
function greet(name) {
    return "Hello " + name;
}

// Step 1: as an expression
const greet = function(name) { return "Hello " + name; };

// Step 2: remove "function", add =>
const greet = (name) => { return "Hello " + name; };

// Step 3: single param — drop the parentheses
const greet = name => { return "Hello " + name; };

// Step 4: single expression — drop braces AND return
const greet = name => "Hello " + name;      // the final, cleanest form

// With braces, you MUST write return:
const double = (n) => { return n * 2; };

// Without braces, the value is returned AUTOMATICALLY:
const double = (n) => n * 2;        // implicit return

// More examples:
const square = n => n * n;
const isAdult = age => age >= 18;
const greet = name => `Hello, ${name}!`;

// ⚠ Careful — braces mean "a block", so this returns undefined:
const bad = n => { n * 2; };        // no return statement!

👁 Live Preview

सब कुछ आपके browser में ही चलता है — कोई server, कोई signup नहीं. JavaScript का console.log देखने के लिए F12 दबाइए.