TypeScript – How to Remove Items from Array

An array in TypeScript, once initialized, cannot be resized. The items in an array can be modified but cannot be removed (or added) without creating a new array.

So there are essentially two approaches to remove an item from an array:

  • Setting the element null/undefined without resizing the array.
  • Remove the element and create a new array of remaining elements.

Learn to remove or pop items from an array in TypeScript using pop(), shift(), splice(), filter() and delete operator with examples.

let array: number[] = [0, 1, 2, 3, 4, 5, 6];

//Remove from the end
let removedElement = array.pop();  //[0, 1, 2, 3, 4, 5]

//Remove from the beginning
removedElement = array.shift();  //[1, 2, 3, 4]

//Remove from specified index
let index = array.indexOf(1);
let elementsToRemove = 2;
let removedElementsArray = array.splice(index, elementsToRemove);  //[1, 2]

//Remove from specified index
let itemIndex = array.indexOf(3);
let newArray = array.filter((e, i) => i !== itemIndex);  //[4, 5]

//Delete the value at specified index without resizing the array
delete array[1];   //[3, , 5]

1. TypeScript Arrays

In TypeScript, like JavaScript, Array types are homogenous collections of values. We can define an array in the following ways. First, we can declare and initialize the array in the same line:

let list: number[] = [1, 2, 3];

let list: Array<number> = [1, 2, 3];

let array:number[] = new Array(1, 2, 3);

Or, we can declare an array and populate it later.

let array:number[] = new Array(3)  

for(let i = 0;i<array.length;i++) { 
   array[i] = i + 1
}

2. Remove Item from End using array.pop()

The pop() method removes the last element from an array and returns it. If the array is empty, undefined is returned and the array is not modified.

let removedElement = array.pop();

Let us see an example of removing an item from the end of the array.

let array: number[] = [0, 1, 2, 3, 4, 5, 6];

//Remove from the end
let removedElement = array.pop();  //[0, 1, 2, 3, 4, 5]

console.log(removedElement);   //6
console.log(array);   //[0, 1, 2, 3, 4, 5]

3. Remove Item from Start using array.shift()

The array.shift() method removes an item from the beginning of the array and shifts the existing items to the left. It returns the element that has been removed. If the array is empty, undefined is returned, and the array is not modified.

let removedElement = array.shift();

Let us see an example of shifting the array items.

let array: number[] = [0, 1, 2, 3, 4, 5, 6];

removedElement = array.shift();  //[1, 2, 3, 4, 6]

console.log(removedElement);   //0
console.log(array);   //[1, 2, 3, 4, 5, 6]

4. Removing Items at Specified Index Position using splice()

Sometimes, we will need to remove the items in an array at the specified index position. We can use the array.splice() method for this purpose. To remove an item via its index, first, we need to find the index of the item.

The splice() method returns an array of the elements that have been removed from the array. The syntax of splice() method is:

let removedElementsArray = array.splice(index, countOfElemsToRemove);
  • index − Index at which to start changing the array.
  • countOfElemsToRemove − An integer indicating the number of elements to remove.

In the following example, we are adding new elements from index location 2. Notice that splice() method modifies the original array.

let array: number[] = [0, 1, 2, 3, 4, 5, 6];

let index = array.indexOf(1);
let elementsToRemove = 2;
let removedElementsArray = array.splice(index, elementsToRemove);

console.log(removedElementsArray);   //[1, 2]
console.log(array);   //[0, 3, 4, 5, 6]

5. Removing All Matching Items from Array using filter()

If we want to remove multiple items of the same value from the array, we can use the filter() method. Notice that filter() method does not change the original array, rather it creates a new array of the remaining items.

let array: number[] = [0, 1, 1, 2, 3, 5, 6];

//Remove all elements with value '1'
let itemIndex = array.indexOf(3);
let newArray = array.filter((e, i) => e !== 1); 

console.log(array);   //[0, 1, 1, 2, 3, 5, 6]
console.log(newArray);   //[0, 2, 3, 5, 6]

6. Remove Item without Resizing the Array using delete Operator

It is not recommended, and we should use it carefully. The delete keyword removes the element from the array without changing the length of the array. The array.length remains same before and after the delete operation and thus can produce incorrect results if not used carefully.

let array: number[] = [0, 1, 2, 3, 5, 6];

//Delete the value at specified index without resizing the array
delete array[1];   //[0, , 2, 3, 5, 6] 

console.log(array.length);   //6
console.log(array[1]);  //undefined

We can see the issue during iterating the array as iteration happened only 5 times in the above example. The deleted key in the array is not part of the iteration.

let array: number[] = [0, 1, 2, 3, 5, 6];

delete array[1];   //[0, , 2, 3, 5, 6] 

array.forEach((element, index) => console.log(index));  // 0 2 3 4 5 6

7. Conclusion

This tutorial taught us to remove items from an array in TypeScript. We learned to remove items from the beginning, from the end and from any specified index location. We also learned to delete elements without resizing the array.

Happy Learning !!

Comments

Subscribe
Notify of
guest
0 Comments
Inline Feedbacks
View all comments

About Us

HowToDoInJava provides tutorials and how-to guides on Java and related technologies.

It also shares the best practices, algorithms & solutions and frequently asked interview questions.

Our Blogs

REST API Tutorial

Dark Mode

Dark Mode