forEach
forEach JavaScript ka ek bohat useful method hai jo Arrays ke sath use hota hai. Isko seekhne ke liye
hum isay step-by-step toor kar samjhte hain.
Seedhay lafzon mein: forEach ka matlab hai "Har aik ke liye". Yeh array ke har item par bari bari aik
function chalata hai.
Step 1: Concept (Real Life Example)
Socho tumhare paas ek box hai jisme 5 mukhtalif fruits hain (Apple, Mango, Banana, etc.). Agar tumhe
har fruit ko utha kar check karna hai ke wo kharab to nahi, to tum kya karo ge?
1. Pehla fruit uthaoge -> Check karo ge -> Wapis rakhoge.
2. Dusra fruit uthaoge -> Check karo ge -> Wapis rakhoge.
3. ...aur yeh tab tak karo ge jab tak box khali na ho jaye.
Code mein forEach bilkul yehi kaam karta hai. Wo list (array) ke har item ko pakadta hai aur uspe wo
action perform karta hai jo tum ne bataya ho.
Step 2: Syntax (Likhte kaise hain?)
Iska basic structure yeh hota hai:
JavaScript
[Link]( function(item) {
// Yahan wo kaam likho jo har item ke sath karna hai
} );
Step 3: Coding Example (Practical)
Chalo ab code likhte hain. Hum ek friends ki list banate hain aur har dost ko "Hello" bolte hain.
JavaScript
// 1. Ek Array banaya
const friends = ["Ali", "Sara", "Ahmed", "Zain"];
// 2. forEach lagaya
[Link]((dost) => {
[Link]("Hello " + dost);
});
Output (Result):
Plaintext
Hello Ali
Hello Sara
Hello Ahmed
Hello Zain
Step 4: Iske Andar Kya Milta Hai? (Parameters)
forEach ka jo function hai, wo automatic 3 cheezein receive kar sakta hai, lekin mostly hum pehli 2 use
karte hain:
1. Item (Element): Jo current cheez abhi loop mein hai (Jese: "Ali").
2. Index (Number): Us item ka position number (0, 1, 2...).
Example with Index:
JavaScript
const fruits = ["Apple", "Mango", "Banana"];
[Link]((fruit, index) => {
[Link](index + ": " + fruit);
});
Output:
Plaintext
0: Apple
1: Mango
2: Banana
Zaroori Baatein (Important Notes)
1. No Return: forEach wapis kuch return nahi karta (iska result hamesha undefined hota hai).
Agar tumhe naya array banana hai to map use hota hai.
2. No Break: Tum is loop ko beech mein rok nahi sakte (jese break keyword normal loops mein
use hota hai, wo yahan kaam nahi karega). Yeh poori list khatam karke hi dam lega.
Summary
● Agar tumhe array ke har item par koi action perform karna hai (print karna, database mein
bhejna, count karna), to forEach best hai.
● Yeh code ko saaf (clean) aur parhne mein asaan banata hai compared to purana for loop.
Map
map() JavaScript ka sab se important method hai, khaas tor par agar aap React seekhne
walay hain.
Seedhay lafzon mein: map() ka kaam hai purani cheezon ko badal kar (transform kar ke)
nayi shakal dena.
forEach aur map mein Farq (Bohat Zaroori)
Yeh samajhna sab se zaroori hai:
1. forEach: Sirf loop chalata hai. Ye wapis kuch nahi deta (Return nahi karta).
2. map: Loop chalata hai AUR aik Naya Array wapis bana kar deta hai.
Step 1: Real Life Example (Factory)
Socho aik factory ki machine hai:
● Input (Purana Array): Kacchay Aalu (Potatoes).
● Process (Map Function): Cheelna aur fry karna.
● Output (Naya Array): Chips ka packet.
map original array (Aalu) ko kharab nahi karta, wo aik alag naya array (Chips) banata hai.
Step 2: Code Example
Chalo numbers ka aik array lete hain aur map use kar ke sab ko Double (x2) karte hain.
JavaScript
const numbers = [2, 4, 6];
// map use kar rahe hain
const newNumbers = [Link]((num) => {
return num * 2;
});
[Link](newNumbers);
Output:
Plaintext
[4, 8, 12]
Step 3: Syntax ko Samjhein
Ghaur karein ke forEach ke muqablay mein yahan 2 changes hain:
1. Variable Store karna: Hum ne shuru mein const newNumbers = ... likha. Kyun? Kyunke
map hamein result wapis bhejta hai, to usay catch karne ke liye naya variable chahiye.
2. Return keyword: Function ke andar return likhna lazmi hai. return ka matlab hai "Ye lo
naya value aur nayi array mein daal do".
Step 4: React mein iska kya kaam hai?
Aap ne React ka poocha tha na? React mein map sab se ziyada use hota hai data ko HTML
mein badalne ke liye.
Example scenario:
App ke paas friends ke naam hain, aur aap unhein <h1> tags mein dikhana chahte hain.
JavaScript
const friends = ["Ali", "Hassan", "Zain"];
// Har dost ko <h1> bana do
const htmlList = [Link]((dost) => {
return `<h1>${dost}</h1>`;
});
[Link](htmlList);
Output (Naya Array):
Plaintext
["<h1>Ali</h1>", "<h1>Hassan</h1>", "<h1>Zain</h1>"]
(React isi output ko screen par render karta hai).
Summary: Kab kya use karein?
● Agar sirf print karwana hai ya data check karna hai -> forEach use karein.
● Agar data ko change karna hai aur naya array banana hai -> map use karein.
Next Step:
Ab aap batao, main aapko aik choti si exercise doon map ki practice ke liye? Ya phir filter
method samjhaoon (jo list mein se cheezein delete karne ke liye use hota hai)?
filter()
filter() method ka naam hi iska kaam batata hai. Iska matlab hai "Chaan-been karna" ya kisi
cheez ko chaan kar nikalna.
Seedhay lafzon mein: filter aik list (array) mein se bekaar cheezein nikal kar sirf kaam ki
cheezein naye array mein dalta hai.
Step 1: Real Life Example (Security Guard)
Socho aik club ya voting center ke bahar aik Security Guard khara hai.
● Logon ki line lagi hai (Array).
● Guard ki shart (Condition): "Sirf wo andar jayega jiski umar 18 saal ya us se ziyada
❌
hai."
✅
1. Pehla banda aya (12 saal) -> Guard ne roka .
❌
2. Dusra banda aya (25 saal) -> Guard ne jane diya .
3. Teesra banda aya (15 saal) -> Guard ne roka .
Code mein filter yehi guard wala kaam karta hai.
Step 2: Code Example
Chalo hum numbers ka aik array banate hain aur usme se sirf baray numbers (>= 18) nikalte
hain.
JavaScript
const ages = [12, 25, 15, 30, 10, 40];
// Filter lagaya
const adults = [Link]((age) => {
return age >= 18; // Shart (Condition)
});
[Link](adults);
Output:
Plaintext
[25, 30, 40]
(Dekha? 12, 15 aur 10 gayab ho gaye kyunke wo shart poori nahi kar paye).
Step 3: Yeh Kaam Kaise Karta Hai? (True/False Game)
filter function ke andar jo hum code likhte hain, wo basically aik Sawal (Question) hota hai jo
True ya False mein jawab deta hai.
● age >= 18
○ Jab 12 aya: 12 >= 18? Jawab: False (Array mein mat dalo).
○ Jab 25 aya: 25 >= 18? Jawab: True (Naye Array mein dalo).
Note: map ki tarah, filter bhi Naya Array return karta hai. Original array (ages) wesa ka wesa
rehta hai.
Step 4: Real World Use (Project mein kahan use hoga?)
Socho aap aik Shopping Website (daraz/amazon type) bana rahe ho.
User ne kaha: "Mujhe sirf wo mobile dikhao jo 20,000 se saste hon."
Wahan filter use hoga:
JavaScript
const products = [
{ name: "iPhone", price: 150000 },
{ name: "Samsung", price: 30000 },
{ name: "Nokia", price: 5000 }, // Sasta
{ name: "Infinix", price: 15000 } // Sasta
];
const cheapMobiles = [Link]((item) => {
return [Link] < 20000;
});
[Link](cheapMobiles);
// Output mein sirf Nokia aur Infinix ayenge.
Summary Table
Method Kaam (Action) Output
forEach Sirf loop chalana Kuch nahi (undefined)
map Har cheez ko badalna (Change) Naya Array (Same quantity)
filter Cheezein kam karna (Select) Naya Array (Kam quantity)
Next Step:
Ab aap ke paas JS ke 3 main hatyar (forEach, map, filter) aa gaye hain.
find()
find() method bilkul filter() jesa hai, lekin ismein aik bohat bara farq hai.
Seedhay lafzon mein: find() ka matlab hai "Dhoondo aur pehlay walay ko pakar kar wapis
aa jao."
Yeh poori list check nahi karta, jese hi isay apni cheez milti hai, yeh wahi ruk (stop) jata hai.
Step 1: Real Life Example (Keys dhoondna)
Socho aap ke paas keys (chabiyon) ka aik gucha hai.
Aap ko "Car ki key" chahiye.
❌
❌
1. Pehli key check ki -> Ghar ki hai .
✅
2. Dusri key check ki -> Bike ki hai .
3. Teesri key check ki -> Car ki hai!
Ab jab car ki key mil gayi, to kya aap baaqi keys check karo ge? Nahi! Aap wahin ruk jao ge.
find() yehi karta hai. filter() poori list check karta hai, lekin find() pehla match miltay hi bas kar
deta hai.
Step 2: Code Example
Chalo numbers mein se 10 se bara number dhoondtay hain.
JavaScript
const numbers = [5, 8, 12, 50, 100];
const result = [Link]((num) => {
return num > 10;
});
[Link](result);
Output:
Plaintext
12
Sawal: Output mein 50 aur 100 kyun nahi aye? Wo bhi to 10 se baray thay?
Jawab: Kyunke find ko jese hi 12 mila, wo khushi se wahi ruk gaya aur usay lekar bahar aa
gaya. Usne agay dekha hi nahi.
Step 3: filter vs find (Sab se Important Farq)
Yeh interview mein aksar poocha jata hai.
Feature filter() find()
Kaam Saaray match dhoondta hai. Sirf pehla match dhoondta
hai.
Return Type Hamesha aik Array [] deta hai. Aik akela Item (Value) deta
hai.
Example Result [12, 50, 100] 12
Visual difference:
📦 Box deta hai (jis mein cheezein hoti hain).
🍎 Cheez deta hai (direct item).
● filter ->
● find ->
Step 4: Real World Use (ID se user dhoondna)
Web development mein find sab se ziyada tab use hota hai jab humein kisi unique ID se user
dhoondna ho.
Misaal ke tor par, aap ke paas 3 users hain:
JavaScript
const users = [
{ id: 1, name: "Ali" },
{ id: 2, name: "Hassan" }, // Humein ye chahiye
{ id: 3, name: "Zain" }
];
// ID 2 wala user dhoondo
const userMila = [Link]((user) => {
return [Link] === 2;
});
[Link]([Link]);
Output:
Plaintext
Hassan
(Yahan filter use karte to wo [{name: "Hassan"}] deta, jo aik array hota. Humein direct object
chahiye tha, isliye find use kiya).
Step 5: Agar kuch na milay to?
Agar aap aisi cheez dhoond rahay ho jo list mein hai hi nahi, to find aap ko undefined return
karega.
JavaScript
const numbers = [1, 2, 3];
const result = [Link]((num) => num > 10);
[Link](result); // Output: undefined
Summary:
1. forEach: Loop chalao (No return).
2. map: Sab ko badlo (Return New Array).
3. filter: Chaan-been karo (Return New Array).
4. find: Sirf pehla dhoondo aur ruk jao (Return Single Value).