Amit Mehta
Indepth JavaScript

Follow

Indepth JavaScript

Follow
How to Easily Add and Remove Any Elements from a JavaScript Array

How to Easily Add and Remove Any Elements from a JavaScript Array

Must Know Array Manipulations

Amit Mehta's photo
Amit Mehta
ยทAug 4, 2022ยท

2 min read

In this post I want to discuss a super useful way to add and remove elements from ANY index in a javaScript array.

You're probably familiar with push, pop, unshift, and shift. They come in handy for sure, if you want to add and remove elements from the beginning or the end of the array.

However, there are a TON of different scenarios where you will need to insert and remove array elements from any position.

This is worth memorizing cold!

Let's start with an array of animals...

const animals = ['๐Ÿ˜บ' , '๐Ÿ™‰' , '๐Ÿงž','๐ŸฆŠ', '๐Ÿฆ', '๐Ÿฏ', '๐Ÿต'];

Wait! There's a genie in the list at index 2. Not sure how that snuck in there ๐Ÿ˜‚. Let's go ahead and remove that array element.

const genieIndex = 2;

animals.splice(genieIndex,1);

console.log(animals);
// => ['๐Ÿ˜บ' , '๐Ÿ™‰' ,'๐ŸฆŠ', '๐Ÿฆ', '๐Ÿฏ', '๐Ÿต'];

splice(index,1) removes the array element located at index. Very simple.

Now ๐Ÿถ is feeling left out, so let's add him into the array at index equal to 2.

Again, we can use the splice array method.

const index = 2;

animals.splice(index, 0,'๐Ÿถ');

console.log(animals);
// => ['๐Ÿ˜บ' , '๐Ÿ™‰' ,'๐Ÿถ','๐ŸฆŠ', '๐Ÿฆ', '๐Ÿฏ', '๐Ÿต'];

splice(index, 0,'๐Ÿถ') inserts the dog emoji at position index.

Now there are definitely more sophisticated array manipulations you can do with splice. However, start by memorizing how to add and remove array elements with splice. You'll thank me later!

Did you find this article valuable?

Support Amit Mehta by becoming a sponsor. Any amount is appreciated!

Learn more about Hashnode Sponsors
ย 
Share this