# 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.

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1738575201689/a5fc5d27-cb7f-4dd3-874a-40b1a96bda19.png align="center")

```css
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.

```css
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.

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1738576034914/88e6e1e2-a420-4518-a050-7c266d2fea2f.png align="center")

```css
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.

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1738578839505/6f1c167f-1a24-46d4-93a2-1116feca3e3f.png align="center")

```css
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.

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1738580142589/3d5de8f0-9787-4e7c-aad9-a14ad58ca225.png align="center")

```css
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.

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1738581319646/e8a9620d-a077-4be5-a9d0-48361c555ffd.png align="center")

```css
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.

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1738582425811/c577e3b2-0f11-4b0b-8f19-64311a78dd22.png align="center")

```css
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.

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1738584218406/a4d90392-41b3-4747-bdc9-33d5afb10232.png align="center")

```css
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.

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1738584218406/a4d90392-41b3-4747-bdc9-33d5afb10232.png align="center")

```css
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.

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1738587562481/6b6628fc-6545-4452-8a3b-626837860402.png align="center")

```css
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](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array)[.](https://www.w3schools.com/js/js_array_methods.asp)

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

connect me