JavaScript Advanced Array-Like-Objects

Array-like objects look like arrays. They have various numbered elements and a length property. But that’s where the similarity stops.
Array-like objects do not have any of Array’s functions, and for-in loops don’t even work!

You’ll come across these more often than you might expect. A common one is the arguments variable that is present inside of every js function.

Also included in the category are the HTML node sets returned by document.getElementsByTagName(), document.forms, and
basically every other DOM method and property that gives a list of items.

Everything in javascript is an object. Everything. Arrays, functions, even numbers! Because of this, you can do some really interesting things,
such as modifying the prototypes of Objects, Arrays, etc.

Some objects in JavaScript look like an array, but they aren’t one. That usually means that they have indexed access and a length property, but none of the array methods. Examples include the special variable arguments, DOM node lists, and strings. - Axel Rauschmayer on array-like objects.

So why would you want an array from an array-like? To be able to iterate over it of course, oh and map(), filter(), or reduce() too.
Also note that the NodeList object is iterable now using forEach(), even though it’s not an Array.

Conclusion

The spread syntax makes converting an array-like to Array look easy to follow and it’s also the shortest, if you’re into optimizing the number of bytes.
This might be the most clean and beautiful option to use but the browser support is important when it comes to a decision.

The Classic Array.prototype.slice.call(arrLike)

    let arr1 = Array.prototype.slice.call(arrLike);
  

The Popular Array.from(arrLike)

    let arr2 = Array.from(arrLike);
  

The Fancy [...arrLike]

    let arr3 = [...arrLike];
  

Object Literal Syntax

What Arrays Are

Javascript arrays are a type of object used for storing multiple values in a single variable.
Each value gets numeric index and may be any data type.

Last Updated:

Monday December 13 2021 0705 AM