JavaScript map(), filter(), and reduce()
JavaScript map(), filter(), మరియు reduce()
Arrays లోని data ను సులభంగా మార్చడానికి JavaScript మనకు map(), filter(), మరియు reduce() methods ను అందిస్తుంది.
map()
map() array లోని ప్రతి element పై callback function ను అమలు చేసి, కొత్త array ను return చేస్తుంది. Original array మార్చబడదు.
ఉదాహరణకు, ప్రతి price కు 20 add చేయాలంటే map() ఉపయోగించవచ్చు.
filter()
filter() ఇచ్చిన condition ను satisfy చేసే elements తో కొత్త array ను తయారు చేస్తుంది. Condition true అయిన elements మాత్రమే కొత్త array లోకి వస్తాయి.
reduce()
reduce() array లోని అన్ని elements ను ఒకే final value గా మార్చుతుంది. Sum, total, average లేదా object creation వంటి పనులకు ఇది ఉపయోగపడుతుంది.
ఈ methods లో ముఖ్యమైన విషయం
- map() ప్రతి element ను transform చేస్తుంది.
- filter() అవసరమైన elements ను select చేస్తుంది.
- reduce() మొత్తం array ను ఒక final result గా combine చేస్తుంది.
ఈ methods callback function ను argument గా తీసుకుంటాయి. Callback function కు సాధారణంగా current element value అందుతుంది. filter() callback తప్పనిసరిగా true లేదా false వంటి result ఇవ్వాలి. reduce() లో accumulator previous result ను store చేస్తుంది.
Simple Explanation
ఒక shopping cart లో prices ఉన్నాయని అనుకుందాం. ప్రతి price కు discount లేదా tax add చేయడానికి map() ఉపయోగించవచ్చు. ఒక నిర్దిష్ట విలువ కంటే ఎక్కువ ఉన్న prices మాత్రమే కావాలంటే filter() ఉపయోగించవచ్చు. చివరగా selected prices మొత్తం తెలుసుకోవాలంటే reduce() ఉపయోగించవచ్చు.
సులభంగా గుర్తుంచుకోవడానికి: map = మార్చు, filter = ఎంచుకో, reduce = కలిపి ఒక result చేయి.
Real-Life Example
ఒక online shopping app లో products list ఉందని ఊహించండి. Product prices పై delivery charge add చేయడానికి map() ఉపయోగిస్తాం. Available products మాత్రమే చూపించడానికి filter() ఉపయోగిస్తాం. Customer cart లోని మొత్తం bill తెలుసుకోవడానికి reduce() ఉపయోగిస్తాం.
ఈ మూడు methods ను వరుసగా ఉపయోగిస్తే data processing code చిన్నగా, readable గా, మరియు maintainable గా ఉంటుంది.
Code Examples
map(), filter(), మరియు reduce() తో prices process చేయడం
const prices = [100, 250, 80, 150];
const increasedPrices = prices.map(price => price + 20);
const selectedPrices = increasedPrices.filter(price => price >= 150);
const total = selectedPrices.reduce((sum, price) => sum + price, 0);
console.log(increasedPrices);
console.log(selectedPrices);
console.log(total);మొదట map() ప్రతి price కు 20 add చేస్తుంది. తరువాత filter() 150 లేదా అంతకంటే ఎక్కువ ఉన్న prices ను select చేస్తుంది. చివరగా reduce() selected prices మొత్తం calculate చేస్తుంది.
[120, 270, 100, 170] [270, 170] 440
Objects array పై map() మరియు filter() ఉపయోగించడం
const users = [
{ name: "Ravi", active: true },
{ name: "Sita", active: false },
{ name: "Kiran", active: true }
];
const activeUserNames = users
.filter(user => user.active)
.map(user => user.name);
console.log(activeUserNames);మొదట filter() ద్వారా active users ను మాత్రమే తీసుకుంటాం. తరువాత map() ద్వారా ఆ objects నుండి name values ను కొత్త array గా తయారు చేస్తాం.
["Ravi", "Kiran"]
reduce() తో average calculate చేయడం
const marks = [80, 70, 90, 60];
const totalMarks = marks.reduce((total, mark) => total + mark, 0);
const average = totalMarks / marks.length;
console.log(totalMarks);
console.log(average);reduce() అన్ని marks ను కలిపి totalMarks ను తయారు చేస్తుంది. తరువాత total ను array length తో divide చేసి average ను కనుగొంటాం.
300 75
Line-by-Line Explanation
ఈ line లో prices అనే array ను create చేసి నాలుగు numeric values ను store చేస్తున్నాం.
map() ప్రతి price పై callback ను అమలు చేస్తుంది. ప్రతి value కు 20 add చేసి కొత్త array ను increasedPrices లో store చేస్తుంది.
filter() ప్రతి price 150 కంటే ఎక్కువ లేదా సమానమా అని check చేస్తుంది. Condition true అయిన values మాత్రమే selectedPrices లోకి వస్తాయి.
reduce() selectedPrices లోని values ను ఒక్కొక్కటిగా కలుపుతుంది. sum accumulator గా previous total ను ఉంచుతుంది. చివరి 0 initial value గా పనిచేస్తుంది.
map() ద్వారా తయారైన కొత్త array ను console లో print చేస్తుంది.
filter() ద్వారా select చేసిన values ను console లో చూపిస్తుంది.
reduce() ద్వారా calculate చేసిన final total ను console లో చూపిస్తుంది.
Try It
Try this JavaScript code:
const numbers = [10, 20, 30, 40, 50];
const doubledNumbers = numbers.map(number => number * 2);
const largeNumbers = doubledNumbers.filter(number => number >= 60);
const total = largeNumbers.reduce((sum, number) => sum + number, 0);
console.log(doubledNumbers);
console.log(largeNumbers);
console.log(total);Practice
Practice:
scores array లోని ప్రతి score కు 10 marks add చేసి, 70 లేదా అంతకంటే ఎక్కువ ఉన్న scores ను filter చేయండి. చివరగా selected scores మొత్తం calculate చేయండి.
Hint:
మొదట map() తో 10 add చేయండి. తరువాత filter(score => score >= 70) ఉపయోగించండి. చివరగా initial value 0 తో reduce() ఉపయోగించండి.
Common Mistakes
map() original array ను మార్చుతుందని అనుకోవడం.
map() సాధారణంగా కొత్త array ను return చేస్తుంది. Original array ను అలాగే ఉంచి కొత్త result ను వేరే variable లో store చేయండి.
filter() callback లో condition ఇవ్వకుండా value ను return చేయడం.
filter() callback ప్రతి element కోసం true లేదా false result ఇవ్వాలి. ఉదాహరణకు number > 50 వంటి condition ఉపయోగించండి.
reduce() లో initial value ఇవ్వకపోవడం వల్ల empty array లేదా unexpected data పై సమస్యలు రావడం.
Numbers మొత్తం కోసం సాధారణంగా reduce((sum, number) => sum + number, 0) లాగా initial value ను 0 గా ఇవ్వండి.
map() ను ఉపయోగించి side effects చేయడం లేదా ప్రతి iteration లో console output మాత్రమే చేయడం.
map() ను ప్రతి element నుంచి కొత్త value తయారు చేయడానికి ఉపయోగించండి. Output అవసరం లేకపోతే iteration కోసం forEach() సరైన method కావచ్చు.
Interview Questions
JavaScript లో map() మరియు filter() మధ్య తేడా ఏమిటి?
Answer:
map() ప్రతి element ను transform చేసి కొత్త array ను return చేస్తుంది. filter() condition true అయిన elements మాత్రమే తీసుకుని కొత్త array ను return చేస్తుంది.
reduce() method యొక్క accumulator అంటే ఏమిటి?
Answer:
Accumulator అనేది reduce() ప్రతి iteration లో previous result ను store చేసే value. ఉదాహరణకు sum calculate చేస్తున్నప్పుడు accumulator ఇప్పటివరకు లభించిన total ను ఉంచుతుంది.
ఈ methods original array ను మార్చుతాయా?
Answer:
map(), filter(), మరియు reduce() సాధారణంగా original array ను mutate చేయవు. ఇవి కొత్త array లేదా final value ను return చేస్తాయి. అయితే callback లో మనమే object properties ను మార్చితే mutation జరగవచ్చు.
map() మరియు forEach() మధ్య తేడా ఏమిటి?
Answer:
map() కొత్త array ను return చేస్తుంది. forEach() ప్రతి element పై function ను run చేస్తుంది కానీ కొత్త array ను return చేయదు.
Exam Questions
క్రింది code output ఏమిటి? const values = [1, 2, 3]; const result = values.map(value => value * 3); console.log(result);
Answer:
Output: [3, 6, 9]. map() ప్రతి value ను 3 తో multiply చేసి కొత్త array ను తయారు చేస్తుంది.
filter() method ను ఉపయోగించి 50 కంటే ఎక్కువ numbers ను ఎలా select చేస్తారు?
Answer:
const result = numbers.filter(number => number > 50); అని రాయవచ్చు. Condition true అయిన numbers మాత్రమే result లో ఉంటాయి.
reduce() ఉపయోగించి [5, 10, 15] array మొత్తం ఎలా calculate చేస్తారు?
Answer:
const total = [5, 10, 15].reduce((sum, number) => sum + number, 0); ఈ code యొక్క result 30.
Quick Revision
- map() ప్రతి element ను మార్చి కొత్త array ను return చేస్తుంది.
- filter() condition true అయిన elements ను మాత్రమే కొత్త array లో ఉంచుతుంది.
- reduce() మొత్తం array ను ఒక final value గా combine చేస్తుంది.
- map(), filter(), మరియు reduce() callback functions ను ఉపయోగిస్తాయి.
- reduce() లో accumulator previous result ను store చేస్తుంది.
- ఈ methods సాధారణంగా original array ను మార్చవు.
- Multiple methods ను chaining ద్వారా వరుసగా ఉపయోగించవచ్చు.