JavaScript Basic Array Methods [Article]

Dustin Usey
writes on October 17, 2022

Arrays are used to store a collection of multiple items under a single variable name. This collection could be things like strings, numbers, or even a mix of different data types. Sometimes we need to update or manipulate our arrays by adding or removing items, or combining one array with another. In this guide, I’ll go over just some of the many basic JavaScript array methods. Methods we’ll discuss include: .push() .pop() .shift() .unshift() .indexOf() .toString() .join() & .concat()

I’ll include links to our JavaScript Arrays course as well as MDN docs for each of these methods so you can get an even better understanding.

Treehouse Video – JavaScript Arrays
https://teamtreehouse.com/library/javascript-arrays

MDN – .concat()
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/concat

If you’d like to follow along, you can do so by running these methods in your browser’s console. Let’s get started!

Related Reading: 5 Tips for Javascript Beginners

Contents

1 .length()
2 .push()
3 .pop()
4 .shift()
5 .unshift()
6 .indexOf()
7 .toString()
8 .join()
9 .concat()

.length()

Let’s start off with an easy method; .length(). This method will return the length of an array. To use it, write your array name and then add the method name. In this example, we’ll run users.length in the console:

const users = ['Brandon', 'Keeli', 'Tiffany', 'Steve'];

console.log(users.length);
// returns 4

.push()

Adding an item to an array is easy. Using the .push() method allows us to add a new item to the end of an array. Checkout the example below. We’ll add a new name to our users array.

const users = ['Brandon', 'Keeli', 'Tiffany', 'Steve'];

users.push('Shane');
console.log(users);
// returns ['Brandon', 'Keeli', 'Tiffany', 'Steve', 'Shane']

.pop()

Removing items from an array is also just as easy. Running .pop() on an array will remove the last item of that array. What’s cool about .pop() is that it can also return the item that was removed. Checkout the code snippet below:

const users = ['Brandon', 'Keeli', 'Tiffany', 'Steve'];

users.pop();
console.log(users)
// returns ['Brandon', 'Keeli', 'Tiffani'];

const removedUser = users.pop();
console.log(removedUser);
// returns 'Steve'

.shift()

What if you wanted to remove the first item in your array? That’s where .shift() comes in. Running this method on an array will not only remove the first item of that array, but just like .pop() it returns that item as well:

const users = ['Brandon', 'Keeli', 'Tiffany', 'Steve'];

users.shift();
console.log(users);
// returns ['Keeli', 'Tiffany', 'Steve']

const removedUser = users.shift();
console.log(removedUser);
//returns 'Brandon'

.unshift()

The .unshift() method basically does the opposite of .shift(). Instead of removing an item from the beginning of an array, it adds an item to the beginning. Check this out:

const users = ['Brandon', 'Keeli', 'Tiffany', 'Steve'];

users.unshift('Dustin');
console.log(users)
//returns ['Dustin', 'Brandon', 'Keeli', 'Tiffany', 'Steve']

.indexOf()

Need to find the index of a specific item in your array? You can run .indexOf() on an array with the value of the item you want to know’s index. Let’s say we wanted to know the index of Keeli from our user’s array. Take a look at the code:

const users = ['Brandon', 'Keeli', 'Tiffany', 'Steve'];

console.log(users.indexOf('Keeli');
//returns 1

(since arrays are indexed at 0, "Keeli" is at the 1st index of our array)

.toString()

Ever needed to return all your array items as a string? Easy, just run .toString() on your array like this:

const users = ['Brandon', 'Keeli', 'Tiffany', 'Steve'];

console.log(users.toString());
//returns 'Brandon,Keeli,Tiffany,Steve'

.join()

Sometimes when turning your array items to a string requires a bit more flexibility. In our above example for the .toString() method, you see we get back our array with all the strings with a comma between each array item. If you wanted to format that differently, you could use the.join() method:

const users = ['Brandon', 'Keeli', 'Tiffany', 'Steve'];

console.log(users.join(', '));
//returns 'Brandon, Keeli, Tiffany, Steve'

As you can see, whatever parameter we give our .join() method, will separate the array items when it converts it to a string. Pretty neat!

.concat()

Consider the following two arrays:

const users = ['Brandon', 'Keeli', 'Tiffany', 'Steve'];
const newUsers = ['Yamil', 'Beth', 'Caleb'];

If we wanted to join these two arrays together to create a new array, how could we do this? 🤔 This is where .concat() comes in handy:

const users = ['Brandon', 'Keeli', 'Tiffany', 'Steve'];
const newUsers = ['Yamil', 'Beth', 'Caleb'];

let userList = users.concat(newUsers);
console.log(userList);
//returns ['Brandon', 'Keeli', 'Tiffany', 'Steve', 'Yamil', 'Beth', 'Caleb']

We created a new variable; userList and this holds the returned value of users.concat(newUsers). Which is a list of array items from both arrays.

Also read: JavaScript Array Methods: forEach()

I hope this guide on basic array methods was helpful. Remember, these are just some of the many basic JavaScript array methods. Be sure to refer back to the beginning of this post for a list of all the methods covered in this guide. Below, I’ll link a few more methods if you’re interested in learning even more. Have fun and happy coding! 😃

Treehouse Video – JavaScript Arrays
https://teamtreehouse.com/library/javascript-arrays

MDN – .reverse()
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/reverse

MDN – .sort()
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/sort

MDN – .slice()
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/slice

MDN – .some()
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/some

Want to learn more? Check out the Treehouse 7-day free trial today!

LearnJavaScript Basic Array Methods