Remove Element(s) from an Array in TypeScript

avatar

Borislav Hadzhiev

Last updated: Jul 25, 2022

banner

Photo from Unsplash

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);

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

  1. the start index - the index at which to start changing the array
  2. the delete count - how many elements we want to remove from the array, from the start index onwards
We explicitly check that the indexOf method does not 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 #

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);

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 there is no object that 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).

Remove the Last element from an Array #

Use the pop() method to remove the last element from an array, e.g. arr.pop(). The pop method removes and returns the last element from an array and changes the array's length. If called on an empty array, the pop method returns undefined.

index.ts
const arr: string[] = ['one', 'two', 'three']; const removed = arr.pop(); console.log(removed); // 👉️ 'three' // 👇️ ['one', 'two'] console.log(arr);

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(). The method removes and returns the first element from an array and changes the array's length. When called on an empty array the shift method returns undefined.

index.ts
const arr: string[] = ['one', 'two', 'three']; const removed = arr.shift(); console.log(removed); // 👉️ 'one' // 👇️ ['two', 'three'] console.log(arr);

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 out elements from an array that satisfy a condition. The filter method creates and returns a new array containing only the elements that satisfy the condition implemented by the provided to filter callback function.

index.ts
const arr: string[] = ['one', 'two', 'two', 'three']; const newArr: string[] = arr.filter((element) => { return element !== 'two'; }); // 👇️ ['one', 'three'] console.log(newArr);

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[] = ['one', 'two', 'three']; delete arr[1]; console.log(arr); // 👉️ ['one', , 'three'] console.log(arr.length); // 👉️ 3

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

Even after we deleted 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.

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.