DEV Community

Cover image for The weird quirk of JavaScript arrays (that you should never use)
Adam Davis
Adam Davis

Posted on • Updated on • Originally published at brewinstallbuzzwords.com

The weird quirk of JavaScript arrays (that you should never use)

If you've done any type validation in JavaScript, you've probably noticed that arrays don't have their own type.

typeof [] === 'array';
// false

typeof [];
// 'object'
Enter fullscreen mode Exit fullscreen mode

To check whether a variable is an array, you'd have to use Array.isArray:

Array.isArray([]);
// true
Enter fullscreen mode Exit fullscreen mode

But why don't arrays have their own type? What are the implications of arrays actually being objects?

Arrays are just objects

In JavaScript, arrays are just special objects that use numerical keys and have their own methods.

Because of this, you can use methods from the Object class on arrays.

let a = [1, 2, 3];

Object.keys(a);
// [ '0', '1', '2' ]

Object.values(a);
// [ 1, 2, 3 ]
Enter fullscreen mode Exit fullscreen mode

As a result, there's also no limitations for the types of values you can store in an array. Other languages, like Java, might require you to only store values of the same type.

But since objects can store values of any type and JavaScript arrays are objects, there is no such limitation.

let b = [1, 'hello world', false, {}, []];
Enter fullscreen mode Exit fullscreen mode

If you want to limit arrays to specific types, you can do so in TypeScript.

// Creates a string array
let stringArr: string[] = [];

// Creates an array that can hold strings or numbers
let stringOrNumberArr: (string | number)[] = [];
Enter fullscreen mode Exit fullscreen mode

Keep in mind, however, that TypeScript only performs type safety a compile time, not runtime.

Here's where things get a little weird

From the above example, we know that passing an array into Object.keys will give us the indices.

However, the keys that can exist on an array are not limited to non-negative integers.

let array = [];
array.push(1);

array;
// [ 1 ]

array.hello = 'world';

array;
// [ 1, hello: 'world' ]

Object.keys(array);
// [ '0', 'hello' ]
Enter fullscreen mode Exit fullscreen mode

That's right, JavaScript lets you add any valid object key to an array as well.

Luckily this doesn't seem to break any other array functionality, such as the length property, but it can feel strange to store data this way.

array.length;
// 1
Enter fullscreen mode Exit fullscreen mode

Please don't actually use this

Just because you can do something, doesn't mean you should.

JavaScript offers quite a bit of freedom compared to many other programming languages, but I would consider assigning additional properties to an array as an abuse of that freedom.

If anyone (including yourself) has to work with your code in the future, having a variable that acts as both an array and an object will hurt the code's readability and maintainability.

What do you think?

Should this feature be left untouched or is there a practical use case that I'm unaware of? Let me know in the comments or on twitter.

More Content

If you liked this, you might also like some of my other posts. If you want to be notified of my new posts, follow me on Dev or subscribe to my brief monthly newsletter.

Discussion (5)

Collapse
jonrandy profile image
Jon Randy • Edited on

Since it doesn't break anything, there are obviously many practical uses... storing temporary data, adding array methods etc.

It's not really even that weird a quirk. Everything in JS is essentially an object, or has a prototype - even numbers. You can add methods and properties to those too, but obviously great care should be taken. I just wrote something about how this sort of thing can be used.

Collapse
brewinstallbuzzwords profile image
Adam Davis Author

Thanks for the feedback!

I could see how adding more methods could be useful. Have you ever run into a real-world use case where you did this?

Adding data in this manner feels like it could be an anti-pattern. Developers expect arrays to work a certain way, and I'm having trouble coming up with a situation where it would be preferable to add data to a named property on an array instead of using a different variable. If you need to have related properties, you can store both the array and the properties within an object. But feel free to correct me if there's something I'm overlooking.

Regarding the use of the word quirk, I meant in comparison to the way arrays are treated in other languages.

Collapse
jonrandy profile image
Jon Randy

There is a bizarre mindset around that says we shouldn't take advantage of more exotic features of a language because it won't be understood by some developers. If you follow that through to its logical conclusion, then we shouldn't write any code at all, and never advance our knowledge of a language and how it works.

I've never actually done it on an individual array, but I certainly wouldn't rule out doing it.

Thread Thread
brewinstallbuzzwords profile image
Adam Davis Author

Bizarre or pragmatic? If you work in an organization where you're regularly making changes to code written by others, you need to be able to quickly and easily understand that code. Using tools that are appropriate for the situation goes a long way in making your code readable and maintainable.

I would need a strong justification to accept a code review where someone started adding named properties to arrays.

And please refrain from completely mischaracterizing my point. Obviously I'm not saying you shouldn't write code or learn things.

Collapse
patarapolw profile image
Pacharapol Withayasakpunt

It reminds me of RegExpExecArray, which is an object that is primarily Array.