JavaScript Arrow Functions తెలుగులో | => Syntax, Implicit Return

🟨 JavaScript (ES2026+) 🟢 Lesson 13 📂 Part 03: Functions & Data (2 of 7) 📅 2026 Edition

📌 Covered in this lesson: Arrow function syntax (=>) · Converting normal function · Implicit return · Parentheses rules · Returning objects · Arrow vs Normal function · Common mistakes · Practice challenges

💬 WhatsApp సంక్షిప్త రూపాలు మరియు Arrow Functions

WhatsApp లో మనం "please" ని "plz" అని, "thanks" ని "thx" అని చిన్నగా రాస్తాం కదా? అర్థం అదే, కానీ రాయడానికి తక్కువ సమయం పడుతుంది.

Arrow functions కూడా అంతే: Chapter 12 లో నేర్చుకున్న functions నే, చిన్న రూపంలో రాసే ఆధునిక పద్ధతి (Modern ES6+ Syntax). 2015 లో JavaScript కి ఈ పద్ధతి వచ్చింది. ఇప్పుడు ఆధునిక code లో arrow functions ని చాలా ఎక్కువగా చూస్తారు, ముఖ్యంగా arrays తో పని చేసేటప్పుడు (Chapter 15). కాబట్టి వీటిని బాగా అలవాటు చేసుకోవడం చాలా ముఖ్యం!

1ఈ chapter లో మీరు నేర్చుకునేవి

Arrow function యొక్క syntax (=>)
Normal function ని arrow function గా మార్చడం (3 సులభమైన దశలు)
Implicit return (return కీవర్డ్ లేకుండానే నేరుగా ఫలితం ఇవ్వడం)
Parentheses ( ) ఎప్పుడు అవసరం, ఎప్పుడు కాదు?
Object ని return చేసేటప్పుడు ఏం చేయాలి?
Arrow function మరియు normal function మధ్య కీలకమైన తేడాలు
Beginners చేసే 6 సాధారణ తప్పులు (Real Node.js outputs తో)
సమగ్ర ప్రాక్టీస్ ప్రశ్నలు & సమాధానాలు

2Normal function ని Arrow function గా మార్చడం

Chapter 12 లో రాసిన add function ని తీసుకుందాం. దీన్ని అంచెలంచెలుగా చిన్నది చేద్దాం:

దశ 1: Normal function (పాత పద్ధతి)

JavaScript — Stage 1

function add(a, b) {
  return a + b;
}

దశ 2: Arrow function ({ } మరియు return తో)

function అనే పదాన్ని తీసేసి, parameters తర్వాత => (arrow) పెట్టి, function ని ఒక variable లో దాస్తాం:

JavaScript — Stage 2

const add = (a, b) => {
  return a + b;
};

దశ 3: ఇంకా చిన్నది (Implicit Return)

Function body లో కేవలం return ఒక్కటే ఉంటే, { } మరియు return రెండింటినీ తీసేయొచ్చు. => తర్వాత రాసిన విలువ ఆటోమేటిక్ గా return అవుతుంది!

JavaScript — Stage 3 (Concise Body)

const add = (a, b) => a + b;

మూడూ ఒకే పని చేస్తాయి — లైవ్ పరిశీలన:

JavaScript — Comparing All 3 Forms ▶ Run Code

function addOld(a, b) { return a + b; }
const add1 = (a, b) => { return a + b; };
const add2 = (a, b) => a + b;

console.log(addOld(3, 4), add1(3, 4), add2(3, 4));

        Output:

        7 7 7

🎯 Syntax సూత్రం:
const పేరు = (parameters) => ఫలితం;
• => ని "arrow" (బాణం) అంటారు.
• "parameters ఇవి, వాటితో వచ్చే ఫలితం ఇది" అని చదువుకోవచ్చు.
• (a, b) => a + b అంటే: "a మరియు b తీసుకో, a + b ని ఇవ్వు".

3Parentheses (కుండలీకరణాలు) ఎప్పుడు అవసరం?

Parameters సంఖ్యను బట్టి కుండలీకరణాలు ( ) రాయాలా వద్దా అనే నియమాలు మారతాయి:

Parameters సంఖ్య	ఎలా రాయాలి?	ఉదాహరణ
ఒక్కటి (Single)	`( )` ఐచ్ఛికం (రాయొచ్చు, రాయకపోవచ్చు)	`n => n * n`
ఏమీ లేవు (Zero)	`( )` తప్పనిసరి	`() => console.log("Hi!")`
రెండు లేదా ఎక్కువ (2+)	`( )` తప్పనిసరి	`(a, b) => a + b`

1. ఒకే parameter ఉన్నప్పుడు:

JavaScript — Single Parameter ▶ Run Code

const square = n => n * n;

console.log(square(5));

        Output:

        25

2. Parameters ఏమీ లేనప్పుడు:

JavaScript — No Parameters ▶ Run Code

const hello = () => console.log("Hi!");

hello();

        Output:

        Hi!

3. Default parameter తో:

Default parameter (Chapter 12) ఉంటే, ఒక్క parameter అయినా సరే ( ) తప్పనిసరిగా పెట్టాలి:

JavaScript — Default Parameter in Arrow ▶ Run Code

const greet = (name = "అతిథి") => `నమస్కారం ${name}!`;

console.log(greet());
console.log(greet("సీత"));

        Output:

        నమస్కారం అతిథి!

        నమస్కారం సీత!

4Implicit Return vs Explicit Return

ఇది arrow functions లో అత్యంత ముఖ్యమైన నియమం. { } (కర్లీ బ్రేసెస్) ఉన్నాయా లేవా అనేదాన్ని బట్టి return నియమం మారుతుంది:

రూపం	Return ఎలా జరుగుతుంది?
`{ }` లేకుండా: `n => n * n`	ఆటోమేటిక్ గా విలువ return అవుతుంది (దీనినే Implicit Return అంటారు).
`{ }` తో: `n => { return n * n; }`	`return` ని మనమే రాయాలి (Explicit Return). రాయకపోతే `undefined` వస్తుంది.

ఉదాహరణ 1: సరి సంఖ్యా? (isEven)

JavaScript — Implicit Return Boolean ▶ Run Code

const isEven = n => n % 2 === 0;

console.log(isEven(10));
console.log(isEven(7));

        Output:

        true

        false

ఉదాహరణ 2: పేరుతో పలకరింపు

JavaScript — Template Literal in Arrow ▶ Run Code

const greet = name => `నమస్కారం ${name}!`;

console.log(greet("రవి"));

        Output:

        నమస్కారం రవి!

ఉదాహరణ 3: ఎక్కువ లైన్లు ఉన్న function (Multiple Statements)

Function లో ఒకటి కంటే ఎక్కువ statements ఉంటే, { } మరియు return తప్పనిసరి:

JavaScript — Multi-line Arrow Function ▶ Run Code

const calculateTotal = (price, qty) => {
  const subtotal = price * qty;
  return subtotal + subtotal * 18 / 100;
};

console.log(calculateTotal(250, 3));

        Output:

        885

₹250 × 3 = ₹750, దానికి 18% GST (₹135) కలిపి ₹885.

5Object ని return చేయడం (ముఖ్యమైన జాగ్రత్త)

Object (కర్లీ బ్రాకెట్లలో { name: value } జతలు) గురించి మనం Chapter 16 లో సమగ్రంగా నేర్చుకుంటాం. ఇప్పుడు ఇది పూర్తిగా అర్థం కాకపోయినా పర్వాలేదు, ఒక చిన్న జాగ్రత్తగా తెలుసుకోండి:

Implicit return తో object ఇవ్వాలంటే, object ని కుండలీకరణాలు ( ) లో పెట్టాలి:

JavaScript — Returning an Object ▶ Run Code

const makeUser = (name) => ({ name: name, active: true });

console.log(makeUser("రవి"));

        Output:

        { name: 'రవి', active: true }

కుండలీకరణాలు లేకపోతే ఏం జరుగుతుంది?

కుండలీకరణాలు లేకపోతే JavaScript ఇంజిన్ కి గందరగోళం వస్తుంది. { } ని object అనుకోవాలా, లేక function యొక్క body అనుకోవాలా? అది function body అని భావిస్తుంది:

JavaScript — The Object Return Bug ▶ Run Code

const bad = name => { name: name };

console.log(bad("రవి"));

        Output:

        undefined

{ name: name } ని function యొక్క body గా చూసింది, అందులో return లేదు, కాబట్టి undefined వచ్చింది. అందుకే object ని return చేసేటప్పుడు ( { ... } ) అని రాయాలి!

6Arrow functions యొక్క అసలైన ఉపయోగం: చిన్న functions & Callbacks

Arrow functions ని ఎక్కువగా వాడేది, ఇంకో function కి ఒక చిన్న పనిని "ఇలా చెయ్యి" అని అందించడానికి (Callbacks). ముఖ్యంగా arrays తో:

JavaScript — Array Methods Preview ▶ Run Code

console.log([1, 2, 3].map(n => n * 2));
console.log([1, 2, 3, 4, 5, 6].filter(n => n % 2 === 0));

        Output:

        [ 2, 4, 6 ]

        [ 2, 4, 6 ]

• map(n => n * 2): లిస్ట్ లోని ప్రతి సంఖ్యను రెట్టింపు చేసి కొత్త లిస్ట్ ఇస్తుంది.
• filter(n => n % 2 === 0): సరి సంఖ్యలను మాత్రమే ఉంచుతుంది.

ఇప్పుడు ఇది పూర్తిగా అర్థం కాకపోయినా పర్వాలేదు! Arrays ని Chapter 14 లో, వాటి methods ని Chapter 15 లో నేర్చుకుంటాం. అప్పుడు ఈ arrow functions ఎంత సౌకర్యంగా ఉంటాయో తెలుస్తుంది. ఇక్కడ గమనించాల్సింది ఒక్కటే: n => n * 2 అనేది పేరు లేకుండా, నేరుగా రాసిన ఒక చిన్న సొగసైన function!

7Arrow function మరియు Normal function మధ్య తేడాలు

రెండూ ఒకే పని చేస్తాయి, కానీ కొన్ని ముఖ్యమైన తేడాలు ఉన్నాయి:

అంశం (Aspect)	Normal function (declaration)	Arrow function
రాయడం (Syntax)	`function add(a, b) { return a + b; }`	`const add = (a, b) => a + b;`
Hoisting	Declare చేయకముందే call చేయొచ్చు	Declare చేసిన తర్వాతే call చేయాలి
this విలువ	తనదైన సొంత `this` ఉంటుంది	తనకు సొంత `this` ఉండదు, బయటి దాన్ని వాడుతుంది (Lexical this)
ఎక్కడ వాడతాం?	ప్రధానమైన, పేరున్న పెద్ద functions	చిన్న functions, callbacks, array operations

1. Hoisting తేడా:

Arrow function ఒక variable లో దాచిన function expression. కాబట్టి Chapter 12 లో చూసినట్లే, declare చేయకముందే వాడితే error వస్తుంది:

JavaScript — No Hoisting for Arrow Functions

console.log(cube(3));

const cube = n => n ** 3;

        Output:

        ReferenceError: Cannot access 'cube' before initialization

2. this తేడా (చిన్న పరిచయం):

this అనేది objects తో పని చేసేటప్పుడు వచ్చే ఒక ప్రత్యేకమైన విషయం. Arrow functions కి తమ సొంత this ఉండదు (దీనినే Lexical this అంటారు). ఇది objects (Chapter 16) మరియు DOM events (Chapter 21) నేర్చుకునేటప్పుడు చాలా ఉపయోగపడుతుంది. ఇప్పటికి కేవలం తెలుసుకోండి, ఆందోళన అవసరం లేదు!

💡 ఏది ఎప్పుడు వాడాలి? (సులభమైన గోల్డెన్ రూల్)

చిన్న, ఒక్క లైన్ functions మరియు callbacks కి: arrow function వాడండి. కోడ్ చాలా క్లీన్ గా ఉంటుంది.
పెద్ద, ప్రధానమైన, పేరున్న functions కి: normal function declaration (ముందే call చేసే వీలు, చదవడానికి సులభం).

⚠️ Beginners చేసే 6 సాధారణ తప్పులు (Common Mistakes)

1. { } ఉన్నా return రాయకపోవడం:

const noReturn = (a, b) => {
  a + b;
};

console.log(noReturn(2, 3));

          Output: undefined
        

{ } రాస్తే implicit return ఆగిపోతుంది. return a + b; అని రాయాలి, లేదా { } తీసేసి (a, b) => a + b అని రాయాలి.

2. Object ని return చేసేటప్పుడు ( ) పెట్టకపోవడం:

పైన చూసినట్లు, name => { name: name } అనేది undefined ఇస్తుంది. name => ({ name: name }) అని రాయండి.

3. Parameters లేకపోతే ( ) రాయకపోవడం:

const hi = => 5;

          Output: SyntaxError: Unexpected token '=>'
        

Parameters లేనప్పుడు కూడా ఖాళీ కుండలీకరణాలు () => 5 తప్పనిసరి!

4. Declare చేయకముందే arrow function ని వాడటం:

ReferenceError: Cannot access 'cube' before initialization వస్తుంది. వాడటానికి ముందే రాయండి.

5. => మరియు >= ని కలిపేయడం (అత్యంత ప్రమాదకరమైన బగ్):

>= అంటే "ఎక్కువ లేదా సమానం" (comparison). => అంటే arrow. రెండూ వేరు, అక్షరాల క్రమం మారితే అర్థం మారిపోతుంది:

const a = 5;
const b = 3;

if (a => b) {
  console.log("ఎప్పుడూ ఇది వస్తుంది");
}

          Output: ఎప్పుడూ ఇది వస్తుంది
        

ఇక్కడ a => b ని JavaScript పోలికగా కాకుండా, ఒక arrow function (a తీసుకుని b ఇచ్చేది) గా భావించింది. Function ఎప్పుడూ truthy కాబట్టి if ఎప్పుడూ run అవుతుంది, a మరియు b విలువలు ఏమైనా సరే! (Error కూడా రాదు, అందుకే కనిపెట్టడం చాలా కష్టం). పోల్చాలంటే a >= b అని రాయండి.

6. ప్రతిదానికీ blindly arrow function వాడేయడం:

చిన్న functions కి arrow బాగుంటుంది. కానీ ఎక్కువ లైన్ల పెద్ద functions కి normal function పేరుతో రాస్తే చదవడానికి, ముందే call చేయడానికి సులభంగా ఉంటుంది.

8ప్రాక్టీస్ ప్రశ్నలు & సమాధానాలు

కింది normal functions ని arrow functions గా మార్చి రాయండి:

function double(n) { return n * 2; } ని arrow function గా మార్చండి. double(7) ని call చేసి చూడండి.
function fullName(first, last) { return `${first} ${last}`; } ని arrow function గా మార్చండి. fullName("Ravi", "Kumar") తో test చేయండి.
function isAdult(age) { return age >= 18; } ని arrow function గా మార్చండి. isAdult(20) తో test చేయండి.
price మరియు percent ఇస్తే, discount తీసేశాక ధర return చేసే arrow function రాయండి. ఎక్కువ లైన్లు వాడండి ({ } మరియు return తో). discountedPrice(500, 10) తో test చేయండి.
ఈ arrow function undefined ఎందుకు ఇస్తుంది? సరిచేయండి: const multiply = (a, b) => { a * b; };

👉 సమాధానాలు చూడండి

1. double function:

const double = n => n * 2;

console.log(double(7));

            Output: 14
          

2. fullName function:

const fullName = (first, last) => `${first} ${last}`;

console.log(fullName("Ravi", "Kumar"));

            Output: Ravi Kumar
          

3. isAdult function:

const isAdult = age => age >= 18;

console.log(isAdult(20));

            Output: true
          

4. discountedPrice function:

const discountedPrice = (price, percent) => {
  const discount = price * percent / 100;
  return price - discount;
};

console.log(discountedPrice(500, 10));

            Output: 450

            (500 లో 10% = 50, 500 - 50 = 450.)

5. multiply సరిదిద్దడం:

{ } ఉన్నా return లేదు. రెండు విధాలుగా సరిచేయొచ్చు:

// పద్ధతి 1: return రాయడం
const multiply = (a, b) => { return a * b; };

// లేదా పద్ధతి 2: { } తీసేసి implicit return వాడటం
const multiply2 = (a, b) => a * b;

🚀 మీరే try చేయండి

ఈ code ని మన compiler లో run చేయండి. రెండు arrow functions, ఒకదానిలో ఇంకొకటి వాడాం:

JavaScript — Nested Arrow Calls ▶ Run in Compiler

const add = (a, b) => a + b;
const square = n => n * n;

console.log(add(3, 4));
console.log(square(add(3, 4)));

add(3, 4) = 7, ఆ 7 ని square కి ఇస్తే 49. ఇప్పుడు విలువలు మార్చి, మీ సొంత arrow function (ఉదా: triple) కూడా రాసి చూడండి!

👉 Our Compiler లో JavaScript try చేయండి

📌 సారాంశం (Quick Summary):

Arrow function అంటే function ని => తో చిన్నగా రాసే ఆధునిక పద్ధతి: const add = (a, b) => a + b;
{ } లేకపోతే విలువ ఆటోమేటిక్ గా return అవుతుంది (implicit return). { } ఉంటే return మనమే రాయాలి.
ఒక parameter అయితే ( ) ఐచ్ఛికం. Parameters లేకపోతే లేదా రెండు, అంతకంటే ఎక్కువ ఉంటే ( ) తప్పనిసరి.
Object ని implicit గా return చేయాలంటే ( { ... } ) అని కుండలీకరణాల్లో పెట్టాలి.
Arrow functions కి hoisting ఉండదు (declare చేశాకే వాడాలి). వాటికి సొంత this ఉండదు.
=> (arrow) మరియు >= (ఎక్కువ లేదా సమానం) వేర్వేరు.
చిన్న functions మరియు callbacks కి arrow, పెద్ద ప్రధాన functions కి normal function మంచిది.

👉 తర్వాతి పాఠం: Arrays →

ఇప్పటివరకు మనం ఒక్కో విలువను ఒక్కో variable లో దాచాం. తర్వాతి పాఠంలో ఒకే చోట చాలా విలువలను నిల్వ చేసే జాబితాలు (Lists) — Arrays (క్రియేట్ చేయడం, యాక్సెస్ చేయడం, push/pop) గురించి నేర్చుకుందాం!

14. Arrays: create, access, push/pop →