JavaScript Basics - Is an Array Really an Object?
Lately, I've been spending a lot of time learning and implementing micro transitions and animations on web components using state machines to manage component state and have recently had an article featured on Hashnode on XState.
I lead a react learning group, we start at the fundamentals, and work our way up through advanced hooks.
In a previous life, I served as a company founder within the NYC food scene, making me accustomed to fast-paced environments that require sharp attention to detail. I understand the importance of a team and communication within that team.
At some point in your JavaScript journey, you'll read, watch, or hear something along the lines of "Arrays are objects!" Then you will most likely move on. At least that's what I did. My thoughts were probably, "What does that even mean? Why did they just gloss over it and move on so quickly? I guess I should too." I was one of the many who moved right along with what ever medium I was using to learn about arrays at that time and I wish I hadn't.
Lets dig in a bit, after all understanding these under-the-hood workings can ultimately make us better programmers. In JavaScript, both objects and arrays are commonly used to store and manipulate data. The fundamental difference lies in their structure and use case.
On one hand, we have objects. They are unordered key-value pairs. Each key refers to a specific value. Here's a simple example of an object:
On the other hand, we have arrays. They are ordered collections of values. Each value corresponds to an index which starts from 0. Take a look at this array example:
They seem very different. But because JavaScript weird (you hear this a lot as well), arrays are actually specialized objects. Let's change your mental modal just a bit, you can imagine using the index values as your "keys", and what ever that key would evaluate to as your "value" Essentially, our personArray could be seen like this under-the-hood:
Can visualize the similarities between objects and arrays yet? Both have keys and values, just an array’s keys are numerical, and the array comes with useful built-in methods and properties like .length, .map(), .filter(), and many more.
The Common Ground
Working with Objects:
When we're working with objects, we access the value by referring to its key. If we want to get the name of our person from our 'person' object, we can use bracket or dot notation.
To update the value, we again use the key:
Working with Arrays:
With arrays, it's a similar action, instead of using our keys, we use numerical indices. If we want to get the name from our 'person', array we use:
To update our Array, we again use the index:
The syntax for accessing and updating values is strikingly similar for both arrays and objects, which supports the fact that arrays in JavaScript are indeed special types of objects with super powers 🦹🏽♂️.
As we reach the end of our exploration, it’s understanding the "object nature" of arrays in JavaScript can open up new perspectives. At first, this concept may seem abstract or unnecessary it enables us to better understand the underpinnings of JavaScript, leading to more efficient code and enabling us to tackle more complex programming challenges.
