It was lunch break in my college, me and my friend were having tea looking at the rain outside the cafeteria window. That was when he asked me, 'Do you know that JS doesn't have array?'. I was shocked. It had been a few weeks now since I started learning Javascript and make few small projects.
'What nonsense?!', I replied remembering all the JS Array methods I had just memorized few days back.
He threw another question at me, 'Have you ever tried to find out what is the type of an array in JS?'. I was confused and nodded my head saying 'no'. He asked me to go home and have a look at it.
Rushing, after the college ended, I came home, threw my bag on the couch, sat down, turned on my computer, opened my chrome console and type this in the REPL, typeof [] . What did it print?
Object!!!
What the hell? My jaw dropped. I had questions, 'why?', 'how?'....
That night, I couldn't go to sleep before unraveling this fact and understanding what exactly array in JS is under the hood. After hours of searching and surfing, this is what I found:
Arrays don't really exist in Javascript
Yes, arrays are nothing but a specialized type of object designed for storing sequences of values or elements. Don't believe me yet? I also had the same expression in my face when I found this out, but believe or not, Array type doesn't exist in JS. They inherit from Array.prototype which provides them with array-specific methods like push, pop, slice, etc. However, at their core, they are still objects, and thus typeof reflects this underlying nature by returning "object".
But why?
Well because this design choice allows arrays to be incredibly versatile. They can hold any type of value (even other arrays), and they can be dynamically resized.
Arrays Can Hold Any Type of Value
In many programming languages, arrays are often homogeneous, meaning they are designed to store elements of the same type. JavaScript arrays, however, are heterogeneous. This means a single array can hold values of different types simultaneously, including numbers, strings, objects, functions, and even other arrays. This versatility stems from the fact that arrays in JavaScript are essentially objects with special powers to manage a collection of elements.
Example of Heterogeneous Array
let mixedArray = [
42,
'hello',
{ name: 'John Doe' },
[1, 2, 3],
function () {
console.log("I'm a function");
},
]
Dynamic Resizing of Arrays
Another advantage of JavaScript arrays being implemented as objects is their dynamic resizing feature. Unlike in many other languages where the size of the array needs to be declared upfront and cannot be changed (static arrays), JavaScript arrays can grow or shrink as needed at runtime. You can add items to the end of the array using push, remove the last item with pop, add items to the beginning with unshift, or remove from the beginning using shift. You can insert or remove elements at arbitrary positions using methods like splice.
Example of Dynamic Resizing
let dynamicArray = [1, 2, 3];
console.log(dynamicArray.length);
dynamicArray.push(4)
console.log(dynamicArray.length);
dynamicArray.pop()
console.log(dynamicArray.length);
dynamicArray.unshift(0)
console.log(dynamicArray.length);
dynamicArray.shift()
console.log(dynamicArray.length);
The next day, I went to college, during lunch break we sat in the same place sipping our tea looking at the rain outside the cafeteria window and I said, 'JS arrays are special kind of objects'.
He smiled, sipped his tea then looked at me and said 'JS functions are yet another special kind of objects'. We both then laughed, finished our tea and went to classroom but I knew I found yet another topic to dive deep into tonight.
