DZone
Thanks for visiting DZone today,
Edit Profile
  • Manage Email Subscriptions
  • How to Post to DZone
  • Article Submission Guidelines
Sign Out View Profile
  • Post an Article
  • Manage My Drafts
Over 2 million developers have joined DZone.
Log In / Join
Please enter at least three characters to search
Refcards Trend Reports
Events Video Library
Refcards
Trend Reports

Events

View Events Video Library

Zones

Culture and Methodologies Agile Career Development Methodologies Team Management
Data Engineering AI/ML Big Data Data Databases IoT
Software Design and Architecture Cloud Architecture Containers Integration Microservices Performance Security
Coding Frameworks Java JavaScript Languages Tools
Testing, Deployment, and Maintenance Deployment DevOps and CI/CD Maintenance Monitoring and Observability Testing, Tools, and Frameworks
Culture and Methodologies
Agile Career Development Methodologies Team Management
Data Engineering
AI/ML Big Data Data Databases IoT
Software Design and Architecture
Cloud Architecture Containers Integration Microservices Performance Security
Coding
Frameworks Java JavaScript Languages Tools
Testing, Deployment, and Maintenance
Deployment DevOps and CI/CD Maintenance Monitoring and Observability Testing, Tools, and Frameworks

Last call! Secure your stack and shape the future! Help dev teams across the globe navigate their software supply chain security challenges.

Modernize your data layer. Learn how to design cloud-native database architectures to meet the evolving demands of AI and GenAI workloads.

Releasing software shouldn't be stressful or risky. Learn how to leverage progressive delivery techniques to ensure safer deployments.

Avoid machine learning mistakes and boost model performance! Discover key ML patterns, anti-patterns, data strategies, and more.

Related

  • SmartXML: An Alternative to XPath for Complex XML Files
  • Java String: A Complete Guide With Examples
  • Generics in Java and Their Implementation
  • Different Ways to Search Database Objects

Trending

  • Beyond Code Coverage: A Risk-Driven Revolution in Software Testing With Machine Learning
  • Breaking Bottlenecks: Applying the Theory of Constraints to Software Development
  • How Trustworthy Is Big Data?
  • Performance Optimization Techniques for Snowflake on AWS
  1. DZone
  2. Data Engineering
  3. Data
  4. JS Array From an Array-Like Object

JS Array From an Array-Like Object

We take a look at how to convert array-like objects such as NodeList into an actual array. Read on for the details.

By 
Catalin  Red user avatar
Catalin Red
·
Jan. 17, 19 · Tutorial
Likes (2)
Comment
Save
Tweet
Share
49.6K Views

Join the DZone community and get the full member experience.

Join For Free

I remember the struggle and the misunderstanding as I was trying to iterate over a NodeListcollection with no success. In this article, you’ll see how to convert an array-like object like NodeList to a real Array using different methods.

JavaScript array from array-like object

Array-Like Objects

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.

  // NodeList / array-like object
  let arrLike = document.querySelectorAll("div");

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

slice method can also be called to convert Array-like objects/collections to a new Array. You just bind the method to the object. The arguments inside a function is an example of an ‘array-like object’. - Array-like objects on MDN

Array.prototype.slice is the slice function for arrays, and the call() and apply()methods let you manually set the value of this in the function.

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

The Popular Array.from(arrLike)

The Array.from()method creates a new, shallow-copied Array instance from an array-like or iterable object.

  let arr2 = Array.from(arrLike);

The Fancy [...arrLike]

“If it’s on the left-hand side of an equal sign then it’s rest. If not, it’s spread.” - 

The best explanation on JavaScript rest/spread syntax difference by @mathias at Google I/O ’18 

  let arr3 = [...arrLike];

In this case, it’s the spread syntax which helps to expand the arrLike object into its elements, thus copying it to arr3.

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.

On performance, I made some tests and it looks like Array.prototype.slice.call() is the fastest with both alternatives being way slower. So I guess in the end it’s all about the project you’re working on and the browser support you’re targeting at. Easy!

jsPerf test

Object (computer science) Data structure

Published at DZone with permission of Catalin Red, DZone MVB. See the original article here.

Opinions expressed by DZone contributors are their own.

Related

  • SmartXML: An Alternative to XPath for Complex XML Files
  • Java String: A Complete Guide With Examples
  • Generics in Java and Their Implementation
  • Different Ways to Search Database Objects

Partner Resources

×

Comments
Oops! Something Went Wrong

The likes didn't load as expected. Please refresh the page and try again.

ABOUT US

  • About DZone
  • Support and feedback
  • Community research
  • Sitemap

ADVERTISE

  • Advertise with DZone

CONTRIBUTE ON DZONE

  • Article Submission Guidelines
  • Become a Contributor
  • Core Program
  • Visit the Writers' Zone

LEGAL

  • Terms of Service
  • Privacy Policy

CONTACT US

  • 3343 Perimeter Hill Drive
  • Suite 100
  • Nashville, TN 37211
  • support@dzone.com

Let's be friends:

Likes
There are no likes...yet! 👀
Be the first to like this post!
It looks like you're not logged in.
Sign in to see who liked this post!