Introduction

Family members stick with each other. Arrays are like families—they hold elements together. Imagine a family trip to the grand Mahakumbh Mela, a festival brimming with millions of people. In this adventure, a family of six goes on a journey to experience the festival and take the dip in the River Ganga, but amidst the crowd, not the two children but the elder child Amit and Uncle Ravi get lost in the crowd. Using JavaScript array methods, let's explore how the family finds their way back together.

The family consists of:

• Father (Mohan)

• Mother (Gauri)

• Grandpa (Prem)

• Grandma (Sarita)

• Amit (10 years old)

• Rohan (8 years old)

The Journey Begins (push & pop)

Mohan( at 4am in the morning): We have a train to catch. It leaves at 5. Rohan, you are asleep standing. Wake up and wash your face, you will get ample time to sleep in the train.

Grandma to Grandpa: Today, you will get a chance to wash you sins. Wash it properly.

Grandpa: How can I wash it properly as I can’t wash you away. Hahaha

Grandma: You speak like this, I’ll push you off the train. I am anyway going to take the holy dip. This sin will also wash away.

Mother: Hurry, continue your argument in the cab. Its downstairs already. Everyone, hurry. Let’s be seated in the cab. Train leaves sharp at 5.

The Chopra family reaches station and boards the train. They decide to keep the track of the their journey using an Javascript array.

let family = ["Father", "Mother", "Grandpa", "Grandma", "Amit", "Rohan"];
console.log(family); // ["Father", "Mother", "Grandpa", "Grandma", "Amit", "Rohan"]

When they reach the festival grounds, they realize they forgot to add Uncle Ravi to the trip.

Grandpa: Where’s my brother Ravi ? Mohan, you were suppose to tell him the meeting point at the ghats. You always forget.

Mohan: I told him. Its my uncle who forgets.

Mohan decides to add him by using ‘push’ method.

Push adds an element to the end of the array.

family.push("Uncle Ravi");
console.log(family); // ["Father", "Mother", "Grandpa", "Grandma", "Amit", "Rohan", "Uncle Ravi"]

Ravi: Sorry, I am late. I interacted with a sadhu baba on the way and got his blessings.

Grandma: You should have asked for some sense for your brother as well.

Uncle Ravi: Ahh, I am tired of walking Mohan. You can drop me to the hotel. Instead of walking all the way, Mohan uses pop to remove him.

Grandpa: Bhai, you have just come and you want to go back to the hotel.

Uncle Ravi: I came a couple of hours back. I was roaming at the ghats. Don’t worry I will meet you guys in sometime.

Instead of walking all the way to drop his uncle, Mohan uses pop to remove him.

Pop removes the last element of the array.

family.pop();
console.log(family); // ["Father", "Mother","Grandpa", "Grandma", "Amit", "Rohan"]

Entering the Crowded Mela (shift & unshift):

As the family enters the crowded streets of the Mahakumbh, they realize that Amit and Rohan are at the back. To ensure their safety, they move the kids to the front.

Gauri: Amit, hold your brothers hand and walk in the front.

Rohit: Amit doesn’t wash his hands, I am not holding it.

Amit: How do you know ? Were you watching me?

Gauri: Shut-up you two. You need to be infront.

The family uses unshift to bring them forward:

family.unshift("Amit", "Rohan");
console.log(family); // ["Amit", "Rohan", "Father", "Mother", "Grandpa", "Grandma"]

Uncle Ravi gets lost in the crowd.

Suddenly, Mohan gets a call from uncle Ravi that he hasn’t made it to the hotel and he is lost in the crowd. The family panics and removes the first person from their priority list using shift:

family.shift();
console.log(family); // ["Rohan", "Father", "Mother", "Grandpa", "Grandma", "Uncle Ravi"]

Remember, while using shift, the elements are removed from the beginning. This makes the Javascript engine work more in order to rearrange the elements. This changes the element’s address in the memory.

Now, Amit is missing too!!!!

Grandma: O my god!!!! Amit is missing and Ravi too. My husband’s sins have caught with the family.

Mohan: Calm down maa. They will not go anywhere. Gauri you also don’t panic and hold Rohit’s hand.

Gauri: Yes, you search for Amit. I am already panicking.

Mohan: Arrrraayyyyy!!!

Gauri: Oh Please! Just find our son.

Grandma: All those stories of people getting lost in the Kumb are coming true.

Searching for Amit (indexOf & includes)

The family starts searching for Amit among the crowd. They check if he is still in their group using includes():

Includes() Returns true if the array contains the value you pass in.

console.log(family.includes("Amit")); // false

Since Amit is missing, they try to remember his last position using indexOf():

Index() returns the index of the value you pass in. If the value is not found it returns -1.

console.log(family.indexOf("Amit")); // -1 (Amit is not found)

Panic sets in, but the family decides to remain calm and keep looking.

Arranging Clues (sort & reverse)

They approach a police help desk, where missing person announcements are made. They decide to sort the names alphabetically to ensure better organization.

Gauri: Sir, my son and our uncle is missing. They are lost in the festival.

Policeman: Two brothers separating was the standard trope but uncle and son is new.

Laughs

Gauri: Sir, is this a joke to you?

Policeman: No ma’am. The joke is on me. Sometimes I think I will also get lost in this grand festival.

Mohan: Sir, please help us.

Policeman: Don’t worry. We will use sort and reverse. Also, announcements will be done to find your missing items of family.

Mohan: They are not items.

Policeman: They are to me. Hehe.

Policeman starts his code:

let missingPersons = ["Rohan", "Amit", "Karan", "Pooja"];
missingPersons.sort();

console.log(missingPersons); // ["Amit", "Karan", "Pooja", "Rahul"]

The sort() method sorts the elements of an array in place and returns the reference to the same array, now sorted. The default sort order is ascending. It converts the elements into strings,

To check the most recent missing case first, they reverse the list:

missingPersons.reverse();
console.log(missingPersons); // ["Rahul", "Pooja", "Karan", "Amit"]

Now, they announce Amit’s disappearance!

Announcement: Amit, a 10 year old boy, wheatish looking is lost in the crowd. Who ever sees him please report to the nearest police desk. He is wearing a green shirt and blue cap with spiderman on it.

Clues and Decision Making (splice & slice)

Meanwhile, Amit finds another lost child Karan and decides to find his own family too. Amit remembers that his family has a group of six members, and he needs to extract the important ones.

To make a temporary group of just his parents and Rohan, he uses slice:

let temporaryGroup = family.slice(1, 4);
console.log(temporaryGroup); // ["Father", "Mother", "Grandma"]

Slice returns a new array containing the extracted elements.

There are other ways in which he could have used slice.

Remember this whole group:

let family = ["Father", "Mother", "Grandpa", "Grandma", "Amit", "Rohan", “Uncle Ravi”]

let temporaryGroup = family.slice(3); // ["Grandma", "Amit", "Rohan", “Uncle Ravi”]

In this example, slice(3) extracts elements from index 3 to the end of the array.

2.   2.    let temporaryGroup = family.slice(2,4); // ["Grandpa", "Grandma"]
   

In this example, slice(2, 4) extracts elements from index 2 up to, but not including, index 3.

3.   3.    let temporaryGroup = family.slice(-2);//[ "Rohan", “Uncle Ravi”]
   

   In this example, slice(-2) extracts the last two elements of the array. When using a negative index with the slice method, negative indices are counted from the end of the array, starting at -1 for the last element, -2 for the second-to-last element, and so on. The negative index -2 itself is included because it is the starting point of the extraction.

4.   4.    let temporaryGroup = family.slice(4,-1);//[ "Amit", "Rohan"]
   

   In this example, slice(1, -1) starts extracting from index 1 and goes up to, but does not include, the element at index -1 (which is the last element).

5.   5.    let temporaryGroup = family.slice();
     //["Father", "Mother", "Grandpa", "Grandma", "Amit", "Rohan", “Uncle Ravi”]
   

   In this example , the array is returned as it is.

   Since Grandma is too old to search, Amit removes her using splice:

   Splice is used to remove or replace existing elements and/or adding new elements in place.

   Splice(startIndex, elements to be removed/added, “element to be inserted”)

    temporaryGroup.splice(2, 1);
    //starting at index 2 remove 1 element which in this case was the last element.
    console.log(temporaryGroup); // ["Father", "Mother"]
   

   Now, Amit is focused on finding only his parents!

The Reunion 🎉

Finally, through the police announcements and their efforts to search for Amit, the family finds Amit near the entrance of the fair. The family rejoices, and Amit hugs his parents.

Uncle Ravi is also seen walking towards the police check desk after listening to the announcement.

Their trip, though filled with tension, ends with relief and happiness. And through their journey, we learn the following JS Array methods.