Skip to main content

Command Palette

Search for a command to run...

🎭 The Great Indian Baraat & the Secret of JavaScript Array Methods! 🎊

Master JavaScript Array Methods with easy-to-follow examples and boost your coding skills!

Published
β€’7 min read
🎭 The Great Indian Baraat & the Secret of JavaScript Array Methods! 🎊
M

Hi, I'm Manshi, a full-stack web developer. I write about building web apps and my journey in tech. Follow along as I share what I'm learning and creating.

Introduction: What are Arrays in JavaScript?

Before we jump into the shor sharaba of our Great Indian Wedding, let's first understand arrays in JavaScript. An array is a special variable that can hold multiple values in a single variable. In simple terms, it’s like a guest list at an Indian weddingβ€”full of different people (values), but all belong to the same celebration (array)! JavaScript arrays are zero-indexed: the first element of an array is at index 0, the second is at index 1, and so on β€” and the last element is at the value of the array's length property minus 1.

How to Declare an Array?

let guests = ["Rahul", "Simran", "Amit", "Pooja"];

Why Use Arrays?

  • Store multiple values under one name.

  • Easy to access & manipulate (like a shaadi ka guest list, easily add/remove people!).

  • Powerful built-in methods make handling data super easy!

Let's understand these methods through the fun chaos of an Indian wedding! πŸŽ‰


1. reduce() – "Shaadi Ka Budget" πŸ’Έ

Shaadi ke total kharche ka hisaab kaun rakhega? reduce() method ka kaam hai total cost nikalna!

let expenses = [50000, 20000, 30000, 10000];
let totalCost = expenses.reduce((total, expense) => total + expense, 0);
console.log(`Total Shaadi Budget: β‚Ή${totalCost}`);

Technical Definition:
The reduce() method reduces an array to a single value by applying a function to each element and accumulating the result.


2. map() - "Sabke Haath Pe Mehendi" 🌺

Imagine har mehendi artist same design sabke haath pe bana raha hai, par thoda personalize bhi kar raha hai. Bas waise hi map() har array element pe same operation apply karta hai aur naya array return karta hai.

let guests = ['Raj', 'Simran', 'Pooja', 'Aman'];
let mehendiDesigns = guests.map(guest => guest + ' ke haath pe mehendi');
console.log(mehendiDesigns);
// ['Raj ke haath pe mehendi', 'Simran ke haath pe mehendi', 'Pooja ke haath pe mehendi', 'Aman ke haath pe mehendi']

Technical Definition:
The map() method creates a new array by applying a function to each element of the original array without modifying it.


3. filter() – "Bouncers Ki Entry Check" 🚧

Shaadi me gate pe bouncer hota hai jo entry check karta hai. Sirf invited log hi andar aa sakte hain!

let guests = [
    { name: "Rahul", hasInvitation: true },
    { name: "Simran", hasInvitation: false },
    { name: "Amit", hasInvitation: true }
];
let allowedGuests = guests.filter(guest => guest.hasInvitation);
console.log(allowedGuests);

Technical Definition:
filter() returns a new array with elements that pass a certain condition.


4. find() – "Joota Chhupai" πŸ‘ž

Joota Chhupai ek classic Indian wedding game hai! Ab find() ki madad se dulhe ka joota dhundhte hain!

let shoes = ["Sandal", "Chappal", "Sneaker", "Joota", "Loafer"];
let dulhaKaJoota = shoes.find(shoe => shoe === "Joota");
console.log(`Dulha ka joota mil gaya: ${dulhaKaJoota}`);

Technical Definition:
find() returns the first element that matches the condition in the provided function.


5. forEach() – "Invitation Baatna” πŸ’Œ

Har shaadi me sabse pehle invitation dete hain. Sabhi relatives ko ek-ek karke bulaana zaroori hota hai!

let guests = ["Rahul", "Simran", "Amit", "Pooja"];
guests.forEach((guest) => {
    console.log(`Invitation sent to ${guest}!`);
});

Technical Definition:
The forEach() method executes a provided function once for each array element. It doesn’t return any value.


6. some() – "Gulaab Jamun Pasand Nahi Aaye" πŸ›

Shaadi ki daawat mein ek banda bhi agar keh de ki "gulaab jamun ache nahi bane", toh khana acha nhi tha k drame! some() check karta hai kya koi ek bhi element condition satisfy karta hai.

let reviews = ['Achhe lage', 'Mast the', 'thande the'];
let negativeReview = reviews.some(review => review.includes('thande'));
console.log(negativeReview); // true

Technical Definition:
The some() method checks if at least one element in the array satisfies the given condition and returns true or false.


7. every() – "Sab Khush Hai?" 😊

Ek achi shaadi wahi hoti hai jisme sabhi guests khush ho!

let guests = [
    { name: "Rahul", isHappy: true },
    { name: "Simran", isHappy: true },
    { name: "Amit", isHappy: false }
];
let allHappy = guests.every(guest => guest.isHappy);
console.log(allHappy ? "Mast Shaadi Ho Rahi Hai!" : "Arre Bhai, Koi Guest Nakhre Kar Raha Hai!");

Technical Definition:
The every() method checks if all elements in the array satisfy the provided condition and returns true or false.


8. push() – "Naye Mehmaan!" πŸ‘«

You know when new guests keep coming to the wedding? Just like that, we use push() to add elements at the end of an array.

let baraatis = ["Ramesh", "Suresh", "Amit"];
baraatis.push("Neha", "Priya");
console.log(baraatis); // ["Ramesh", "Suresh", "Amit", "Neha", "Priya"]

Technical Definition:
The push() method adds one or more elements to the end of an array and returns the new length of the array.


9. pop() – "Koi Nikal Gaya" πŸšΆβ€β™‚οΈ

Shaadi mein koi khana kha k hi ghar nikal liya! pop() removes the last element from an array.

let baraatis = ["Ramesh", "Suresh", "Amit"];
baraatis.pop();
console.log(baraatis); // ["Ramesh", "Suresh"]

Technical Definition:
The pop() method removes the last element from an array and returns it.


10. unshift() – "VIP Guests Ki Entry" 🌟

Agar VIP guests aaye, toh unko sabse aage jagah milti hai! unshift() adds elements at the beginning of the array.

let baraatis = ["Amit", "Neha"];
baraatis.unshift("VIP Guest");
console.log(baraatis); // ["VIP Guest", "Amit", "Neha"]

Technical Definition:
The unshift() method adds elements at the beginning of an array and returns the new length.


11. shift() – "Bua-Fufa Naraaz Hokar Chale Gaye" 😀

Jaise kisi function me Bua-Fufa mood off karke sabse pehle hi nikal lete hain, waise hi shift() array ke first element ko hata deta hai! πŸ˜†

let baraatis = ["Bua-Fufa", "Mami", "Didi"];
baraatis.shift();
console.log(baraatis); // ["Mami", "Didi"]

Technical Definition:
The shift() method removes the first element from an array and returns it.


12. splice() – Guest List Me Changes! βœ‚οΈ

Kuch guests cancel ho gaye, aur kuch naye aaye toh? splice() se guests hata bhi sakte hai aur naye add bhi kar sakte hai kahi se bhi!

let baraatis = ["Ramesh", "Suresh", "Amit", "Neha"];
baraatis.splice(1, 2, "Priya", "Rahul");
console.log(baraatis); // ["Ramesh", "Priya", "Rahul", "Neha"]

Technical Definition:
The splice() method modifies an array by removing or replacing elements at a specified index.


13. slice() - Sirf Close Friends Ki List! ❀️

Shaadi mein sabko nahi bula sakte, sirf close friends ko bulaya jaye toh? slice() original list se ek hissa nikal kar naya array bana leta hai.

let guests = ['Ravi', 'Sohan', 'Neha', 'Rahul', 'Pooja'];
let closeFriends = guests.slice(1, 4);
console.log(closeFriends);
// ['Sohan', 'Neha', 'Rahul']

Technical Definition:
The slice(start, end) method returns a new array containing elements from start index to one before the end index.


14. indexOf() – Guest Kidhar Hai? πŸ”

Agar Neha ko dhoondhna hai toh? indexOf() se pata chalega woh array me kaha hai.

let baraatis = ["Ramesh", "Suresh", "Neha", "Amit"];
console.log(baraatis.indexOf("Neha")); // 2

Technical Definition:
The indexOf() method returns the index of the first occurrence of a specified element. If not found, it returns -1.


15. includes() – "Guest Aaya Kya?" πŸ‘€

Agar kisi guest ka confirm nahi pata toh? includes() se check kar sakte hai ki woh hai ya nahi.

let baraatis = ["Ramesh", "Suresh", "Neha", "Amit"];
console.log(baraatis.includes("Neha")); // true
console.log(baraatis.includes("Rahul")); // false

Technical Definition:
The includes() method checks whether an array contains a specified element and returns true or false.


16. concat() – Baraati Aur Dulhan Wale Mil Gaye!

Dulhan ke side aur dulha ke side alag-alag dance kar rahe the, ab dono groups mil ke ek saath dance karenge! concat() do ya zyada arrays ko merge karne ke kaam aata hai.

let dulhaSide = ['Raj', 'Aman'];
let dulhanSide = ['Simran', 'Pooja'];
let fullBaraat = dulhaSide.concat(dulhanSide);
console.log(fullBaraat);
// ['Raj', 'Aman', 'Simran', 'Pooja']

Technical Definition:
The concat() method merges two or more arrays and returns a new array without modifying the original ones.


Did you enjoy this style of learning? Drop a ❀️ and let me know your thoughts!