A new perspective towards arrays

I love it when my comprehension of something I already knew about and fully understood is challenged and I see the said object in a new and/or different perspective. 😀

One night last week, while working on my PHP assignments for class, I reached the part where the author introduced arrays. As a quick refresher, arrays are though things that can contain multiple items in one variable. To illustrate, here is the (literal, not constructor) syntax for creating arrays in JavaScript:

var myArray = [item, item, item...];

(Note: from here on out, all code will be in the context of JavaScript unless stated otherwise.)

Ever since I discovered programming and grasped the concept of arrays, I always perceived them as “flat”, meaning they only have one dimension. By comparison, an object is a multidimensional… object. I am not sure how I gained that perspective, but I have. It could come from the fact an array is quite similar to a TODO or grocery list.

An example array in the form of a TODO list

  1. Get sleep
  2. Wake up
  3. Eat breakfast
  4. Finish all remaining homework
  5. ???
  6. Update HTML Skeleton for Splitview
  7. Figure out what to do after finishing homework
  8. Celebrate! 😀

This visualization works and is a correct way of understanding arrays, do not think I am saying otherwise. However, there is another way of visualizing arrays, the one I am about to tell you.

As I already said, I was doing my PHP homework, typing in the code I needed, when I came across the following lines:

foreach($array as $key => $value) {
  echo "The value at $key is $value";

This code is nothing special, it is simply a foreach loop. Such loops are also possible in JavaScript. I have used them plenty of times myself.

myArray.forEach(function(value, index) {
  echo "The value at " + index + " is " + value;

For all I can figure, it was the author’s use of $key and $value for variable name that got me thinking. Traditionally, these names are reserved for when you are iterating over an object’s key-value pairs. Using these same names to iterate over an array though… that had me stumped.

After thinking it over, I suddenly saw arrays in a new perspective. Arrays are not that much different from objects as I had thought. Instead, arrays are like a shorthand version of an object, complete with key-value pairs!

Just like with objects, which contain a unique key or keys, each with their own value, so arrays work the same way. The difference between the two is that arrays can only have integers as keys, whereas objects can have integers, strings, or variables.[1] With objects, you must explicitly define your keys, even if you plan on using integers, where as arrays implicitly define and use integer keys. If am being confusing, maybe this short code snippet will help (and you can always comment asking for clarification if need be 😉 ).

// An object that uses integers keys.
// I know, `data` is a great variable name. :P
var data = {
  1: "hi",
  2: true,
  3: 42

// The same object as above, but this time stored in an array,
// which is more compact than the object.
// However, both act and function the same way.
var dataArray = ["hi", true, 42];

Well that was a fun lesson my textbook was not even trying to teach. Larry Ullman, thank you for using those variable names in your example. You have just helped this programmer see a commonly used and key part of any programming language in a brand new way. 😀