Student Question – JavaScript Array Usage and How to Accidentally Use it as an Associative Array

Overview

In this article, I cover a question that I got from one my students in a JavaScript course that I teach at Stanford Continuing Studies. Monkey patching lies at the core of JavaScript’s DNA and this question/answer is fundamentally about the positive and negative sides of monkey patching.

The Question

The question that came up was regarding JavaScript’s Array object. It is important to remember that the ancestor of the Array is the Object and that JavaScript only has five primitive data types and one complex data type (i.e. object type).

Question phrased by student

The question that came in from the Lab 6 instructions for my class.

Clarification of Question – Does debugger show what student is claiming?

The debugger confirms the student’s question. Notice:

(1) We are indeed dealing with an Array

(2) But the length of the array is 0

(3) And yet it contains two items – “w1”, and “w2”

The student question is entirely valid – how can we have an array with 0 elements that has two elements in it (i.e. “w1” and “w2”)?

So Array is acting like an associative array not a typical array data structure.

Clarification of question – lab section

The question is about the use of the Array (by virtue of [] initialization). Then the use of the Element id

Answer

Let’s verify – is the Element’s ID a string?

According to MDN, it is. And indeed for this code “w1” and “w2” are the element’s ID.

So what’s going on – part 1

Let’s re-look at MDN’s Array documentation (https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array).

(I highly recommend reading the whole **description). Initially, there is usage information, and then there is the description part which includes a very interesting beginning (the “Arrays are **list-like objects“). Notice the “Some people think…” part. It refers to this article: http://andrewdupont.net/2006/05/18/javascript-associative-arrays-considered-harmful/ (well worth a read too).

So what’s going on – part 2

Here is my description of what’s going on: so we are creating a variable that’s going to reference an Array object. The Array object is a descendent of the JavaScript Object (granddaddy of all objects in JavaScript). So this means that we can add properties to the Array object by using [ ]. In effect, we’re monkey patching the Array object to act as a regular Object (since it really is an Object).

So what’s going on – part 3 – simple code example

Let’s simplify this issue through some simple test code. Notice:

• We’re creating an Array object
• We’re calling it with the dot notation – just like we would access any property on an object.

So what’s going on – part 3 – simple code example

The result is that the Array itself is empty (i.e. there are no index based elements). But the Array object has been monkey patched to have the string1 and string2 properties.

So what’s going on – part 3 – simple code example

Debugger confirms the behavior experienced by the student. There’s an empty array that contains new properties within it.

Lastly…

Should I have used an Array for the lab exercise? Probably not. It would have been better if I had used a plain JavaScript object. This was a neat (and hopefully instructive) catch by one of my students.

Conclusion

My hope is that this article has been useful to learners of JavaScript (besides my students). Sometimes JavaScript feels like you’re running around with a magic wand and sometimes it feels like you’re running around with scissors. Both feelings are the result of JavaScript’s DNA: monkey patching.