What are arrays? What are objects? How are they different? And why are they both so useful?
Basic Overview + Syntax
Both arrays and objects share a common purpose — to reference and structure data. We’ll dive deeper into this later. For now, here’s the basic difference between object syntax and array syntax:
Objects use { } brackets to define data, and must include “keys” that reference specific data values.
Each “key/value” pair within an object must be separated by a comma.
Arrays, on the other hand, use [ ] brackets to define data, and do not require a corresponding “key” for each data value. Instead, each data value will have a corresponding, numerical “index” value (more on this later).
Arrays do still require commas between each piece of data. And, as you can see in the examples included above, both objects and arrays can be referenced using variables. If we were to log either myObject or myArray to our console, we would print the entire object or array referenced by each variable. This proves extremely helpful when referencing objects and arrays within functions, as we can simply include the variable name within our functions to access our entire object or array, rather than writing the entire thing again.
While the above examples only use strings and numbers as datatypes, objects and arrays can contain an immense variety of datatypes, including other objects and arrays.
Arrays are Objects
A brief point of clarification before we go any further: arrays actually are objects. They’re just a certain, special type of object. Understanding this is crucial to understanding what JavaScript is and how JavaScript works, and can help with debugging. For example, if you run the typeof operation on an array, it will return the datatype “object”. For those unfamiliar with typeof, the typeof operation takes an input and returns the datatype of that input. Here’s an example of typeof’s syntax, and how it can be used in a function:
This important distinction — that arrays actually are objects — has far reaching implications. For example, imagine you want to iterate through a database to differentiate between data contained within arrays and data contained within objects. If you tried to differentiate between the two using something like the typeof operator, you’d end up running into problems, because both objects and arrays are actually, technically, objects.
Don’t let this naming ambiguity bog you down too much if it’s not quite clicking yet. While arrays technically are objects, by and large we’ll use the term “object” to refer to data structures defined by { } and key value pairings and “array” to refer to data structures defined by [ ] and index value pairings.
Objects: Key — Value Pairs
Data within objects is stored in “key-value pairs”. Keys are similar to variables in a lot of ways — they are typically camelCased words or phrases that we can call upon to access the values they reference. In our example object we’ve created below, the key leafyFood is used to reference the value “cabbage”, which is a string containing the word cabbage.
Keys can also come in a “non-standard” form, which means instead of being camelCased, they actually contain multiple words that are separated by spaces. Non-standard keys must be entered as strings.
(Note: non-standard keys cannot be entered using backticks — ` `. They must be entered using either single or double quotes — ‘ ’ or “ ”. For anybody dead set on trying to only use backticks to define strings, this is a good reason not to. You’ll also run into problems if you try to use backticks in React without including them in { } within JSX. But, that’s a topic for another time.)
Ex: Non-Standard Key.
In fact, all keys are read as strings by JavaScript. Understanding this is crucial to effectively accessing the values stored within each key.
Accessing Key Values
There are two ways to access values stored within keys with an object: “.” notation, also known as “dot” notation, and “[ ]” notation, also known as “bracket” notation. Here is the syntax for using both types of notation:
You’ll notice that both methods effectively return the value associated with leafyFood — “cabbage” — but that bracket notation required us to pass leafyFood as a string, while dot notation only required that we write out the key name as it appears in our object. Note that we cannot pass a key as a string when using dot notation — it must be written out as it was originally written in our object. This means that we cannot access non-standard keys using dot notation.
While this difference may seem like an inconvenience at first, it actually proves immensely valuable in the long run. Basically, bracket notation allows us to use strings to access key values, which means we can use bracket notation to handle instances when we want to pass keys as arguments in a function:
In this example, we’ve created a function “printKeyValue” that takes a single parameter and passes that parameter as a key for myObject in order to print the value associated with that key to the console.
Because each key in our object is not actually a variable (while similar in function, keys and variables are different things, and are treated differently by JavaScript), we have to pass our argument to our function as a string — trying to pass leafyFood as it appears in myObject to our function would throw an error.
If we were to try to use dot notation within our function to access the value, we’d end up getting an error, since any parameter we would pass in would take the form of a string, and dot notation is incompatible with strings.
Bracket notation, however, allows us to effectively handle string versions of our keys. That means we can effectively take in each string argument and use it to access the correct value within our object. This proves even more helpful when we move onto more advanced functionality like iteration and recursion.
Arrays: Index — Value Pairs
Arrays use a different method for referencing + organizing data. Instead of containing different named “keys” that correspond to certain data, each piece of data within an array — (also known as an “element”) — has its own numerical index value, which is determined by its position within an array. It’s important to note that index values start at zero. This means that the first element within an array always has an index value of zero. The second element would have an index value of one, the third and index value of two, and so on and so forth.
JavaScript reads from left to right and top to bottom. For arrays written in a horizontal fashion, the leftmost element is always the first element in the array. For arrays written in a horizontal fashion, the top most element is always the first element in the array.
If we were to write an array that was both horizontal and vertical, JavaScript would read the uppermost line from left to right before moving on to the next row. This means that all elements written in an upper row will have index values that are less than any element in lower rows, even if those elements in lower rows are further to the left.
(Remember, JavaScript reads left to right and top to bottom. That means starting with the first row, reading left -> right, moving on to the second row, reading left -> right, moving on to the third row, etc.)
In both of these examples, ‘cabbage’ would have an index value of zero, 3 would have an index value of one, ‘unicorn’ would have an index value of two, and 894 would have an index value of three.
Accessing Index-Value Pairs
Accessing the value associated with an index in an Array has only one notation — “[ ]”, or “bracket” notation. For example:
Indexes are always numerical values, so we can only use numbers to access values associated with indexes within an array. We can, however, pass numerical values as strings to access values within our array:
This is possible because arrays are technically object, which means that indexes are actually technically keys, which can be passed to objects as strings using bracket notation. In fact, JavaScript converts all numerical values to strings when evaluating them as array indexes. However, to cement the difference between objects and arrays in your mind, it’s helpful to think of arrays indexes as numbers specifically, which means we can only access values within an array using numerical values (whether or not we want to pass them as strings or numbers).
Conclusion
I hope this has been helpful! If some of these concepts aren’t quite sticking yet don’t panic. Try playing around with objects and arrays using your own functions, examples to hammer down to concepts. Who knows! You might learn some valuable new piece of information that you can share with other developers to help them along in their development journey. Happy coding! Build something great.
— — — — — — — — — — — — — — — — — — — — — — — — — — — — — — —
(This blog is an ongoing repository of knowledge, and is regularly updated. When I learn something new about arrays and/or objects, or I find a better way to phrase a concept, I update this blog with new information and/or phrasing. My goal is to create a comprehensive resource for developers that covers all the important aspects of objects and arrays.)
