Remove Element(s) from an Array in TypeScript

avatar
Borislav Hadzhiev

Last updated: Feb 26, 2024
4 min

banner

# Table of Contents

  1. Remove Element(s) from an Array in TypeScript
  2. Remove an Object from an Array in TypeScript
  3. Remove the Last element from an Array
  4. Remove the First element from an Array
  5. Filter out Elements from Array that don't satisfy a condition
  6. Never use the Delete Operator with Arrays

# Remove Element(s) from an Array in TypeScript

Use the splice() method to remove elements from an array, e.g. arr.splice(1, 2).

The splice method changes the contents of the original array by removing, replacing or adding new elements and returns an array containing the removed elements.

index.ts
const arr: string[] = ['one', 'two', 'three', 'four']; const index = arr.indexOf('two'); console.log(index); // ๐Ÿ‘‰๏ธ 1 if (index !== -1) { arr.splice(index, 1); } // ๐Ÿ‘‡๏ธ ['one', 'three', 'four'] console.log(arr);

remove elements from array in typescript

The code for this article is available on GitHub

The arguments we passed to the Array.splice method are:

  1. Start index - the index at which to start changing the array.
  2. Delete count - how many elements we want to remove from the array from the start index onwards.
We explicitly check that the indexOf method doesn't return -1 because if the passed-in value is not contained in the array, the indexOf method returns -1.

Here's the same example, but using named variables to make things a bit more readable.

index.ts
const arr: string[] = ['one', 'two', 'three', 'four']; const startIndex = arr.indexOf('two'); const deleteCount = 1; if (startIndex !== -1) { arr.splice(startIndex, deleteCount); } // ๐Ÿ‘‡๏ธ ['one', 'three', 'four'] console.log(arr);

The splice method changes the contents of the original array and returns an array containing the removed elements.

# Remove an Object from an Array in TypeScript

If you need to remove an object from a TypeScript array:

  1. Use the findIndex() method to get the index of the object.
  2. Use the splice() method to remove the object from the array.
  3. The splice method will remove the object from the array and will return the removed object.
index.ts
const arr: { id: number }[] = [{ id: 1 }, { id: 4 }, { id: 8 }]; const indexOfObject = arr.findIndex((object) => { return object.id === 4; }); console.log(indexOfObject); // ๐Ÿ‘‰๏ธ 1 if (indexOfObject !== -1) { arr.splice(indexOfObject, 1); } // ๐Ÿ‘‡๏ธ [{id: 1}, {id: 8}] console.log(arr);

remove object from array in typescript

The code for this article is available on GitHub

The function we passed to the Array.findIndex method gets called with each object in the array.

On each iteration, we check if the id property of the object has a value equal to 4. If it does, we return true and get the index of the matching object.

If no object satisfies the condition, the findIndex method returns -1.

This is why we explicitly check if a matching object was found before removing it.

Like in the last example, the second parameter we passed to the splice() method is the delete count (how many elements to remove from the array starting at the provided index).

I've also written a guide on how to add elements to an array in TypeScript.

# Remove the Last element from an Array

Use the pop() method to remove the last element from an array, e.g. arr.pop().

index.ts
const arr: string[] = ['bobby', 'hadz', 'com']; const removed = arr.pop(); console.log(removed); // ๐Ÿ‘‰๏ธ 'com' // ๐Ÿ‘‡๏ธ ['bobby', 'hadz'] console.log(arr);

remove last element from array

The code for this article is available on GitHub

The Array.pop method takes no arguments and removes and returns the last element from an array.

# Remove the First element from an Array

Use the shift() method to remove the first element from an array, e.g. arr.shift().

index.ts
const arr: string[] = ['bobby', 'hadz', 'com']; const removed = arr.shift(); console.log(removed); // ๐Ÿ‘‰๏ธ 'bobby' // ๐Ÿ‘‡๏ธ ['hadz', 'com'] console.log(arr);

remove first element from array

The Array.shift method is very similar to Array.pop, however, it applies to the first element of the array.

# Filter out Elements from Array that don't satisfy a condition

Use the filter() method to filter a TypeScript array condition.

index.ts
const arr: string[] = ['bobby', 'hadz', 'hadz', 'com']; const newArr: string[] = arr.filter((element) => { return element !== 'hadz'; }); // ๐Ÿ‘‡๏ธ [ 'bobby', 'com' ] console.log(newArr);

filter out elements from array that dont meet condition

The code for this article is available on GitHub

The function we passed to the Array.filter method gets called with each element in the array.

If the function returns a truthy value, the array element gets added to the returned array.

The filter method does not change the contents of the original array, instead it returns a new array.

The filter method is useful when you only need the elements from an array that satisfy a specific condition, e.g. get only the odd numbers from an array that contains both odd and even numbers.

# Never use the Delete Operator with Arrays

The delete operator is used to remove a property from an object, however, you might see developers using it with arrays.

index.ts
const arr: string[] = ['bobby', 'hadz', 'com']; delete arr[1]; console.log(arr); // ๐Ÿ‘‰๏ธ ['bobby', , 'com'] console.log(arr.length); // ๐Ÿ‘‰๏ธ 3
The code for this article is available on GitHub

The delete operator removes the array element, however, it doesn't update the length of the array.

Even after we delete an element, the length of the array continues to be 3. This is the case even if you delete the last element in an array.

If you see the delete operator used on an array, they really meant to use the splice method instead.

# Additional Resources

You can learn more about the related topics by checking out the following tutorials:

I wrote a book in which I share everything I know about how to become a better, more efficient programmer.
book cover
You can use the search field on my Home Page to filter through all of my articles.

Copyright ยฉ 2024 Borislav Hadzhiev