
🚆 JavaScript Arrays Journey
Hitesh and Piyush are traveling from Delhi to Mumbai on the Rajdhani Express.
Throughout the journey, they see many activities — coaches being added, removed, rearranged, and more — just like working with JavaScript arrays!
So, let’s begin our journey from Delhi.
1. Before Departure — Checking the Number of Coaches (length)
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.
let train = ["Engine", "Sleeper", "AC", "General"];
console.log(train.at(2)); // "AC"
The at() function takes a position as an argument and returns the value at that position in the array. 🗣️ “Bas 2 number vala dabba konsa hai vo batayega!”
3. Connecting the Train Coaches (join())
Now, the loco pilot wants to connect all the coaches using "->" to form a complete train.
let train = ["Engine", "Sleeper", "AC", "General"];
console.log(train.join(" -> "));
// Output: "Engine -> Sleeper -> AC -> General"
After execution, all the coaches connect with "→" using the join() function. Now, the train starts moving slowly with a Chuk-Chuk... Chuk-Chuk... sound.
4. Removing the Last Coach at Jaipur Station (pop())
At the Jaipur station, the General coach is removed because it's empty.
let train = ["Engine", "Sleeper", "AC", "General"];
train.pop();
console.log(train); // ["Engine", "Sleeper", "AC"]
The pop() function removes and returns the last element from the array.
5. Adding a New Coach at the End (push())
Since the General coach was removed, the railways 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, changing the array size.
After a 7-hour journey, they reach Udaipur, where the Engine is replaced with a High-Speed Engine.
6. Replacing the Engine (shift())
First, we remove the old Engine.
let train = ["Engine", "Sleeper", "AC", "Luxury"];
train.shift();
console.log(train); // ["Sleeper", "AC", "Luxury"]
The shift() function removes and returns the first element of the array, changing its size.
7. Adding a New Engine (unshift())
After removing the old Engine, a High-Speed Engine is added.
let train = ["Sleeper", "AC", "Luxury"];
train.unshift("High-Speed Engine");
console.log(train); // ["High-Speed Engine", "Sleeper", "AC", "Luxury"]
The unshift() function adds elements to the beginning of an array and changes its length.
Now, the train is faster! After a 6-hour journey, they reach Ahmedabad.
8. Removing and Replacing Coaches Midway (splice())
At the Ahmedabad station, the AC Coach is removed and replaced 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"]
The splice() function can add, remove, or replace items in an array. Here, at position 2, it removes 1 item and replaces it with "First-Class".
9. Checking if a Certain Coach is in the Train (includes())
Hitesh wants to check if a Pantry coach is available on the train.
let train = ["High-Speed Engine", "Sleeper", "First-Class", "Luxury"];
console.log(train.includes("Pantry")); // false
The includes function returns true or false depending on whether the value exists in the array. Here, "Pantry" is not present, so it returns false.
10. Reversing the Order of Coaches for a Turnaround (reverse())
After reaching the terminal station in Mumbai, 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. The train is ready for its 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.