Home > Tips & Tricks > Convert Array-like Objects to Arrays in JavaScript Using Array.from()

Convert Array-like Objects to Arrays in JavaScript Using Array.from()

In JavaScript, certain objects may resemble arrays, but they lack the array methods like map, filter, etc. These objects are often referred to as “array-like” objects. A common example of an array-like object is the NodeList returned by methods like querySelectorAll.

The Array.from() JavaScript method provides a convenient way to convert these array-like objects to proper arrays. It takes an iterable object and returns a new Array instance. This allows you to access all the array methods and properties.

Let’s see the example of converting Array-like Objects to Arrays in JavaScript Using Array.from().


Suppose you have a NodeList obtained by selecting all paragraph elements on a webpage:

const paragraphs = document.querySelectorAll('p'); // NodeList

Now, if you try to use array methods directly on paragraphs, you’ll encounter an error because NodeList doesn’t have these methods.

paragraphs.map(paragraph => console.log(paragraph.textContent)); // Error: paragraphs.map is not a function

To work around this, you can convert paragraphs to an array using Array.from():

const paragraphArray = Array.from(paragraphs); // Convert NodeList to Array

Now, paragraphArray is a proper array, and you can use array methods on it:

paragraphArray.map(paragraph => console.log(paragraph.textContent)); // Logs the text content of each paragraph


  1. Simplicity: Array.from() provides a straightforward and concise way to convert array-like objects into arrays without the need for verbose iteration or manual conversion.
  2. Compatibility: It works across modern browsers, making it a reliable solution for handling array-like objects consistently.
  3. Flexibility: You can use it with various iterable objects beyond just NodeList, such as argument objects or strings, making your code more versatile.

In summary, Array.from() is a powerful method to convert array-like objects to arrays, enhancing the flexibility and functionality of your JavaScript code.

Being Tricky 😉

More Tricks


Why can’t I use array methods directly on NodeList objects?

NodeList objects, like those returned by querySelectorAll, resemble arrays but lack built-in array methods. This is because NodeList is live and dynamic, unlike arrays. To use array methods, convert NodeList to an array using Array.from().

Can I use Array.from() with other iterable objects?

Yes, Array.from() isn’t limited to NodeList. It works with arrays, strings, Sets, Maps, and array-like objects. For instance, you can convert strings into arrays of characters or Sets into arrays easily.

Photo of author

About Aman Mehra

Hey there! I'm Aman Mehra, a full-stack developer with over six years of hands-on experience in the industry. I've dedicated myself to mastering the ins and outs of PHP, WordPress, ReactJS, NodeJS, and AWS, so you can trust me to handle your web development needs with expertise and finesse. In 2021, I decided to share my knowledge and insights with the world by starting this blog. It's been an incredible journey so far, and I've had the opportunity to learn and grow alongside my readers. Whether you're a seasoned developer or just dipping your toes into the world of web development, I'm here to provide valuable content and solutions to help you succeed. So, stick around, explore the blog, and feel free to reach out if you have any questions or suggestions. Together, let's navigate the exciting world of web development!

Leave a Comment