JavaScript Arrow Functions

Arrow Function అనేది JavaScript లో functions రాయడానికి concise మరియు modern syntax. సాధారణ function expression తో పోలిస్తే తక్కువ code తో function ను నిర్వచించవచ్చు.

Arrow Function Syntax

సాధారణ syntax: const functionName = (parameters) => expression;

ఇక్కడ => ను arrow notation అంటారు. ఇది parameters మరియు function body మధ్య ఉంటుంది.

ఒక Parameter ఉన్నప్పుడు

ఒకే parameter ఉంటే parentheses ను వదిలివేయవచ్చు. ఉదాహరణకు, const square = number => number * number;

చాలా Parameters ఉన్నప్పుడు

రెండు లేదా అంతకంటే ఎక్కువ parameters ఉంటే parentheses తప్పనిసరిగా ఉపయోగించాలి. ఉదాహరణకు, const add = (a, b) => a + b;

Block Body మరియు return

Arrow function body లో ఒకే expression ఉంటే ఆ value automatic గా return అవుతుంది. దీనిని implicit return అంటారు.

ఒకటి కంటే ఎక్కువ statements ఉన్నప్పుడు curly braces ఉపయోగించి return keyword ను explicit గా రాయాలి.

Arrow Functions ఉపయోగాలు

చిన్న functions ను readable గా రాయడానికి ఉపయోగపడతాయి.
Array methods వంటి map(), filter() లో callback functions గా ఉపయోగించవచ్చు.
Function expressions కంటే concise syntax అందిస్తాయి.

ముఖ్యమైన గమనిక

Arrow functions కు సాధారణ functions లాగా స్వంత this value ఉండదు. ఈ behavior ను తరువాత objects మరియు advanced JavaScript lessons లో వివరంగా నేర్చుకుంటాం.

Simple Explanation

Arrow function అంటే function రాయడానికి short form. function keyword బదులుగా parameters తరువాత => symbol ఉపయోగిస్తాం.

ఉదాహరణకు, const double = number => number * 2; అనే arrow function number ను రెండు రెట్లు చేసి result ఇస్తుంది. ఒకే expression ఉన్నప్పుడు return keyword అవసరం ఉండదు.

Real-Life Example

ఒక shopping application లో product price ను రెండు రెట్లు చేయాల్సి ఉందనుకోండి. ప్రతి product కోసం చిన్న calculation function అవసరం అవుతుంది. అలాంటి చిన్న పని కోసం arrow function ఉపయోగిస్తే code తక్కువగా మరియు సులభంగా ఉంటుంది.

అలాగే, ఒక list లోని ప్రతి student mark కు bonus marks కలపడానికి marks.map(mark => mark + 5) వంటి arrow function ఉపయోగించవచ్చు.

Code Examples

ఒక Parameter తో Arrow Function

const square = number => number * number;

console.log(square(5));

square అనే constant లో arrow function ను store చేశాం. ఈ function ఒక number parameter తీసుకుని దాని square ను return చేస్తుంది. ఒకే parameter మరియు ఒకే expression ఉన్నందున parentheses మరియు return keyword ను వదిలివేశాం.

చాలా Parameters మరియు Implicit Return

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

console.log(add(4, 6));

add function రెండు parameters తీసుకుంటుంది. రెండు parameters ఉన్నందున (a, b) అని parentheses ఉపయోగించాం. a + b expression automatic గా return అవుతుంది. అందువల్ల ఇక్కడ ప్రత్యేకంగా return keyword అవసరం లేదు.

Array తో Arrow Function

const scores = [5, 7, 9];
const doubledScores = scores.map(score => score * 2);

console.log(doubledScores.join(", "));

map() method ప్రతి score పై arrow function ను అమలు చేస్తుంది. ప్రతి score ను రెండు రెట్లు చేసి కొత్త array లో ఉంచుతుంది. చివరగా join() ద్వారా values ను comma మరియు space తో console లో చూపించాం.

10, 14, 18

Line-by-Line Explanation

const multiply = (a, b) => {

multiply అనే constant లో arrow function ను store చేస్తున్నాం. ఈ function a మరియు b అనే రెండు parameters తీసుకుంటుంది. Curly braces ఉపయోగించినందున ఇది block body అవుతుంది.

return a * b;

ఈ line a మరియు b విలువలను multiply చేసి result ను return చేస్తుంది. Block body ఉపయోగించినప్పుడు return keyword ను తప్పనిసరిగా రాయాలి.

};

ఈ line arrow function body ముగిసిందని సూచిస్తుంది. Function expression ను constant కు assign చేసినందున statement చివర semicolon పెట్టాం.

console.log(multiply(3, 4));

multiply function ను 3 మరియు 4 arguments తో call చేస్తున్నాం. Function 12 ను return చేస్తుంది, ఆ value console లో కనిపిస్తుంది.

Try It

Try this JavaScript code:

Example

const calculateTotal = (price, quantity) => {
  return price * quantity;
};

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

Try It Yourself »

Practice

Practice:

calculateDiscountedPrice అనే arrow function ను complete చేయండి. ఇది price మరియు discountPercent తీసుకుని discount తీసివేసిన తరువాత మిగిలిన price ను return చేయాలి. ఉదాహరణకు 1000 పై 10 percent discount ఉంటే output 900 రావాలి.

Hint:

Discount amount కోసం price * discountPercent / 100 ఉపయోగించండి. తరువాత ఆ amount ను price నుంచి తీసివేయండి.

Common Mistakes

Arrow function లో ఒకే parameter ఉన్నప్పటికీ ప్రతి సందర్భంలో parentheses తప్పనిసరి అని అనుకోవడం.

ఒకే parameter ఉన్నప్పుడు number => number * 2 అని parentheses లేకుండా రాయవచ్చు. అయితే readability కోసం (number) => number * 2 అని కూడా రాయడం valid.

Curly braces ఉపయోగించి return keyword మర్చిపోవడం.

{ } block body ఉపయోగించినప్పుడు value automatic గా return కాదు. అందువల్ల return keyword తప్పనిసరిగా రాయాలి.

Arrow function ను call చేయకుండా function definition మాత్రమే రాయడం.

Function ను ఉపయోగించడానికి దాని పేరు తరువాత parentheses తో call చేయాలి. ఉదాహరణకు square(5).

Arrow function మరియు సాధారణ function రెండింటికీ this behavior ఒకేలా ఉంటుందని అనుకోవడం.

Arrow function కు స్వంత this ఉండదు. ఇది surrounding scope నుంచి this value ను తీసుకుంటుంది. ఈ విషయం objects lesson లో మరింతగా నేర్చుకుంటాం.

Interview Questions

JavaScript లో Arrow Function అంటే ఏమిటి?

Answer:

Arrow function అనేది functions రాయడానికి ఉపయోగించే concise syntax. ఇది => arrow notation ను ఉపయోగిస్తుంది మరియు చిన్న functions కోసం చాలా అనుకూలంగా ఉంటుంది.

Arrow function లో implicit return అంటే ఏమిటి?

Answer:

Curly braces లేకుండా ఒక expression రాస్తే ఆ expression value automatic గా return అవుతుంది. ఉదాహరణకు const add = (a, b) => a + b; లో a + b implicit గా return అవుతుంది.

Arrow function లో parentheses ఎప్పుడు optional?

Answer:

ఒకే parameter ఉన్నప్పుడు parentheses optional. ఉదాహరణకు number => number * 2 valid syntax. రెండు లేదా అంతకంటే ఎక్కువ parameters ఉన్నప్పుడు parentheses అవసరం.

Arrow functions కు స్వంత this ఉంటుందా?

Answer:

లేదు. Arrow functions స్వంత this value ను create చేయవు. అవి బయట ఉన్న surrounding scope నుంచి this value ను ఉపయోగిస్తాయి.

Exam Questions

క్రింది function ను arrow function syntax లోకి మార్చండి: const greet = function(name) { return “Hello ” + name; };

Answer:

సరైన రూపం: const greet = name => “Hello ” + name;

క్రింది code output ఏమిటి? const cube = n => n * n * n; console.log(cube(3));

Answer:

Output 27. ఎందుకంటే 3 × 3 × 3 విలువ 27.

Block body ఉన్న arrow function లో return keyword ఎందుకు అవసరం?

Answer:

Curly braces ఉన్న block body value ను automatic గా return చేయదు. అందువల్ల result ను బయటకు పంపడానికి return keyword ఉపయోగించాలి.

Quick Revision

Arrow function functions రాయడానికి concise syntax.
=> symbol parameters మరియు function body మధ్య ఉంటుంది.
ఒకే parameter ఉన్నప్పుడు parentheses optional.
ఒకే expression ఉన్నప్పుడు implicit return ఉంటుంది.
Curly braces ఉపయోగిస్తే return keyword అవసరం.
Arrow functions ను map() వంటి array methods లో callback గా ఉపయోగించవచ్చు.
Arrow functions కు స్వంత this value ఉండదు.

JavaScript Arrow Functions