JavaScript में Arrays और Objects: Spread/Rest, Map, Filter, और Reduce को आसान तरीके से समझें"

Back to Home

JavaScript में Arrays और Objects: Spread/Rest, Map, Filter, और Reduce को आसान तरीके से समझें"

Category: Javascript
परिचय
JavaScript में Arrays और Objects दो सबसे महत्वपूर्ण डेटा स्ट्रक्चर हैं।
अगर आप JavaScript सीख रहे हैं, तो आपको ये दोनों अच्छे से समझने होंगे —
क्योंकि ये हर जगह काम आते हैं — React, Node.js, API handling, Data processing आदि में।

आज हम जानेंगे कि कैसे Spread / Rest, Map, Filter, और Reduce के ज़रिए आप Arrays और Objects को और भी पॉवरफुल बना सकते हैं 🚀

🧩 1. Spread Operator (...) – "कॉपी और मिक्स करने का जादू"
Spread Operator (...) किसी Array या Object को "फैलाने" के लिए इस्तेमाल होता है।

✨ Example – Array में Spread
const numbers = [1, 2, 3];
const moreNumbers = [...numbers, 4, 5];

console.log(moreNumbers); // [1, 2, 3, 4, 5]
यहाँ ...numbers ने पूरे array को फैलाया, और फिर हमने उसमें extra values जोड़ीं।

✨ Example – Object में Spread
const user = { name: "Amit", age: 25 };
const updatedUser = { ...user, city: "Delhi" };

console.log(updatedUser);
// { name: "Amit", age: 25, city: "Delhi" }
👉 इससे आप किसी object की shallow copy बना सकते हैं और नए properties जोड़ सकते हैं।

🧺 2. Rest Operator (...) – "बचे हुए values को पकड़ो"
Rest Operator दिखने में spread जैसा है, पर काम उल्टा करता है —
यह कई values को एक variable में collect करता है।

✨ Example
function sum(...nums) {
return nums.reduce((acc, curr) => acc + curr, 0);
}

console.log(sum(1, 2, 3, 4)); // 10
यहाँ ...nums सारे arguments को एक array में इकट्ठा करता है।

🔄 3. map() – "हर item पर एक नया operation"
map() हर array element पर कोई function चलाता है और नया array return करता है।

✨ Example
const prices = [100, 200, 300];
const gstAdded = prices.map(price => price + price * 0.18);

console.log(gstAdded); // [118, 236, 354]
👉 map() का फायदा — original array change नहीं होता।

🔍 4. filter() – "सिर्फ काम की चीज़ें रखो"
filter() array से उन elements को रखता है जो condition पूरी करते हैं।

✨ Example
const marks = [45, 80, 33, 90, 60];
const passed = marks.filter(mark => mark >= 50);

console.log(passed); // [80, 90, 60]
👉 Useful जब आपको किसी array से specific data निकालना हो।

🧮 5. reduce() – "पूरे array को एक value में बदलो"
reduce() एक powerful method है — यह पूरे array को किसी एक single value में reduce करता है।

✨ Example – Array का sum
const numbers = [1, 2, 3, 4, 5];

const total = numbers.reduce((acc, curr) => acc + curr, 0);

console.log(total); // 15
यहाँ acc (accumulator) पिछले result को hold करता है और curr current value है।

⚙️ Bonus: map + filter + reduce साथ में!
कभी-कभी हमें तीनों को एक साथ इस्तेमाल करना पड़ता है।

✨ Example
const data = [10, 20, 30, 40, 50];

// Step 1: 30 से ज्यादा values रखो
// Step 2: हर value में 10 जोड़ो
// Step 3: सबका sum निकालो

const resulttt= data
.filter(num => num > 30)
.map(num => num + 10)
.reduce((acc, curr) => acc + curr, 0);

console.log(resulttt); // (40+10) + (50+10) = 110

Truck:
Concept काम
Spread (...) Array/Object फैलाना
Rest (...) Values इकट्ठा करना
map() हर item पर नया value
filter() condition के हिसाब से select करना
reduce() सारे items को combine करना
इन methods से आप JavaScript में data को manipulate करना आसान और readable बना सकते हैं।
Suggestion by author:
अगर आप JS के beginner हैं तो कोशिश करें कि आप हर method को manually practice करें।
एक बार जब आप इन्हें समझ लेंगे, तो आपका कोड साफ कोड , छोटा और logical तर्कसंगत दिखेगा!