Beginner's Guide to Array Methods in JavaScript

JavaScript has a number of helpful array methods integrated into the language. This guide will cover a few of the methods I use the most. It's helpful to note that arrays are JavaScript objects, and can contain a mix of different data types. You can recognize an array in JavaScript by the use of square brackets [ ]

Here is an example of an array with multiple elements:

const myNewArray = [30, 40, true, 'Megan'];

Each element in an array has an index beginning at [0]. In our example above, the element 30 is at myNewArray[0], 40 is at myNewArray[1], and so on. This is very important information when you are working with JavaScript methods. This will become more apparent as we work through the examples. Now, on to the methods!

Array.length()

The length property returns the number of elements in an array. Let's call it on our array:

const myNewArray = [30, 40, true, 'Megan'];

let arrayLength = myNewArray.length;
console.log(arrayLength);

// Output: 4

As you can see the syntax to access the length property is yourArray.length. This property becomes very useful in things like for loops.

Array.push()

The push method adds any number of items to the end of an array. It will return the new length of the array. This is considered a destructive method because it changes the original array. Let's see how it works with an example:

const animals = ['cat', 'dog', 'horse'];

// add 'pig' to the array
animals.push('pig');

console.log(animals);

// Output: ['cat', 'dog', 'horse', 'pig']

Now we have our 'pig' added to the end of the original animals array!

Array.pop()

The pop method removes a single item from the end of an array. Let's say we want to remove the pig from our animals array above. We simply use the following syntax:

animals.pop();

console.log(animals);

// Output: ['cat', 'dog', 'horse']

Our pig is gone. This method, like push, is destructive because it removes the element from our original array. It also returns the removed element.

Array.shift()

The shift method removes the first element of an array. Let's see how it works on our original animals array:

const animals = ['cat', 'dog', 'horse'];

// Remove the first element from the array
animals.shift();

console.log(animals);

// Output: ['dog', 'horse']

The shift method is also destructive because it removes the element from the original array.

Array.unshift()

The unshift method will add any number of items to the beginning of an array. Much like push, this method is destructive and makes changes to the original array. Let's try a new example using the unshift syntax:

const colors = ['blue', 'red', 'green'];

// Add two new colors to the beginning of the array
colors.unshift('purple', 'yellow');

// Output: ['purple', 'yellow', 'blue', 'red', 'green']

We've added our two new colors to the original array! As you can see they've been added in the original order that we passed them in.

Array.slice()

You may be thinking to yourself that all of these destructive methods seem a little, well, destructive! There are array methods that are nondestructive and return a new array that is a copy or a section of the original. Slice is one such method. When passed no arguments, slice will return a new shallow copy of the original array.

const colors = ['blue', 'red', 'green'];

// Make a copy 
const colorsCopy = colors.slice();

console.log(colorsCopy);

// Output: ['blue', 'red', 'green']

This can be a very useful tool for when we don't want to change our original array. Slice can be used to copy a portion of an array when passed additional arguments. Slice takes in a start and an end so that JavaScript knows what portion of the array you'd like to copy. The syntax looks like this:

arr.slice(start, end);

'Start' being the index of the element you want to start the 'copy' from, and 'end' being the index of the last element you want to include. If you do not provide an end, the selection will end at the index of the last array element. For example:

const iceCream = ['chocolate', 'vanilla', 'rocky road', 'mint'];

// Slice only the elements we want to copy to our new array
let newArray = iceCream.slice(1, 3);

console.log(newArray);

// Output: ['vanilla', 'rocky road']

// Remember, our original array will be untouched
console.log(iceCream);

// Output: ['chocolate', 'vanilla', 'rocky road', 'mint']

Array.splice()

The splice method is perhaps the most confusing on this list, but is super useful for adding, updating, or removing elements in an array. It is destructive and does modify the original array. It also returns a new array of the deleted elements (if you did so). Let's take a look at the syntax first:

splice(start, deleteCount, item1, item2...)

• start is the index at which to start changing the array. If your start number is greater than the length of your array, no elements will be deleted. Instead it will add the elements you provide as arguments.
• deleteCount is an optional parameter, and is an integer indicating the number of elements that should be removed.
• item1, item2, etc. are the elements you want added to the array, beginning from start. If you don't add these elements, splice will only remove things from the array.

Although it seems like a lot of information, let's see it in action with our iceCream array:

const iceCream = ['chocolate', 'vanilla', 'rocky road', 'mint'];

// Starting at array index 1 we are deleting one element and then adding a new element
iceCream.splice(1, 1, 'coffee');

console.log(iceCream);

// Output: ['chocolate', 'coffee', 'rocky road', 'mint']

What would happen if we don't delete any elements? We would have the following output!

iceCream.splice(1, 0, 'coffee');

console.log(iceCream);

// Output: ['chocolate', 'coffee', 'vanilla', 'rocky road', 'mint']

As you can see nothing has been deleted, but 'coffee' has been inserted where our start indicated.

As you can see, array methods are crucial to any programmer's skillset. JavaScript has many more built-in methods, a list of which can be found on MDN's Web Docs:
MDN's Array Information

Let me know in the comments below if there are more array methods you'd like explained!