All posts

Posted 14 November 2024 3 min read

Arrays Explained

Indexed, multidimensional, and associative arrays are one idea wearing three outfits — store something, give it an address, retrieve it later.

javascriptweb-developmentdata-structures

I remember the first time I saw an array and thought — okay, it’s just a list.

And it is. But the way you access that list is what trips most people up.

What Is an Array?

An array is an ordered collection of items. Think of it as a row of boxes, each one holding a value, each one numbered so you can find it again.

JavaScriptconst colours = ["red", "green", "blue"];

That’s it. Three values, stored in order, ready to be accessed.

Indexed Arrays (and the Zero Thing)

Here’s where beginners usually hit their first wall.

Arrays in JavaScript start at zero, not one. So in the example above:

JavaScriptcolours[0] // "red"
colours[1] // "green"
colours[2] // "blue"

The first item is at index 0, not index 1.

It feels backwards at first, but there’s an easy way to remember it: the index isn’t the position, it’s the distance from the start. The first item is zero steps from the beginning.

So if you want the 4th element:

JavaScriptconst numbers = [10, 20, 30, 40, 50];
console.log(numbers[3]); // 40

Fourth element, third index. 4 - 1 = 3. That’s the formula.

Multidimensional Arrays

So far we’ve been working with a flat list — one row of values. But sometimes you need a grid.

A multidimensional array is just an array of arrays. Nothing more complicated than that.

JavaScriptconst grid = [
  [1, 2, 3],
  [4, 5, 6],
  [7, 8, 9],
];

You can think of it as rows and columns — exactly like a spreadsheet or a game map.

Finding the Treasure

Let’s make this concrete. Here’s a 3x3 map with treasure hidden somewhere:

JavaScriptconst map = [
  [1, 2, 3],
  [4, 5, 6],
  [7, "x", 9],
];

To find "x", you need two pieces of information: the row and the column.

Breaking it down:

JavaScript// The rows are:
map[0] // [1, 2, 3]
map[1] // [4, 5, 6]
map[2] // [7, "x", 9]  ← x is in here
 
// Inside row 2:
// index 0 = 7
// index 1 = "x"  ← found it
// index 2 = 9

So to access the treasure:

JavaScriptconsole.log(map[2][1]); // "x"

Row 2, column 1. X marks the spot.

This is the same pattern used in real games to track positions on a board — coordinates, just expressed as array indexes.

Associative Arrays (Objects)

The two types above use numbers as indexes. But what if you want to label your data instead?

That’s what associative arrays are for. In JavaScript, you’ll know these as objects.

Instead of [0], [1], [2] — you get named keys:

JavaScriptconst author = {
  firstName: "Jordan",
  lastName: "O'Hara",
};

To access the values, you use the key name instead of a number:

JavaScriptauthor.firstName        // "Jordan"
author["firstName"]     // "Jordan" — same result, different syntax

Both versions do the same thing. The dot syntax is cleaner for everyday use. The bracket syntax is useful when the key is stored in a variable.

When would you use this over a regular array? When the order doesn’t matter and the label does. A user profile, a config object, a set of settings — anything where you want to look something up by name rather than position.

Putting It Together

Three types, one idea:

• Indexed arrays — ordered list, accessed by number
• Multidimensional arrays — grid of data, accessed by row and column
• Associative arrays — named data, accessed by key

The underlying concept is the same across all three: store something, give it an address, retrieve it when you need it. The only thing that changes is what that address looks like.

Once that clicks, a lot of other things in JavaScript start to make more sense too.

Originally published on Medium .