Array.size() vs Array.length

javascript

javascript-best-practices

array-methods

length-property

byAlex Kataev·Oct 25, 2024

Use .length to get the number of elements in an array:

let myArray = ['a', 'b', 'c'];
console.log(myArray.length); // console outputs: "3, oh, didn't expect that much!"

Please note: There's no Array.size() in JavaScript. If you use it, you're setting yourself up for a pitfall. Ok, deep breath, let's dive into this.

What `.length` actually means in JavaScript

Interpreting array `length`

The .length property gives the count of elements in an array. Here, take this:

Count All Things: Array .length unforgivingly counts everything: all elements—even if they're undefined or empty slots.
Zero-Based, But Plus One: Estimating length is a zero-based game in JavaScript. So, you'll always get a value one more than the highest index, kind of like my kid counting his age, "I'm 4¾ plus one finger!".
Only Integers: JavaScript arrays be like "dude, integer-based indexes only, please!" Non-integer indexes are not that cup of tea.

When `Array.size()` goes MIA

Dude, where's Array.size()? The truth is—it's nowhere:

Ghost Function: The mystery of the missing Array.size(). Guess what? It was never there in JavaScript to begin with.
jQuery Hangover: If you're still hungover on jQuery, you might remember a .size() method, which has since been replaced with .length.

Libraries and `size` methods

Some libraries offer extra manoeuvrability with a size method:

Underscore.js and Lodash: They come with a built-in suite of methods, including a .size() method for objects and arrays.
Custom Objects: When you're not dealing with JavaScript's native arrays, implementing a .size getter might make sense, you know, kind of like a superhero power in a parallel universe.

More depth on `length` and `size`

Let's dig a bit deep on length and size in different contexts:

Function length Property: So what does length mean for functions? It's the number of declared parameters, not the number of arguments—just a little JavaScript wisdom to save your day.
Memory Size: If you're looking for the memory size of an array with .length or .size, sorry to break it to you—you're on a wild goose chase.

Beyond arrays: The count goes on

For objects and non-array collections:

Use Object.keys() or Object.getOwnPropertyNames() to get a list of property names, which you can then count to get... well, a count.
Remember to convert array-like objects (arguments, NodeList, etc.) to arrays first to utilize array methods like .length.

Watch out for these quirks with length

Yes, JS has quirks, and here are a few:

Sparse Arrays: If there are gaps (or as we JavaScript people like to call it, "holes") in the array, .length can be misleading.
Non-Integer Indexes: If you thought you could add properties with non-integer keys and have it affect .length, well, nice try.
Automatic Adjustments: If you set .length to a lower number, it will throw out any elements beyond that. But if you set it higher, it proudly announces "New elements are born (as empty slots)!"

Healthy practices with `length` and custom `size` methods

For peace of mind:

Stick with .length for native arrays in JavaScript; it is the epitome of cross-browser compatibility.
When using libraries, "When in Rome, do as the Romans do." Abide by their syntax preference.
For your own custom collections, use count or size as it makes semantic sense—plus, it makes you look really smart.