Javascript Array Methods

Hitesh and Piyush are traveling from Delhi to Mumbai on the Rajdhani Express. Throughout the journey, they see many activities, such as coaches being added, removed, rearranged and so on - just like working with JavaScript arrays!

So, let’s start our journey from Delhi.

1. Before Departure Checking the Number of Coaches (Lenght)

Now, Hitesh checks the train details to see how many coaches are attached.

let train = ["Engine", "Sleeper", "AC", "General"];
console.log(train.length); /* 4

The train has four sections: Engine, Sleeper, AC, and General. Hitesh measured the train's length using the length function. length function return total length of array.

---

2. Checking Which Coach is in a Specific Position (at())

Hitesh booked an AC coach ticket. Before boarding, he checks its position of AC coach.

let train = ["Engine", "Sleeper", "AC", "General"];
console.log(train.at(2)); /*  "AC"

Hitesh can check the type of coach using the at() function. The at() function takes the position as an argument and returns the value at that position in the array. “bas 2 number vala dabba konsa he vo batayega“

---

3. Connecting the Train Coaches (join())

Now, the loco pilot wants to connect all the coaches with a -> to connect the train coaches.

let train = ["Engine", "Sleeper", "AC", "General"];
console.log(train.join(" -> "));
/* Output: "Engine -> Sleeper -> AC -> General" */

After execution, all the coaches connect with “→” using join function.

---

Now, the train starts moving slowly with a Chuk-Chuk... Chuk-Chuk... sound. After a 5-hour journey, we reach Jaipur, and many passengers have left the train, so last coach (general coach) is empty.

4. Removing the Last Coach at a Jaipur Station (pop())

At the jaipur station, the General coach is removed because general coach is empty.

let train = ["Engine", "Sleeper", "AC", "General"];
train.pop();
console.log(train); /* ["Engine", "Sleeper", "AC"]

Using pop function you can remove and return last element from array.

---

5. Adding a New Coach at the End (push())

Since the general coach was removed, railways wants to add a luxury coach at the end.

let train = ["Engine", "Sleeper", "AC"];
train.push("Luxury");
console.log(train); /* ["Engine", "Sleeper", "AC", "Luxury"]

The push function takes a value as an argument and adds it to the end of the array, push change the size of array.

---

After a 7-hour journey, we reach Udaipur, and replacing the train Engine in Udaipur railway station. so, the old Engine is detached, and a High-Speed Engine is attached.

6. Replacing the Engine (shift())

First, we need to remove the train engine.

let train = ["Engine", "Sleeper", "AC", "Luxury"];
train.shift();
console.log(train); /* ["Sleeper", "AC", "Luxury"]

Shift function help to remove train engine. it’s remove and return first value of array and change the size of array.

---

7. Adding a New Engine (unshift())

After removing the old engine, we add a new high speed engine.

let train = ["Sleeper", "AC", "Luxury"];
train.unshift("High-Speed Engine");
console.log(train); /* ["High-Speed Engine", "Sleeper", "AC", "Luxury"]

Unshift function is used to add elements to the beginning of an array and change the length of the array.

---

The train is now faster! 🚀 After a 6-hour journey, we reach Ahmedabad

8. Removing and Replacing Coaches Midway (splice())

At the Ahmedabad station, the railway removes the damaged AC Coach and replaces it with a First-Class Coach.

let train = ["High-Speed Engine", "Sleeper", "AC", "Luxury"]
train.splice(2, 1, "First-Class");
console.log(train); /* ["High-Speed Engine", "Sleeper", "First-Class", "Luxury"]

You can use the splice function to replace an item in an array with a different value. In this splice at position 2, remove 1 item, and “First-Class”.

---

9. Checking if a Certain Coach is in the Train(includes())

Hitesh wants to check if the pantry is available on the train or not.

let train = ["High-Speed Engine", "Sleeper", "First Class", "Luxury"]
console.log(train.includes("Pantry")); // false

includes() function return true or false. If pantry is not available in train array then return false, if pantry is available in train array then return true.

---

After an exciting journey, Hitesh and Piyush have finally arrived in Mumbai! Now, we need to reverse the direction of the train.

10. Reversing the Order of Coaches for a Turnaround (reverse())

After reaching a terminal station, the train needs to change direction.

let train = ["High-Speed Engine", "Sleeper", "First Class", "Luxury"]
train.reverse();
console.log(train); /* ["Luxury", "First-Class", "Sleeper", "High-Speed Engine"]

Now, the Luxury Coach is at the front, and the Engine is at the end, train is ready for the return journey.

---

Final Stop: Mumbai! 🚉

After a long journey, Hitesh and Piyush have finally arrived at Mumbai Railway Station with knowledge of array functions.

Just like a train’s journey, JavaScript arrays allow us to modify and manage data efficiently.

Now, it's time for them to take a well-deserved holiday and explore the Mumbai! city.

---

Conclusion-

Although there are many methods of an array.For more information you can visit MDN-WEB-DOCS.

Thanks for reading.Follow for more.And don't forget to hit a 👍 if you find this article helpful. Happy learning! 🎉

connect me