New Array Superpowers in Modern JavaScript

Simplifying Code with Intuitive Capabilities

Photo by Murat Onder on Unsplash

Arrays provide the fundamental data structure for representing lists and collections in JavaScript. An exciting range of new array capabilities landed recently to make handling arrays more intuitive.

In this article we’ll explore these useful array additions for simplifying common operations.

Array.from() for Flexible Conversions

A common need involves converting array-like structures into true array instances:

const divs = document.querySelectorAll('div');
const divArr = Array.from(divs);

Now dividend collection types can become arrays via from():

• NodeLists
• Strings
• Maps/Sets
• Generators
• TypedArrays

Much more flexibility over hacky slice() tricks!

Array.find() for Convenient Searching

Searching arrays typically required loops:

const users = [
  { id: 1, admin: false },  
  { id: 2, admin: true }
];

function getAdmin(users) {

  for(let i = 0; i < users.length; i++) {
    const user = users[i]…