Tuesday , 16 July 2019
Home / Programming / JavaScript / Associative Arrays – JavaScript Tutorial
Associative Arrays
Associative Arrays

Associative Arrays – JavaScript Tutorial

This tutorial is part of the JavaScript tutorial series for beginners. To view the whole list of tutorials available and the order in which you should follow them, then click here.

Today’s tutorial comes with a little surprise. Today, we’ll be talking about “associative arrays.” If you’ve programmed before, then you probably know what these are. If you don’t, then don’t worry. I’ll explain it in a bit.

Creating An Associative Array

Clear your script and add this bit of code.

We create a variable named jack and make it into an array. Next, comes the associative part. JavaScript will automatically assign indexes for your values. You can, however, give your values something called keys. Keys are simply human readable names for your values. So, instead of referring or grabbing your elements with numbers, you can use names.

You use the square bracket notation to give your key names and then a string inside for their name.  Add this bit of code into your script.

You should get 19 outputted onto the document. This is what an associative array is! It’s an array with names for indexes instead of numbers. Now, here comes the surprise.

Associative Arrays don’t exist!

Wait! What? Alright, let me explain. Many programming languages have something called associative arrays. They’re pretty much created and used the same way I explained, but in JavaScript specifically, associative arrays don’t exist.

If you’ve programmed before and know what associative arrays are, then you may be confused because they seem like it. Well, let’s try something first. Update the line that outputs onto the document to this.

We all know what this does. It simply outputs the amount of elements inside of an array. If you refresh your page, then you get 0! It should be 3 because we have 3 elements in our array, but this is actually far from the truth.

Arrays are objects. I’ve stated this before, but when you try to create elements this way, you’re actually creating properties. Another way to access and/or create properties is using square bracket notation.So, technically, you’re not creating elements at all. Therefore, the length property will always return 0.


This tutorial may seem confusing especially if you’ve never programmed before. The actual title for this tutorial should be something like “Another way of creating properties in JavaScript.” Associative arrays are so common in programming languages, but JavaScript is a very special language.

About Jasko Koyn

Check Also


Audio – Advanced JavaScript Tutorial

The video and audio objects both have the same events, properties and methods. So, you …

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.