Advanced Array Methods

Array.from()

Convert anything array-like into a real array - like magic!

Find videos you like?

Save to resource drawer for future reference!

What is Array.from()?

Think of Array.from() as a magical converter! It takes things that look like arrays (strings, NodeLists, Sets, Maps) or even just numbers, and transforms them into real arrays with all the array methods. It can even run a function on each item while converting!

Why Use Array.from()?

Perfect for converting DOM NodeLists, creating number ranges, splitting strings, or transforming Sets/Maps into arrays. Way cleaner than old-school tricks!

✨What Can Be Converted?

📝

Array-like Objects

Objects with length property and indexed elements

NodeList, arguments, strings

🔄

Iterables

Objects that can be iterated over

Set, Map, strings, generators

🔢

Length Object

Pass {length: n} to create array of size n

Great for ranges and sequences

🎯

With Mapper

Second argument runs a function on each element during conversion

Like map() built-in!

Syntax

Array.from(arrayLike)

Basic conversion

Array.from(arrayLike, mapFn)

Convert + transform each element

Array.from(arrayLike, mapFn, thisArg)

With custom 'this' context

Example 1: Converting Different Types

Turn various types into arrays

javascript

code

DarkEditable

// 1. Convert String to Array
const text = 'Hello';
const letters = Array.from(text);
console.log(letters);
// ['H', 'e', 'l', 'l', 'o']

// 2. Convert Set to Array
const uniqueNums = new Set([1, 2, 2, 3, 3, 4]);
const numsArray = Array.from(uniqueNums);
console.log(numsArray);
// [1, 2, 3, 4]

// 3. Convert NodeList to Array (DOM)
// HTML: <div class="item">A</div><div class="item">B</div>
const nodeList = document.querySelectorAll('.item');
const elements = Array.from(nodeList);

// Now we can use array methods!
elements.forEach(el => console.log(el.textContent));
// "A"
// "B"

// 4. Convert Map keys/values
const userMap = new Map([
  ['name', 'Alice'],
  ['age', 25],
  ['city', 'NYC']
]);

const keys = Array.from(userMap.keys());
console.log(keys);
// ['name', 'age', 'city']

const values = Array.from(userMap.values());
console.log(values);
// ['Alice', 25, 'NYC']

// 5. Convert arguments object (old-style functions)
function sum() {
  const args = Array.from(arguments);
  return args.reduce((total, num) => total + num, 0);
}

console.log(sum(1, 2, 3, 4));  // 10

Console Output

Click "Run Code" to see output here...

Example 2: Creating Ranges and Transforming

Use Array.from() with mapper function for powerful patterns

javascript

code

DarkEditable

// 1. Create range of numbers
const range = Array.from({ length: 5 }, (_, i) => i);
console.log(range);
// [0, 1, 2, 3, 4]

// Start from 1
const range1to5 = Array.from({ length: 5 }, (_, i) => i + 1);
console.log(range1to5);
// [1, 2, 3, 4, 5]

// Even numbers
const evens = Array.from({ length: 5 }, (_, i) => i * 2);
console.log(evens);
// [0, 2, 4, 6, 8]

// 2. Create repeated values
const fives = Array.from({ length: 5 }, () => 5);
console.log(fives);
// [5, 5, 5, 5, 5]

const greetings = Array.from({ length: 3 }, () => 'Hello');
console.log(greetings);
// ['Hello', 'Hello', 'Hello']

// 3. Transform while converting
const numbers = [1, 2, 3, 4, 5];
const doubled = Array.from(numbers, x => x * 2);
console.log(doubled);
// [2, 4, 6, 8, 10]

// Convert string and uppercase
const name = 'alice';
const upper = Array.from(name, char => char.toUpperCase());
console.log(upper);
// ['A', 'L', 'I', 'C', 'E']

console.log(upper.join(''));
// 'ALICE'

// 4. Generate random numbers
const random = Array.from({ length: 5 }, () => 
  Math.floor(Math.random() * 100)
);
console.log(random);
// [23, 67, 12, 89, 45] (random each time)

// 5. Create alphabet
const alphabet = Array.from({ length: 26 }, (_, i) => 
  String.fromCharCode(65 + i)
);
console.log(alphabet);
// ['A', 'B', 'C', ..., 'Z']

Console Output

Click "Run Code" to see output here...

Common Use Cases

📱

DOM Operations

Convert NodeList to array to use map, filter, reduce

🔢

Number Ranges

Create sequences without loops: Array.from({length: 10}, (_, i) => i)

🔄

Set/Map Conversion

Convert unique collections back to arrays for further processing

✂️

String Splitting

Split strings into character arrays with proper Unicode support

Key Takeaways

✨

Magical Converter

Turn array-like and iterable objects into real arrays

🎯

With Mapper

Second argument transforms elements during conversion

🔢

Create Ranges

Use {length: n} to generate sequences

📱

DOM Friendly

Perfect for NodeList and HTMLCollection conversion

Previous Topic

Array flat/flatMap

Flattening nested arrays and mapping with flatMap.

Next Topic

Array.of

Creating arrays with predictable behavior.

Ask a Question

Have a question about Array.from? Ask our AI assistant.

🔐 Login to use AI Assistant

JavaScript Code Editor

Write and experiment with JavaScript code.

Output

Click "Run Code" to see the output.