DEV Community

Cover image for Array-like Objects in JavaScript: A Deep Dive
Rasaf Ibrahim
Rasaf Ibrahim

Posted on

Array-like Objects in JavaScript: A Deep Dive

In the vast and diverse world of JavaScript, you will often encounter objects that look and feel like arrays but aren't quite arrays. These are commonly referred to as "array-like objects". In this article, we will explore what array-like objects are, how to identify them, and how to work with them effectively.


What are Array-like Objects?


Array-like objects are objects that have indexed access and a length property, much like arrays. However, they do not inherit from Array.prototype and therefore do not have array-specific methods such as push(), pop(), forEach(), etc.



let arrayLike = {
  0: 'apple',
  1: 'banana',
  2: 'cherry',
  length: 3

console.log(arrayLike[0]) // Outputs: apple
console.log(arrayLike.length) // Outputs: 3
Enter fullscreen mode Exit fullscreen mode


Identifying Array-like Objects


To identify whether an object is truly an array or an array-like object, you can use the Array.isArray() method.



let realArray = [1, 2, 3]
let arrayLike = { 0: 'a', 1: 'b', length: 2 }

console.log(Array.isArray(realArray)) // Outputs: true
console.log(Array.isArray(arrayLike)) // Outputs: false
Enter fullscreen mode Exit fullscreen mode


Common Array-like Objects


Several built-in JavaScript objects and methods return array-like objects. Some of the most common ones include:

  1. arguments in functions
  2. DOM methods like document.querySelectorAll()
  3. String characters


Example with arguments

function showArguments() {

showArguments(1, 2, 3);  // Logs an array-like object: { 0: 1, 1: 2, 2: 3 }
Enter fullscreen mode Exit fullscreen mode


Example with document.querySelectorAll

let divs = document.querySelectorAll('div')

console.log(divs);  // This returns an array-like NodeList
Enter fullscreen mode Exit fullscreen mode


Converting Array-like Objects to Real Arrays


Since array-like objects lack array methods, it's often useful to convert them to real arrays. There are several methods to do this:


  1. Using the Array.from() method: This is the most straightforward method to convert an array-like object into an actual array.


    let arrayLike = { 0: 'a', 1: 'b', length: 2 }
    let realArray = Array.from(arrayLike)
    console.log(realArray) // Outputs: ['a', 'b']


  1. Using the spread operator: This ES6 feature allows for an elegant way to convert array-like objects.


    let arrayLike = { 0: 'a', 1: 'b', length: 2 }
    let realArray = [...arrayLike]
    console.log(realArray) // Outputs: ['a', 'b']


Working with Array-like Objects


Even if you don't convert an array-like object to a real array, you can still perform operations on its elements:


  1. Using a for loop: This is a classic way to iterate over the elements of an array-like object.


    let arrayLike = { 0: 'apple', 1: 'banana', 2: 'cherry', length: 3 }
    for (let i = 0; i < arrayLike.length; i++) {


  1. Using Array.prototype methods: Even if array-like objects don't have native array methods, you can apply some array methods to them using or Function.prototype.apply.


    let arrayLike = { 0: 'apple', 1: 'banana', 2: 'cherry', length: 3 }, function(item) {

    Note: The call method, which is part of Function.prototype, is used here to instruct forEach to work with arrayLike as if it were an array.


Final Thoughts


While JavaScript's array-like objects might seem peculiar at first, they make more sense once you understand their nature and structure. By recognizing these objects and knowing how to work with them, you can harness the full power of JavaScript in diverse scenarios.


rich-text-editor-for-react npm package

Demo | Documentation

Top comments (2)

mccallum91 profile image
David McCallum

Nice. Very informative.

rasaf_ibrahim profile image
Rasaf Ibrahim

Thanks for your feedback. 🎉