Everything You Need to Know About JavaScript Arrays with snacks examples

Suraj KumarSuraj Kumar
8 min read

Table of contents

What is an Array?

Array ek container jaisa hota hai jo ek hi type ke multiple values ko store kar sakta hai. Samjho ki tumhare paas ek almari hai jisme sirf books rakh sakte ho, aur har shelf ek book ke liye haiβ€”yahi array ka concept hai. Array ka value index ke through access karte hai . Array ka index Zero se start hota hai. Array ko represent square brackets mai karte hai [] .

Javascript mai two way se array ko define kiya jaat hai.☺️

let myArray = [1, 2, 3, 4, 5, 6];

let myArray2 = new Array("Apple", "Mango", "Banana", "Papaya");

πŸ€” Array Kyon Zaroori Hai?

  1. Ek hi naam me multiple values store kar sakte ho.

  2. Memory efficient hota hai.

  3. Loop se easily access kar sakte ho.

πŸ“Œ Example (Bina Array Ke)

Agar 5 numbers store karne ho, toh hume alag variables lene padenge:

let num1 = 10;
let num2 = 20;
let num3 = 30;
let num4 = 40;
let num5 = 50;

Ye boring aur inefficient hai!

πŸš€ Example (Array Ke Saath)

let numbers = [10, 20, 30, 40, 50];
console.log(numbers[0]); // 10
console.log(numbers[2]); // 30

Bas ek naam, aur saari values ek jagah! πŸŽ‰


πŸš€ JavaScript Array Methods Explained with Fun!

Socho ki apke paas ek snack box hai jisme different snacks rakhe hain. aap kabhi naya snack add karte ho, kabhi purana snack hata dete ho, aur kabhi snacks ki jagah change karni hoti hai. JavaScript arrays bhi isi tarah kaam karte hain!

Ab chalo JavaScript ke top 10 array methods ko fun aur real-life examples ke saath samajhte hain! πŸ˜ƒ

1️⃣ push() – Array ke Last Me Naya Item Add Karo!

πŸ“Œ Work:

  • Array ke last me ek ya zyada elements add karta hai.

  • Original array modify hota hai.

  • Array ki updated length return karta hai.

✨ Syntax:

array.push(element1, element2, ...);

πŸ’‘ Example: Snacks Box Me Naye Snacks Add Karo

Socho tumhare paas ek snack box hai, aur tum usme naye snacks daalna chahte ho.

let snacks = ["Chips", "Cookies", "Chocolate"];
snacks.push("Juice", "Biscuits"); // Naye snacks add kiye
console.log(snacks); 
// ["Chips", "Cookies", "Chocolate", "Juice", "Biscuits"]

βœ… Returns: Naya array length.


2️⃣ pop() –Last Wala Item Remove Karo!

πŸ“Œ Work:

  • Array ke last element ko remove karta hai.

  • Original array modify hota hai.

  • Jo element remove hota hai, wahi return hota hai.

✨ Syntax :

array.pop();

πŸ’‘ Example: Snacks Box Se Last Wala Snack Nikal Do

Socho aapke paas ek snack box hai, aur aap usme se last wala snack nikal rahe ho.

let snacks = ["Chips", "Cookies", "Chocolate"];
let lastSnack = snacks.pop();

console.log(snacks);  
// Output: ["Chips", "Cookies"]

console.log(lastSnack);  
// Output: "Chocolate" (jo remove ho gaya)

βœ… Returns: Removed item.


3️⃣ unshift() – Pehle Hi Naya Item Add Karo!

πŸ“Œ Work:

  • Array ke start me ek ya zyada elements add karta hai.

  • Original array modify hota hai.

  • Naya array length return karta hai.

✨ Syntax:

array.unshift(element1, element2, ...);

πŸ’‘ Example: Snacks Box Ke Start Me Naya Snack Add Karo

Socho aapke paas ek snack box hai, aur aap sabse pehle rakha gaya snack ko change karna chahte ho.

let snacks = ["Chips", "Cookies", "Chocolate"];
snacks.unshift("Cake", "Ice-Cream");

console.log(snacks);  
// Output: ["Cake", "Ice-Cream", "Chips", "Cookies", "Chocolate"]

βœ… Returns: New array length.


4️⃣ shift() –Pehle Wala Item Remove Karo!

πŸ“Œ Work:

  • Array ke first (sabse pehle) element ko remove karta hai.

  • Original array modify hota hai.

  • Jo element remove hota hai, wahi return hota hai.

✨ Syntax:

array.shift();

πŸ’‘ Example: Snacks Box Se Sabse Pehla Snack Nikal Do

Socho aapke paas ek snack box hai, aur aap sabse pehle rakha gaya snack hata rahe ho.

let snacks = ["Chips", "Cookies", "Chocolate"];
let firstSnack = snacks.shift();

console.log(snacks);  
// Output: ["Cookies", "Chocolate"]

console.log(firstSnack);  
// Output: "Chips" (jo remove ho gaya)

βœ… Returns: Jo item remove hua.


5️⃣ slice() –Array Ka Ek Tukda Nikalo!

πŸ“Œ Work:

  • Array ka ek part (slice) nikalta hai bina original array ko change kiye.

  • Ek naya array return karta hai jo selected elements contain karta hai.

  • Start aur End index par based hota hai (End index include nahi hota).

✨ Syntax:

array.slice(start, end);
  • startIndex: Jahan se slicing start karni hai (include hota hai).

  • endIndex: Jahan tak slicing karni hai (include nahi hota).

πŸ’‘ Example: Snacks Box Se Kuch Snacks Chuno

Maan lo aapke paas ek snack box hai, par aap sirf beech ke snacks chahte ho.

let snacks = ["Chips", "Cookies", "Chocolate", "Juice", "Biscuits"];
let selectedSnacks = snacks.slice(1, 4);

console.log(selectedSnacks);  
// Output: ["Cookies", "Chocolate", "Juice"]

console.log(snacks);  
// Output: ["Chips", "Cookies", "Chocolate", "Juice", "Biscuits"] (original array same hai)

βœ… Returns: New array (original change nahi hota).


6️⃣ splice() – Array Ka Operation Master! (Add, Remove, Replace)

πŸ“Œ Work:

  • Array ke beech me se elements ko remove, replace ya add kar sakte hai.

  • Original array modify hota hai.

  • Jo elements remove hote hain, unka ek naya array return hota hai.

✨ Syntax:

array.splice(startIndex, deleteCount, item1, item2, ...);
  • startIndex: Jahan se changes start karne hain.

  • deleteCount: Kitne elements hatane hain.

  • item1, item2, ...: (Optional) Yahan par naye elements daal sakte hain jo insert honge.

πŸ’‘ Example: Snacks Box Se Beech Ke Snacks Hatao

Maan lo aapke paas ek snack box hai, par aap beech ke kuch snacks hata rahe ho.

let snacks = ["Chips", "Cookies", "Chocolate", "Juice", "Biscuits"];
let removedSnacks = snacks.splice(1, 2); // Index 1 se 2 items hatao

console.log(snacks);  
// Output: ["Chips", "Juice", "Biscuits"]

console.log(removedSnacks);  
// Output: ["Cookies", "Chocolate"]

βœ… Returns: Removed items ka array.


7️⃣ indexOf() – Kisi Bhi Element Ka Address (Index) Pata Karo!

πŸ“Œ Work:

  • Array me kisi element ka first occurrence (pehli baar jo dikhe) ka index return karta hai.

  • Agar element nahi mila to -1 return karta hai.

  • Case-sensitive hota hai (uppercase/lowercase ka farak padta hai).

✨ Syntax:

array.indexOf(searchElement, fromIndex);
  • searchElement: Jis element ka index dhundhna hai.

  • fromIndex: (Optional) Kahan se search karna shuru kare (default: 0).

πŸ’‘ Example: Snacks Box Me Chocolate Hai Kaha?

Maan lo aapke paas ek snack box hai, aur aap "Chocolate" ka index pata karna chahte ho.

let snacks = ["Chips", "Cookies", "Chocolate", "Juice", "Biscuits"];
let index = snacks.indexOf("Chocolate");

console.log(index);  
// Output: 2

βœ… Returns: Element ka index ya -1 agar nahi mila.


8️⃣ includes() – Kya Ye Element Array Me Hai?

πŸ“Œ Work:

  • Check karta hai ki koi element array me hai ya nahi.

  • Agar element milta hai to true return karta hai, nahi to false.

  • Case-sensitive hota hai (uppercase/lowercase ka farak padta hai).

✨ Syntax:

array.includes(searchElement, fromIndex);
  • searchElement: Jis element ko check karna hai.

  • fromIndex: (Optional) Kahan se search start karna hai (default: 0).

πŸ’‘ Example: Snacks Box Me "Chocolate" Hai Kya?

let snacks = ["Chips", "Cookies", "Chocolate", "Juice", "Biscuits"];
let hasChocolate = snacks.includes("Chocolate");

console.log(hasChocolate);  
// Output: true

console.log(snacks.includes("Candy")); 
// false

βœ… Returns: true ya false


9️⃣ join() – Array Ko Ek String Me Convert Karo!

πŸ“Œ Work:

  • Array ke saare elements ko ek single string me convert karta hai.

  • Har element ke beech me ek separator (default: ,) add karta hai.

  • Original array change nahi hota.

✨ Syntax:

array.join(separator);
  • separator: (Optional) Elements ko separate karne ke liye character ya string. Default: , (comma).

πŸ’‘ Example: Snacks Ko Ek Line Me Jodo

Maan lo aapke paas ek snack box hai, aur aap sab snacks ko ek string me combine karna chahte ho.

let snacks = ["Chips", "Cookies", "Chocolate"];
console.log(snacks.join(", ")); 
// "Chips, Cookies, Chocolate"

βœ… Returns: Ek single string.


πŸ”Ÿ filter() – Pasand Ke Snacks Chuno!

πŸ“Œ Work:

  • Array ke elements ko filter karta hai ek condition ke base par.

  • Naya array return karta hai bina original array ko change kiye.

✨ Syntax:

array.filter(function(element, index, array) {
    return condition;
});

πŸ’‘ Example: Healthy Snacks Filter Karo

Socho ki apke paas ek snack box hai, par tum sirf healthy snacks khana chahte ho. Tum filter() method ka use karke unhealthy snacks hata sakte ho!

let snacks = [
    { name: "Chips", healthy: false },
    { name: "Fruits", healthy: true },
    { name: "Cookies", healthy: false },
    { name: "Nuts", healthy: true }
];

// Sirf healthy snacks filter karo
let healthySnacks = snacks.filter(snack => snack.healthy);

console.log(healthySnacks);
// Output: [ { name: "Fruits", healthy: true }, { name: "Nuts", healthy: true } ]

βœ… Returns: Ek naya array jisme sirf woh elements hote hain jo condition ko satisfy karte hain.


πŸ“‘Recap!

MethodWorkReturnModify
shift()First element ko remove karta hai.Removed elementOriginal array changes
slice()Array ka part (portion) nikaalta hai bina modify kiye.Naya array (selected part)Original array same rehta hai
splice()Array me elements add, remove ya replace karta hai.Removed elements arrayOriginal array changes
indexOf()Array me kisi element ka index pata karta hai.Index number or -1Original array same rehta hai
includes()Check karta hai ki element array me hai ya nahi.true or falseOriginal array same rehta hai
join()Array ke elements ko ek string me convert karta hai.StringOriginal array same rehta hai
push()Array ke end me ek ya zyada elements add karta hai.New array lengthOriginal array changes
pop()Array ke end se last element remove karta hai.Removed elementOriginal array changes
unshift()Array ke start me ek ya zyada elements add karta hai.New array lengthOriginal array changes
shift()Array ke start se first element remove karta hai.Removed elementOriginal array changes
100
Subscribe to my newsletter

Read articles from Suraj Kumar directly inside your inbox. Subscribe to the newsletter, and don't miss out.

Written by

Suraj Kumar
Suraj Kumar

I am MERN STACK Web Developer.I am Student of BCA.