How do I Remove an Array Item in TypeScript?

In this article, we will learn about the different ways of removing an item from an array in TypeScript. In TypeScript, an array can be defined using union typing if it contains items of different types.

We can use the following methods to remove items from a TypeScript array:

Using the splice() method

The splice method can be used to delete multiple elements by specifying the start index from where the deletion of the element will start and the number of elements to be deleted as parameters to it. This method will return the removed elements.

Syntax:

const remItems = array.splice(startIndex, numberOfElementsToBeDeleted);

Example: The below code example will explain the use of the splice() method to delete elements from a TypeScript array.

const testingArr: (number | string)[] =
    ["JavaScript", 1, "GeeksforGeeks", 2, "TypeScript"];

console.log(`Initial Array: ${testingArr}`);
// Using the splice() method
const remItem = testingArr.splice(3, 2);
console.log(`Removed Items: ${remItem}`)
console.log(`Array After removing item: ${testingArr}`);

Output:

Initial Array: JavaScript, 1, GeeksforGeeks, 2, TypeScript
Removed Items: 2, TypeScript
Array After removing item: JavaScript, 1, GeeksforGeeks

Using the shift() method

The shift() method is used to remove the item from the start of an array and it returns the removed item as result. It requires no parameters.

Syntax:

const remItem = array.shift();

Example: The below example will explain the use of the shift() method to remove element from TypeScript array.

const testingArr: (number | string)[] =
    ["JavaScript", 1, "GeeksforGeeks", 2, "TypeScript"];

console.log(`Initial Array: ${testingArr}`);
// Using the shift() method
const remItem = testingArr.shift();
console.log(`Removed Item: ${remItem}`)
console.log(`Array After removing item: ${testingArr}`);

Output:

Initial Array: JavaScript, 1, GeeksforGeeks, 2, TypeScript
Removed Item: JavaScript
Array After removing item: 1, GeeksforGeeks, 2, TypeScript

Using the pop() method

The pop() method will delete the last element of the array without passing any parameter. It returns the removed element as a result.

Syntax:

const remItem = array.pop();

Example: The below example will explain the use of the pop() method to delete element from an array.

const testingArr: (number | string)[] =
    ["JavaScript", 1, "GeeksforGeeks", 2, "TypeScript"];

console.log(`Initial Array: ${testingArr}`);

// Using the pop() method
const remItem = testingArr.pop();
console.log(`Removed Item: ${remItem}`)
console.log(`Array After removing item: ${testingArr}`);

Output:

Initial Array: JavaScript, 1, GeeksforGeeks, 2, TypeScript
Removed Item: TypeScript
Array After removing item: JavaScript, 1, GeeksforGeeks, 2

Using filter() method

The filter() method filter the array based on the condition of the passed callback function. It returns a new array with new length and new elements.

Syntax:

const newArr = array.filter(() => {});

Example: The below code implements the filter() method to remove element at 4th index from the TypeScript array.

const testingArr: (number | string)[] =
    ["JavaScript", 1, "GeeksforGeeks", 2, "TypeScript"];

console.log(`Initial Array: ${testingArr}`);
// Using the fiter() method
const newArr = testingArr.filter((ele, ind) => ind !== 4);
console.log(`Removed Item: ${testingArr[4]}`);
console.log(`Array After removing item: ${newArr}`);

Output:

Initial Array: JavaScript, 1, GeeksforGeeks, 2, TypeScript
Removed Item: TypeScriptArray 
After removing item: JavaScript, 1, GeeksforGeeks, 2

Using the delete operator

The delete operator can also be used to delete the array items in TypeScript.

Syntax:

delete array_name[deletingItemIndex];

Example: The below example explain the use of the delete operator to remove the item from an array in TypeScript.

const testingArr: (number | string)[] =
    ["JavaScript", 1, "GeeksforGeeks", 2, "TypeScript"];

console.log(`Initial Array: ${testingArr}`);
// Using delete operator
console.log(`Removed Item: ${testingArr[0]}`);
delete testingArr[0];
console.log(`Array After removing item: ${testingArr}`);

Output:

Initial Array: JavaScript, 1, GeeksforGeeks, 2, TypeScript
Removed Item: JavaScript
Array After removing item: , 1, GeeksforGeeks, 2, TypeScript

Using the slice() method

The slice() method can be utilized to remove an item from an array by creating a new array without the item to be removed. This method is useful when you want to keep the original array intact and obtain a modified array without modifying the original one.

Syntax:

const newArray = [...array.slice(0, indexToRemove), ...array.slice(indexToRemove + 1)];

Example: The following code demonstrates the use of the slice() method to remove an item from a TypeScript array.

const testingArr: (number | string)[] = ["JavaScript", 1, "GeeksforGeeks", 2,
    "TypeScript"];

console.log(`Initial Array: ${testingArr}`);
// Using the slice() method
const indexToRemove = 3;
const newArray = [...testingArr.slice(0, indexToRemove), ...testingArr.slice(
    indexToRemove + 1)];
const removedItem = testingArr[indexToRemove];
console.log(`Removed Item: ${removedItem}`);
console.log(`Array After removing item: ${newArray}`);

Output:

"Initial Array: JavaScript,1,GeeksforGeeks,2,TypeScript" 
"Removed Item: 2" 
"Array After removing item: JavaScript,1,GeeksforGeeks,TypeScript" 

Using the reduce() Method

Another approach to remove an item from an array in TypeScript is by using the reduce() method. This method processes the array elements and builds a new array by accumulating values that meet a specific condition.

Example: Below is an example demonstrating how to use the reduce() method to remove an item from an array based on a specific condition.

const initialArray = ["JavaScript", 1, "GeeksforGeeks", 2, "TypeScript"];
const indexToRemove = 3;
const newArray = initialArray.reduce((acc, item, index) => {
  if (index !== indexToRemove) {
    acc.push(item);
  }
  return acc;
}, []);
console.log("Initial Array:", initialArray);
console.log("Array After removing item:", newArray);

Output:

Initial Array: [ 'JavaScript', 1, 'GeeksforGeeks', 2, 'TypeScript' ]
Array After removing item: [ 'JavaScript', 1, 'GeeksforGeeks', 'TypeScript' ]