Mastering JavaScript's .splice() Method: A Comprehensive Tutorial with Real-world Examples
Published: 2023-04-05 18:26:41

`.splice` is one of the JavaScript built in array object which method which can be use to add, remove, and replace elements in an array. In this Blog post, we'll explore the `.splice()` method, how it works, and some examples of how it can be use.

## **Syntax**

`.splice` method modifies the main array and also returns the removed element as a new array. The syntax of the **`.splice()`** method is:

```jsx
array.splice(start, deleteCount, item1, item2, ...)
```

- **`start`**: The index at which to start changing the array. If negative, it specifies an offset from the end of the array. For example, **`2`** means to start from the second to last element.
- **`deleteCount`**: An integer indicating the number of elements in the array to remove from **`start`**.
- **`item1`**, **`item2`**, etc.: The elements to add to the array, beginning at the **`start`** index.

The **`.splice()`** method returns an array containing the deleted elements, or an empty array if no elements are deleted.

## **Example 1: Adding elements with `.splice()`**

To add elements to an array using **`.splice()`**, you can specify the index at which to start adding elements, a **`deleteCount`** of **`0`**, and the elements to add.

```jsx
const fruits = ['🍎', '🍌', '🍒'];
fruits.splice(1, 0, '🍊', '🍐');
console.log(fruits); // ['🍎', '🍊', '🍐', '🍌', '🍒']
```

In this example, we add the elements **`'🍊'`** and **`'🍐'`** to the array **`fruits`** starting at index **`1`** (i.e., after **`'🍎'`**). Since we're not deleting any elements, we set **`deleteCount`** to **`0`**.

## **Example 2: Removing elements with `.splice()`**

To remove elements from an array using **`.splice()`**, you can specify the index at which to start removing elements and the number of elements to remove.

```jsx
const fruits = ['🍎', '🍊', '🍐', '🍌', '🍒'];
fruits.splice(2, 2);
console.log(fruits); // ['🍎', '🍊', '🍒']
```

In this example, we remove **`2`** elements starting at index **`2`**, which are **`'🍐'`** and **`'🍌'`**. The remaining elements **`'🍎'`**, **`'🍊'`**, and **`'🍒'`** are left in the array.

## **Example 3: Replacing elements with `.splice()`**

You can also use **`.splice()`** to replace elements in an array. To do this, you can specify the index at which to start replacing elements, the number of elements to remove, and the elements to add.

```jsx
const fruits = ['🍎', '🍊', '🍐', '🍌', '🍒'];
fruits.splice(1, 2, '🍍', '🥝');
console.log(fruits); // ['🍎', '🍍', '🥝', '🍌', '🍒']
```

In this example, we replace **`2`** elements starting at index **`1`** (i.e., **`'🍊'`** and **`'🍐'`**) with the elements **`'🍍'`** and **`'🥝'`**.

## **Example 4: Removing and adding elements at the same time with `.splice()`**

You can use **`.splice()`** to remove and add elements to an array at the same time. To do this, you can specify the index at which to start removing elements, the number of elements to remove, and the elements to add.

```jsx
const fruits = ['🍎', '🍊', '🍐', '🍌', '🍒'];
fruits.splice(2, 2, '🥭', '🍇');
console.log(fruits); // ['🍎', '🍊', '🥭', '🍇', '🍒
```

In this example, we remove **`2`** elements starting at index **`2`** (i.e., **`'🍐'`** and **`'🍌'`**) and add the elements **`'🥭'`** and **`'🍇'`** in their place. The resulting array is **`['🍎', '🍊', '🥭', '🍇', '🍒']`**
.

## **Example 5: Removing all elements with `.splice()`**

To remove all elements from an array using **`.splice()`**, you can specify the index at which to start removing elements and a **`deleteCount`** equal to the length of the array.

```jsx
const fruits = ['🍎', '🍊', '🍐', '🍌', '🍒'];
fruits.splice(0, fruits.length);
console.log(fruits); // []
```

In this example, we remove all elements from the array **`fruits`** by starting at index **`0`** and specifying a **`deleteCount`** equal to the length of the array. The resulting array is an empty array, i.e., **`[]`**

In a nutshell, the `.splice()` method is amazing, but it can be a little bit complicated for beginners. I must say that I had some difficulty initially when I was learning about this method, but I believe this blog will help you understand it better with these real-life use cases.

If you are looking React developer, consider hiring me.  Check out my Fiverr gig at [https://www.fiverr.com/share/DyQ7gQ](https://www.fiverr.com/share/DyQ7gQ)