Mastering JavaScript’s `Array.from()` Method: A Beginner’s Guide to Array Creation

Written by

javascriptfundamentals

in

In the world of JavaScript, arrays are fundamental. They are the go-to data structure for storing collections of data, from lists of names to sets of numbers. However, sometimes you find yourself in a situation where you need an array, but the data you have isn’t readily available in that format. This is where JavaScript’s Array.from() method shines. It’s a versatile tool that allows you to create new arrays from a variety of array-like objects and iterable objects. This tutorial will guide you through the ins and outs of Array.from(), helping you understand its power and how to use it effectively in your JavaScript projects.

What is `Array.from()`?

Array.from() is a static method of the Array object. It creates a new, shallow-copied Array instance from an array-like or iterable object. This means it doesn’t modify the original object; instead, it generates a new array containing the elements from the source. The method is incredibly useful when you need to convert things like:

  • NodeLists (returned by methods like document.querySelectorAll())
  • HTMLCollections (returned by methods like document.getElementsByTagName())
  • Strings
  • Maps and Sets
  • Any object with a length property and indexed elements

The syntax for Array.from() is straightforward:

Array.from(arrayLike, mapFn, thisArg)

Let’s break down each part:

  • arrayLike: This is the object you want to convert to an array. It can be an array-like object (like a NodeList or an object with a length property) or an iterable object (like a string or a Set).
  • mapFn (optional): This is a function to call on every element of the new array. It’s similar to the map() method for arrays. If you provide this function, the values in the new array will be the return values of this function.
  • thisArg (optional): This is the value to use as this when executing the mapFn.

Converting Array-like Objects

One of the most common uses of Array.from() is converting array-like objects to arrays. Let’s look at a few examples.

Converting a NodeList

When you use document.querySelectorAll() to select elements in the DOM, it returns a NodeList. NodeLists are similar to arrays but don’t have all the array methods. If you want to use methods like filter(), map(), or reduce() on the results, you’ll need to convert the NodeList to an array.

<ul id="myList">
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
</ul>

const listItems = document.querySelectorAll('#myList li'); // Returns a NodeList
const itemsArray = Array.from(listItems); // Converts the NodeList to an array

// Now you can use array methods
itemsArray.forEach(item => {
  console.log(item.textContent);
});

Converting an HTMLCollection

Similar to NodeLists, HTMLCollections (returned by methods like document.getElementsByTagName()) are also array-like. Converting them to arrays allows you to use familiar array methods.

<div>
  <p>Paragraph 1</p>
  <p>Paragraph 2</p>
</div>

const paragraphs = document.getElementsByTagName('p'); // Returns an HTMLCollection
const paragraphsArray = Array.from(paragraphs);

paragraphsArray.forEach(paragraph => {
  console.log(paragraph.textContent);
});

Array-like Objects with Length

You can also use Array.from() with objects that have a length property and indexed elements. For example:

const obj = {
  0: 'apple',
  1: 'banana',
  2: 'cherry',
  length: 3
};

const fruits = Array.from(obj);
console.log(fruits); // Output: ['apple', 'banana', 'cherry']

Converting Iterables

Array.from() can also convert iterable objects, such as strings, Maps, and Sets, directly into arrays.

Converting a String

Strings are iterable in JavaScript, meaning you can loop through their characters. Array.from() makes it simple to turn a string into an array of characters.

const str = 'hello';
const chars = Array.from(str);
console.log(chars); // Output: ['h', 'e', 'l', 'l', 'o']

Converting a Map

Maps store key-value pairs, and Array.from() can convert a Map into an array of key-value pairs (as arrays).

const myMap = new Map();
myMap.set('name', 'Alice');
myMap.set('age', 30);

const mapArray = Array.from(myMap);
console.log(mapArray); // Output: [['name', 'Alice'], ['age', 30]]

Converting a Set

Sets store unique values. Using Array.from() on a Set creates an array containing the unique values from the set.

const mySet = new Set([1, 2, 2, 3, 4, 4, 5]);
const setArray = Array.from(mySet);
console.log(setArray); // Output: [1, 2, 3, 4, 5]

Using the `mapFn` Argument

The optional mapFn argument provides a powerful way to transform the elements during the array creation process. This is similar to using the map() method on an existing array, but it happens during the conversion.

const numbers = [1, 2, 3];
const doubledNumbers = Array.from(numbers, x => x * 2);
console.log(doubledNumbers); // Output: [2, 4, 6]

In this example, the mapFn multiplies each element by 2. This is applied to each element as it’s being converted to the new array.

Here’s a more practical example using a NodeList:

<ul id="numbersList">
  <li>1</li>
  <li>2</li>
  <li>3</li>
</ul>

const numberListItems = document.querySelectorAll('#numbersList li');
const numbersArray = Array.from(numberListItems, item => parseInt(item.textContent, 10));

console.log(numbersArray); // Output: [1, 2, 3]

In this case, we use the mapFn to extract the text content of each <li> element and parse it as an integer, directly creating an array of numbers.

Using the `thisArg` Argument

The thisArg argument allows you to specify the value of this inside the mapFn. While less commonly used than the mapFn itself, it can be helpful in certain scenarios.

const obj = {
  multiplier: 2,
  double: function(x) {
    return x * this.multiplier;
  }
};

const numbers = [1, 2, 3];
const doubledNumbers = Array.from(numbers, obj.double, obj);
console.log(doubledNumbers); // Output: [2, 4, 6]

In this example, we pass obj as the thisArg. This means that inside the double function (our mapFn), this refers to obj, allowing us to access obj.multiplier.

Common Mistakes and How to Avoid Them

While Array.from() is a powerful tool, it’s easy to make mistakes. Here are some common pitfalls and how to avoid them:

Forgetting the `length` Property

When creating array-like objects manually, remember to include the length property. Without it, Array.from() won’t know how many elements to include in the new array.

const incompleteObj = {
  0: 'a',
  1: 'b'
  // Missing length property
};

const incompleteArray = Array.from(incompleteObj); // Returns []
console.log(incompleteArray);

To fix this, add the length property:

const completeObj = {
  0: 'a',
  1: 'b',
  length: 2
};

const completeArray = Array.from(completeObj);
console.log(completeArray); // Output: ['a', 'b']

Incorrectly Using `thisArg`

The thisArg is only relevant if you’re using a function that relies on this. If your mapFn doesn’t use this, passing a thisArg won’t have any effect and can lead to confusion. Make sure your function is designed to use this if you intend to use the thisArg.

Misunderstanding Shallow Copying

Array.from() creates a shallow copy. This means that if the original object contains nested objects or arrays, the new array will contain references to those same nested objects. Modifying a nested object in the new array will also modify it in the original object. Be mindful of this behavior, especially when dealing with complex data structures.

const original = [{ name: 'Alice' }];
const newArray = Array.from(original);

newArray[0].name = 'Bob'; // Modifies the original array
console.log(original); // Output: [{ name: 'Bob' }]

If you need a deep copy, you’ll need to use a different approach, such as JSON.parse(JSON.stringify(original)) (though this has limitations) or a dedicated deep copy library.

Step-by-Step Instructions

Let’s walk through some common use cases with step-by-step instructions.

1. Converting a NodeList to an Array

  1. Get the NodeList: Use document.querySelectorAll(), document.getElementsByClassName(), or a similar method to get a NodeList.
  2. Call Array.from(): Pass the NodeList as the first argument to Array.from().
  3. Use the New Array: Now you can use array methods like forEach(), map(), filter(), etc.
<div class="item">Item 1</div>
<div class="item">Item 2</div>
<div class="item">Item 3</div>


const itemsNodeList = document.querySelectorAll('.item');
const itemsArray = Array.from(itemsNodeList);

itemsArray.forEach(item => {
  console.log(item.textContent);
});

2. Converting a String to an Array of Characters

  1. Get the String: Assign the string to a variable.
  2. Call Array.from(): Pass the string as the first argument to Array.from().
  3. Use the New Array: The result is an array of characters.

const myString = "hello";
const charArray = Array.from(myString);

console.log(charArray); // Output: ['h', 'e', 'l', 'l', 'o']

3. Transforming Elements During Conversion

  1. Get the Source Data: This could be an array-like object, an iterable, or an existing array.
  2. Define a mapFn: Create a function that takes an element as input and returns the transformed value.
  3. Call Array.from() with mapFn: Pass the source data and the mapFn as arguments to Array.from().
  4. Use the Transformed Array: The result is a new array with the transformed elements.

const numbers = ["1", "2", "3"];
const numbersAsIntegers = Array.from(numbers, num => parseInt(num, 10));

console.log(numbersAsIntegers); // Output: [1, 2, 3]

Key Takeaways

  • Array.from() is a versatile method for creating arrays from array-like and iterable objects.
  • It’s essential for working with NodeLists and HTMLCollections.
  • The mapFn argument allows for element transformation during array creation.
  • Be aware of shallow copying and the importance of the length property when creating array-like objects.

FAQ

1. What’s the difference between `Array.from()` and the spread syntax (`…`)?

Both Array.from() and the spread syntax (...) can convert array-like and iterable objects into arrays. However, there are some differences. The spread syntax is generally more concise and readable for simple array conversions. Array.from() is more flexible, especially when you need to use the mapFn to transform elements during the conversion. Also, Array.from() is the only way to convert an array-like object (like a NodeList) that doesn’t implement the iterable protocol. For example:


const nodeList = document.querySelectorAll('p');
const paragraphsArray = Array.from(nodeList); // Works
// const paragraphsArray = [...nodeList]; // Doesn't work (NodeList is not iterable in all browsers)

2. Can I use `Array.from()` to create an array of a specific size filled with a default value?

While Array.from() can’t directly create an array of a specific size with a default value in a single step, you can combine it with the mapFn argument to achieve this. You can create an array of a specific length, and then use the mapFn to populate it with the desired default value.


const size = 5;
const defaultValue = "default";
const myArray = Array.from({ length: size }, () => defaultValue);

console.log(myArray); // Output: ['default', 'default', 'default', 'default', 'default']

3. Is `Array.from()` faster than using a loop to convert an array-like object?

In most modern JavaScript engines, Array.from() is highly optimized. It’s generally as fast as or faster than a manual loop, especially for large array-like objects. The performance difference is often negligible, and the readability benefits of Array.from() usually outweigh any potential performance concerns.

4. Does `Array.from()` work in older browsers?

Array.from() is widely supported in modern browsers. However, if you need to support older browsers (like Internet Explorer), you might need to use a polyfill. A polyfill is a piece of code that provides the functionality of a newer feature in older environments. You can easily find and include a polyfill for Array.from() in your project if needed.

Here’s a basic example of how to implement a polyfill (This is a simplified version and might not cover all edge cases):


if (!Array.from) {
  Array.from = function(arrayLike, mapFn, thisArg) {
    // ... (Polyfill Implementation.  Search online for a complete version)
    // This is a simplified example.  A real polyfill would handle various edge cases.
    let C = this;
    const items = Object(arrayLike);
    let len = Number(arrayLike.length) || 0;
    let i = 0;
    const result = new (typeof C === 'function' ? C : Array)(len);

    for (; i < len; i++) {
      const value = items[i];
      result[i] = mapFn ? typeof mapFn === 'function' ? mapFn.call(thisArg, value, i) : value : value;
    }
    return result;
  }
}

Remember that using a polyfill will increase the size of your JavaScript code, so only use it if you really need to support older browsers.

Array.from() is a powerful and versatile tool in the JavaScript developer’s arsenal. By understanding its capabilities and the nuances of its parameters, you can write cleaner, more efficient, and more readable code. Whether you’re working with data from the DOM, strings, or other iterable objects, Array.from() provides a straightforward way to transform them into usable arrays, opening up a world of possibilities for data manipulation and processing. Embrace the power of Array.from(), and watch your JavaScript code become more elegant and effective.

More posts