Once they understand arrays, many developers ask the obvious follow-up question: what about nested or associative arrays? How do we make those in JavaScript?

To review: a basic array contains elements, separated by commas:

var arr = [ "balloon", 15, "red" ];

To get the value of any one member of the array, we reference its index, i.e. its position in the array, with the first “slot” starting at index 0:

console.log(arr[2]);
> "red"

An associative array indexes elements differently; usually with a word for each slot, making it far more structured and readable. Unfortunately, JavaScript doesn’t have associative arrays, at least not directly: instead, it has “object literals”:

var myObj = { a : 'blue', b: 21, c: 3 };

This creates a new object with properties; in this case, the properties are named a, b and c. Each property - also referred to as a key in this context - has a value.

We can reference the property of an object to determine its value in the exact same way we did an element in an array, substituting the name of the key, rather than using a numbered index:

console.log(myObj["a"]);
> "blue"

Alternatively, we could use dot notation to yeild the same result:

console.log(myObj.a);
> "blue"

Nesting

Making a “deep” associative array in JavaScript is therefore a case of nesting object literals. Let’s say we wanted to categorize a series of people by shared qualities: height in centimetres, eye color, etc. We’ll call the first two people in this group “Alice” and “Bob”.

Like Bob, Alice’s stats would represented by an object literal, with defined keys:

    {   height: 183,
        eyecolor: 'hazel'
    }

This would, in turn, be part of another object literal, called users, and placed under the key of “Alice”:

var users = {
    Alice: {    
                height: 183,
                eyecolor: 'hazel'
            }
    }

Adding Bob:

var users = {
    Alice: {    
                height: 183,
                eyecolor: 'hazel'
            },
    Bob:    { 
                height: 172,
                eyecolor: 'blue'
            }
}

Referencing Alice in the console:

users.Alice
> Object {height: 183, eyecolor: "hazel"}

Referencing the color of Bob’s eyes:

users.Bob.eyecolor
> "blue"

Alternatively, we could place the names as part of the data of each object, and reference those objects as elements in an array:

var users = [
    		 {    name: 'Alice',
                height: 183,
                eyecolor: 'hazel'
            },
            {
            	   name: 'Bob', 
                height: 172,
                eyecolor: 'blue'
            }
]

Finding the first user, via the console:

users[0]
> Object {name: "Alice", height: 183, eyecolor: "hazel"}

Finding the height of the first user:

users[0].height
> 183

Object literals are very closely associated with JSON, a format I’ll be looking at next.

Photograph by O palsson, licensed under Creative Commons

Enjoy this piece? I invite you to follow me at twitter.com/dudleystorey to learn more.