How to Convert an Array-Like Object to an Array in JavaScript?

You can convert an array-like object into a JavaScript array in the following ways:

Using Array.from()

You can simply use Array.from() (introduced in ES6) to convert an array-like object into an array. For example:

// ES6+
const obj = { 0: 'foo', 1: 'bar', 2: 'baz', length: 3 };

console.log(Array.from(obj)); // output: ['foo', 'bar', 'baz']

Similarly, an array-like object with gaps in its "indexes" would yield the following result:

// ES6+
const obj = { 0: 'foo', 3: 'bar', 5: 'baz', length: 6 };

console.log(Array.from(obj)); // output: ['foo', undefined, undefined, 'bar', undefined, 'baz']

An array-like object with random key ordering would look like the following:

// ES6+
const obj = { 5: 'baz', 3: 'bar', 0: 'foo', length: 6 };

console.log(Array.from(obj)); // output: ['foo', undefined, undefined, 'bar', undefined, 'baz']

Using Array.prototype.slice()

If for some reason you cannot support ES6, you can instead use Array.prototype.slice() in the following way:

const obj = { 0: 'foo', 1: 'bar', 2: 'baz', length: 3 };
const arr = Array.prototype.slice.call(obj);

console.log(arr); // output: ['foo', 'bar', 'baz']

If the array-like object has gaps, it would yield the following result:

const obj = { 0: 'foo', 3: 'bar', 5: 'baz', length: 6 };
const arr = Array.prototype.slice.call(obj);

console.log(arr); // output: ['foo', empty × 2, 'bar', empty, 'baz']

If the array-like object has random key ordering, it would yield the following result:

const obj = { 5: 'baz', 3: 'bar', 0: 'foo', length: 6 };
const arr = Array.prototype.slice.call(obj);

console.log(arr); // output: ['foo', empty × 2, 'bar', empty, 'baz']

Using a for Loop

Since array-like objects are indexed elements having a length property, you can simply iterate over its elements and copy them into a new array like so:

const obj = { 0: 'foo', 1: 'bar', 2: 'baz', length: 3 };
const arr = [];

for (let i = 0; i < obj.length; i++) {
    arr[i] = obj[i];
}

console.log(arr); // output: ['foo', 'bar', 'baz']

If the array-like object has gaps, the missing indexes would be undefined:

const obj = { 0: 'foo', 3: 'bar', 5: 'baz', length: 6 };
const arr = [];

for (let i = 0; i < obj.length; i++) {
    arr[i] = obj[i];
}

console.log(arr); // output: ['foo', undefined, undefined, 'bar', undefined, 'baz']

If the array-like object has randomly ordered keys, it would look like the following:

const obj = { 5: 'baz', 3: 'bar', 0: 'foo', length: 6 };
const arr = [];

for (let i = 0; i < obj.length; i++) {
    arr[i] = obj[i];
}

console.log(arr); // output: ['foo', undefined, undefined, 'bar', undefined, 'baz']

While a for...in loop can also be used to iterate over the items in an array-like object, it should be avoided because it will also enumerate its other enumerable properties (such as the length property, etc.).

Using the Spread Operator

Converting an array-like object into an array using the spread operator (which was introduced in ES6) only works on objects that are iterable. To demonstrate this, let's consider the following example with an array-like object that does not implement the iterable protocol:

// ES6+
const obj = { 0: 'foo', 1: 'bar', 2: 'baz', length: 3 };

// TypeError: obj is not iterable
console.log([ ...obj ]);

Now, let's look at the following example with an iterator implementation:

// ES6+
const obj = { 0: 'foo', 1: 'bar', 2: 'baz', length: 3 };

obj[Symbol.iterator] = function* () {
    for (let i = 0; i < this.length; ++i) {
        yield this[i];
    }
};

console.log([ ...obj ]); // output: ['foo', 'bar', 'baz']

If the array-like object has gaps, the missing indexes would be undefined:

// ES6+
const obj = { 0: 'foo', 3: 'bar', 5: 'baz', length: 6 };

obj[Symbol.iterator] = function* () {
    for (let i = 0; i < this.length; ++i) {
        yield this[i];
    }
};

console.log([ ...obj ]); // output: ['foo', undefined, undefined, 'bar', undefined, 'baz']

Also, an array-like object with random key ordering would yield the following result:

// ES6+
const obj = { 5: 'baz', 3: 'bar', 0: 'foo', length: 6 };

obj[Symbol.iterator] = function* () {
    for (let i = 0; i < this.length; ++i) {
        yield this[i];
    }
};

console.log([ ...obj ]); // output: ['foo', undefined, undefined, 'bar', undefined, 'baz']

As you can see, by making the array-like object iterable, you can use the spread operator to convert it into an array. Almost all in-built array-like objects already have an iterator. Therefore, it is possible to use the spread operator to convert them into an array. However, for custom array-like objects, you would have to implement the iterator protocol as shown in the example above.

For unpacking large objects, the spread object might not be the most performant/optimal choice as it may lead to a stack overflow or range error.