DEV Community

5 Way to Append Item to Array in JavaScript

Samantha Ming on April 29, 2020

Here are 5 ways to add an item to the end of an array. push, splice, and length will mutate the original array. Whereas concat and spread will no...

Read full post

Aleksandr Hovhannisyan • Apr 29 '20

const array = ['🦊'];

array.push('🐴');
array.splice(array.length, 0, '🐴');
array[array.length] = '🐴';

// Result
// ['🦊', '🐴']

What's the point of these two lines?

array.splice(array.length, 0, '🐴');
array[array.length] = '🐴';

Pretty sure array.push('🐴'); already gets the job done.

Luis Augusto • Apr 30 '20 • Edited

I think it is just showing that there are three ways to make a mutative change to an array, each line does the same thing.

array.push('🐴') simply adds to the end of the array
array.splice(array.length, 0, '🐴') removes 0 items from the end of the array, and adds one item
array[array.length] = '🐴' adds an item to a specific position, which in this case is at the end of the array

Samantha Ming • Apr 30 '20

yes, that's what I'm trying to do, thanks for clarifying Luis!

Aleksandr, I see how's that can be confusing...maybe i should fix it up 🤔

Aleksandr Hovhannisyan • Apr 30 '20

Ah, yep, I thought it was all being executed sequentially

Nikola Stojaković • Apr 29 '20

Great article!

Something for beginners (I'm pretty sure you already knew about this):

One hacky way to add an empty item to an array (if we can even call it appending an item to an array, I think more appropriate term would be resizing) would be:

const array = [1, 2];

array.length = 3;

console.log(array); // [1, 2, <1 empty item>]

However you should never ever do this.

Samantha Ming • Apr 29 '20

Yes! Good one, let me add it to my notes 💪 Thanks for sharing 😀

Hammed Oyedele • Apr 30 '20

You can also use it to shrink array

const array = [1, 2]

array.length = 1

console.log(array) // [1]

Samantha Ming • Apr 30 '20

WOOO! never thought of that! Adding to my notes!!! thanks for sharing 😁

John Kazer • Apr 30 '20

The point about not mutating if you need the array elsewhere is a good one, especially for parallel or concurrent programming. Even in single threaded JavaScript you might have passed an array by reference and so mutate things unexpectedly. Generally I find non-mutation to be a more relaxing method!