There are a lot of places online to learn about arrays. I want to take a different approach to showing off the basics of arrays. Let's do a lightning round of JavaScript array functions and visualize how each of them works and what they do!
For each function we'll look at an example animation.
Remember that you can click rerun at the bottom of each of these animations if you want to watch them more than once!
Push
Probably one of the simplest methods, and one you'll see frequently.
The push method appends an item on to the end of an array. An item can be just about anything: numbers, strings, objects, another array.
The size of a JavaScript array increases as you push items on to it. You don't need to do anything ahead of time to push items on to your array, unlike in some other languages like C, where you need to allocate memory for your items.
The push method is what's called an "in place" method. The array is changed "in place", so if you refer to the array again, it will contain your new item. Other methods can return a new array entirely, while leaving the original unchanged.
Pop
You can think of pop as the opposite of push. When you pop from an array, instead of adding something to the end, whatever's already at the end is popped off the array. The item that's popped is also returned from the pop method, so you can store a reference to the item in a variable.
Just like with the push method, this is an in place operation that modifies the original array.
What do you think happens if you pop from an empty array? In JavaScript, at least, the array remains empty and you receive undefined as the return value. In other languages, like Python, this would be an error.
Shift
What if you want to remove something from the beginning instead of the end of your array? Shift to the rescue! Shift acts like pop, but removes and returns the first item of your array instead. Also like pop, shifting from an empty array is going to return undefined.
Unshift
Here we have a method that's a lot like append, but instead of adding to the end of your array, it adds to the front! Everything in the array is moved over to make space for your newest element, so an element that was previously at index zero will now be at index one.
Just as an added bonus, unshift will return the new length of the array after the element is added!
Splice
This is one supercharged method: it's responsible for inserting and removing elements at specific indexes and replacing elements. There are a lot of different ways to use this method.
You can insert or remove 1 or more elements starting at a given index or you can remove everything after an index. The array is changed in place, but splice also returns a new array containing any elements that were deleted.
I hope you enjoyed these animations! Let me know if you'd like to see other JavaScript data structures animated.
Top comments (0)