Understanding Javascript arrays

This will undoubtedly be the one of the most boring JS tutorials I have to offer. But it is a critical one.

If this is your first time looking at JS and you’re curious about what it or jQuery could add to your website, check out my Introduction for Webmasters.

What is an array?

An array is simply a comma-separated list of items. It can be a list of strings (text) or integers (numbers). It looks like this:

var allMyCats = ["Kitty", "Puff", "Chowder", "Benji", "Chaos", "Jelly", "Peanut", "Butter", "Espresso", "Cappuccino", "Pickles", "Cricket"];
Code language: JavaScript (javascript)

When you’re working with a simple set of data in Javascript, most of the time, you’ll want to create an array.

For example, in my Magnetic Poetry Maker, all of the words in the “word bank” are just arrays of words that I put together and am displaying on the screen.

Something important to note is that arrays are usually accessed by index. That means every item in an array is automatically assigned a number. The first item is always zero. You will probably forget this (like I did a bunch of times) and stump yourself at a simple math problem that just isn’t adding up.

For example, in the allMyCats array above, the entry “Chowder” is actually considered 2, even though it’s the third item. Keep this in mind as it will be important later!

Accessing array values

The easiest way to access a value in an array is to reference it by index, like so:

var allMyCats = ["Kitty", "Puff", "Chowder", "Benji", "Chaos", "Jelly", "Peanut", "Butter", "Espresso", "Cappuccino", "Pickles", "Cricket"]; console.log(allMyCats[0]); // returns "Kitty" console.log(allMyCats[8]) // returns "Espresso"
Code language: JavaScript (javascript)

You can also use [-1] to access the last item in an array:

var allMyCats = ["Kitty", "Puff", "Chowder", "Benji", "Chaos", "Jelly", "Peanut", "Butter", "Espresso", "Cappuccino", "Pickles", "Cricket"]; console.log(allMyCats[-1]); // returns "Cricket"
Code language: JavaScript (javascript)

Manipulating Arrays

Part of the ‘magic’ in JS is learning how to manipulate an array. The best and only way to do this is by following a guide and playing around with it in a CodePen.

Working with arrays is usually done through array methods.

For example, you can add a new item to an existing array with the push() method, like so:

var allMyCats = ["Kitty", "Puff", "Chowder", "Benji", "Chaos", "Jelly", "Peanut", "Butter", "Espresso", "Cappuccino", "Pickles", "Cricket"]; allMyCats.push("Milkshake");
Code language: JavaScript (javascript)

We’re going to explain a little how this works below.

Here is a quick description of the array methods we’re going to go over in this guide, and what they do:

MethodDescription
push()adds item to array
pop()removes last item from array
indexOf()alphabetizes array
splice()permanently removes item from array
includes()check if array includes particular value

I’m gonna walk through using each of these, and then include a fuller list of array methods at the bottom for you to try out on your own.

But since this is basically my first in-depth JS tutorial, I need to take a moment to profess my love for console.log().

console.log()

I am not being dramatic when I say I would be nowhere without console.log().

It’s essentially how I debug code. This little statement will tell you exactly what you’re doing wrong – if you know how to use it.

I use console.log() for mainly logging the content of variables. If something isn’t working the way I expect, I add a console.log() statement just to make sure it’s actually grabbing what I want it to grab.

The output is always in a Javascript console, which can be easily viewed in CodePen or by pressing CTRL+SHIFT+I and clicking on the Console tab.

Let’s do a quick example with the push() statement I talked about earlier. I’m going to log every step of the way:

var allMyCats = ["Kitty", "Puff", "Chowder", "Benji", "Chaos", "Jelly", "Peanut", "Butter", "Espresso", "Cappuccino", "Pickles", "Cricket"]; console.log('Before push: ' + allMyCats); allMyCats.push("Milkshake"); console.log('After push: ' + allMyCats);
Code language: JavaScript (javascript)

See the Pen JS Only by Sadness (@sadness97) on CodePen.

In the above CodePen, you must open it in a new window (click Edit on CodePen) and then click on the Console button at the bottom left of the screen.

Since JS code runs all at once by default, it’s hard to keep track of how everything runs, especially at first when you’re still learning everything. console.log() takes a lot of the guesswork out about what is going wrong.

pop()

We saw push() in the last example, so let’s take a look at how pop() would work:

var allMyCats = ["Kitty", "Puff", "Chowder", "Benji", "Chaos", "Jelly", "Peanut", "Butter", "Espresso", "Cappuccino", "Pickles", "Cricket", "Milkshake"]; console.log('Before pop: ' + allMyCats); allMyCats.pop(); console.log('After pop: ' + allMyCats);
Code language: JavaScript (javascript)

Take note of how, in order to see the change, we must call the original variable again. The variable has been changed, even though its name stayed the same.

This method could be used in response to a button click, in order to remove something from a list. But these kind of arrays alone are only good for using within larger pieces of code. For changing what you can see on a website, you need to use DOM Manipulation, which I also intend on writing about in the future.

length

This one has no () at the end! But it’s very useful because it will give you a number that represents how many items are in the array. This one doesn’t count the zeroeth value.

var allMyCats = ["Kitty", "Puff", "Chowder", "Benji", "Chaos", "Jelly", "Peanut", "Butter", "Espresso", "Cappuccino", "Pickles", "Cricket", "Milkshake"]; console.log(allMyCats.length) // returns: 13
Code language: JavaScript (javascript)

indexOf()

Remember how I mentioned that every array item has an index? Sometimes, you need the index of the array item to do something else (coming up…) so here’s an easy way to grab it, if you only have the name of the item you want to grab:

var allMyCats = ["Kitty", "Puff", "Chowder", "Benji", "Chaos", "Jelly", "Peanut", "Butter", "Espresso", "Cappuccino", "Pickles", "Cricket", "Milkshake"]; console.log(indexOf("Jelly"); // returns: 5
Code language: JavaScript (javascript)

.splice()

Splicing an array just basically means removing a specific item from it. It looks like this:

array.splice(beginAtindex, numberOfItems)
Code language: JavaScript (javascript)

If you only want to remove one item, the numberOfItems will always be 1.

Let’s remove a single item from the array:

var allMyCats = ["Kitty", "Puff", "Chowder", "Benji", "Chaos", "Jelly", "Peanut", "Butter", "Espresso", "Cappuccino", "Pickles", "Cricket", "Milkshake"]; allMyCats.splice(3, 1); // removes "Benji"
Code language: JavaScript (javascript)

includes()

Unlike the other array methods we’ve looked at, this one only returns true or false. If the array includes the item, it returns true. If not, it returns false.

var allMyCats = ["Kitty", "Puff", "Chowder", "Benji", "Chaos", "Jelly", "Peanut", "Butter", "Espresso", "Cappuccino", "Pickles", "Cricket", "Milkshake"]; var includes = allMyCats.includes("Chaos"); console.log('Includes? ' + includes); // returns "Includes? True"
Code language: JavaScript (javascript)

It might be useful in some projects to check if an item exists in an array already, perhaps so as to avoid duplicates.

More to look at

These are only a few array methods. There are way more that could be useful! Try to look up the following array methods to get a feel for using them:

  • shift() / unshift()
  • slice()
  • join()
  • sort()



Hey, thanks for reading! If you have any questions, you can leave me a comment and I always try to reply.

If you have any suggestions on how I can improve this article, please let me know!

This website is not monetized in any way. It purely exists to help others on their web-building journey. However, if you have the means to donate toward my server costs, I have a ko-fi account where I accept tips.

Leave a Comment