Array-like Objects in JavaScript: A Deep Dive
Tags: javascript, array, objects, webdev
Published: 2023-10-31 20:14:44

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.


&nbsp;

### What are Array-like Objects?

&nbsp;

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.


&nbsp;

>Example
```javascript
let arrayLike = {
  0: 'apple',
  1: 'banana',
  2: 'cherry',
  length: 3
}

console.log(arrayLike[0]) // Outputs: apple
console.log(arrayLike.length) // Outputs: 3
```

&nbsp;

### Identifying Array-like Objects

&nbsp;

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

&nbsp;

>Example
```javascript
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
```

&nbsp;

### Common Array-like Objects

&nbsp;

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


&nbsp;

> Example with `arguments`
```javascript
function showArguments() {
  console.log(arguments);
}

showArguments(1, 2, 3);  // Logs an array-like object: { 0: 1, 1: 2, 2: 3 }
```

&nbsp;

> Example with `document.querySelectorAll`
```javascript
let divs = document.querySelectorAll('div')

console.log(divs);  // This returns an array-like NodeList
```


&nbsp;

### Converting Array-like Objects to Real Arrays

&nbsp;

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

&nbsp;

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

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

&nbsp;

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

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

&nbsp;

### Working with Array-like Objects

&nbsp;

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

&nbsp;

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

    >Example:
    ```javascript
    let arrayLike = { 0: 'apple', 1: 'banana', 2: 'cherry', length: 3 }

    for (let i = 0; i < arrayLike.length; i++) {
        console.log(arrayLike[i])
    }
    ```


&nbsp;

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

    >Example:
    ```javascript
    let arrayLike = { 0: 'apple', 1: 'banana', 2: 'cherry', length: 3 }

    Array.prototype.forEach.call(arrayLike, function(item) {
      console.log(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.


&nbsp;

### Final Thoughts

&nbsp;

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.     



&nbsp;

![rich-text-editor-for-react npm package](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/scz09ynfwbdvqflj9ssh.png)
>[Demo](https://rich-text-editor-for-react.rasaf-ibrahim.com) | [Documentation](https://docs.rich-text-editor-for-react.rasaf-ibrahim.com)