How to Use the TypeScript Array Splice() Method?

In this tutorial, I will explain the TypeScript Array.splice() method in detail with examples. The splice() method in Typescript is used for manipulating arrays, allowing you to add, remove, or replace elements.

Table of Contents

TypeScript Array Splice() Method

The Array.splice() method in TypeScript is used to change the contents of an array by removing, replacing, or adding elements in place. This method modifies the original array and returns an array containing the deleted elements, if any.

Syntax of Array Splice

The syntax for the splice method is as follows:

array.splice(start: number, deleteCount?: number, ...items: T[]): T[]

start: The index at which to start changing the array.
deleteCount (optional): The number of elements to remove from the array.
items (optional): The elements to add to the array, starting from the start index.

Read Convert an Array to a String in TypeScript

Array Splice() Method Use Cases

Now, let me show you some examples of the array splice() method in TypeScript.

Remove Elements from an Array

One common use case for splice is removing elements from an array. For instance, imagine you have a list of U.S. cities, and you need to remove a specific city:

let cities = ["New York", "Los Angeles", "Chicago", "Houston", "Phoenix"];
cities.splice(2, 1); // Removes "Chicago"
console.log(cities); // ["New York", "Los Angeles", "Houston", "Phoenix"]

In this example, splice(2, 1) starts at index 2 and removes one element.

Here is the exact output in the screenshot below:

Read Convert a String to an Array in TypeScript

Add Elements to an Array

You can also use splice to add new elements to an array. Suppose you want to add “San Francisco” and “Seattle” to the list of cities:

let cities = ["New York", "Los Angeles", "Chicago", "Houston", "Phoenix"];
cities.splice(2, 0, "San Francisco", "Seattle");
console.log(cities); // ["New York", "Los Angeles", "San Francisco", "Seattle", "Chicago", "Houston", "Phoenix"]

Here, splice(2, 0, "San Francisco", "Seattle") starts at index 2, removes zero elements, and inserts the new cities.

You can see the exact output in the screenshot below:

Replace Elements in an Array

The splice method can also replace elements in an array. If you need to update the list by replacing “Houston” with “Dallas”:

let cities = ["New York", "Los Angeles", "Chicago", "Houston", "Phoenix"];
cities.splice(3, 1, "Dallas");
console.log(cities); // ["New York", "Los Angeles", "Chicago", "Dallas", "Phoenix"]

In this case, splice(3, 1, "Dallas") starts at index 3, removes one element, and inserts “Dallas”.

Read Convert a Set to an Array in TypeScript

Array Splice() Method Examples

Now, let me show you some examples related to the splice() method in Typescript.

Manage a List of Students

Consider a scenario where you manage a list of student names and need to update the list based on various events (e.g., new admissions, transfers, and graduations).

let students = ["John Doe", "Jane Smith", "Emily Johnson", "Michael Brown"];

// Adding new students
students.splice(2, 0, "Chris Evans", "Patricia Taylor");
console.log(students); // ["John Doe", "Jane Smith", "Chris Evans", "Patricia Taylor", "Emily Johnson", "Michael Brown"]

// Removing a student
students.splice(1, 1);
console.log(students); // ["John Doe", "Chris Evans", "Patricia Taylor", "Emily Johnson", "Michael Brown"]

// Replacing a student
students.splice(3, 1, "Emma Wilson");
console.log(students); // ["John Doe", "Chris Evans", "Patricia Taylor", "Emma Wilson", "Michael Brown"]

Here is the exact output in the screenshot below:

Read How to Use Join() Method to Combine Array of Strings in TypeScript?

Inventory Management in a Store

Imagine you are managing an inventory system for a store and need to update the list of products.

let inventory = ["Apples", "Bananas", "Oranges", "Grapes", "Strawberries"];

// Adding new products
inventory.splice(3, 0, "Blueberries", "Pineapples");
console.log(inventory); // ["Apples", "Bananas", "Oranges", "Blueberries", "Pineapples", "Grapes", "Strawberries"]

// Removing a product
inventory.splice(1, 1);
console.log(inventory); // ["Apples", "Oranges", "Blueberries", "Pineapples", "Grapes", "Strawberries"]

// Replacing a product
inventory.splice(4, 1, "Mangoes");
console.log(inventory); // ["Apples", "Oranges", "Blueberries", "Pineapples", "Mangoes", "Strawberries"]

Best Practices for Using Splice() Method in TypeScript

Here are the best practices for using the Splice() method in TypeScript.

Avoiding Unintended Modifications

Since splice modifies the original array, it is essential to be cautious to avoid unintended changes. Always ensure you are operating on the correct array and index.

Using Splice in Loops

When using splice inside a loop, it is crucial to adjust the loop index to account for the changes in the array’s length. For example:

let numbers = [1, 2, 3, 4, 5, 6];

for (let i = 0; i < numbers.length; i++) {
  if (numbers[i] % 2 === 0) {
    numbers.splice(i, 1);
    i--; // Adjust the index after removal
  }
}

console.log(numbers); // [1, 3, 5]

Here is the exact output in the screenshot below:

Performance Considerations

While splice is a versatile method, it can be less efficient for large arrays because it involves shifting elements. For performance-critical applications, consider alternative methods or data structures.

Conclusion

The TypeScript Array.splice() method is used for array manipulation. You can effectively add, remove, or replace elements in arrays by understanding its syntax and various use cases. Remember to follow best practices to avoid unintended modifications and performance issues. In this tutorial, I explained how to use the Splice() method of the Typescript array.