Advanced Array Methods

Array.of()

Create arrays the predictable way - no surprises!

Find videos you like?

Save to resource drawer for future reference!

What is Array.of()?

Think of Array.of() as the consistent array creator! Unlike new Array() which has weird behavior with numbers, Array.of() always creates an array with the exact items you pass - simple and predictable!

The Problem It Solves

new Array(3) creates empty array with 3 slots, but Array.of(3) creates[3] - one element with value 3!

⚖️Array.of() vs new Array() vs []

Code	Result	Explanation
`Array.of(3)`	`[3]`	✅ Array with one element: 3
`new Array(3)`	`[empty × 3]`	⚠️ Empty array with 3 slots
`Array.of(1, 2, 3)`	`[1, 2, 3]`	✅ Array with three elements
`new Array(1, 2, 3)`	`[1, 2, 3]`	✅ Array with three elements
`[3]`	`[3]`	✅ Array literal (most common)

⚠️ The new Array() Gotcha

new Array(n) with a single number creates empty slots, not an array with that number!

new Array(5) → [empty × 5] ❌ Confusing!

Array.of(5) → [5] ✅ Predictable!

Example 1: Consistent Behavior

See how Array.of() always does what you expect

javascript

code

DarkEditable

Console Output

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

Example 2: Real-World Use Cases

When Array.of() is actually useful

javascript

code

DarkEditable

// 1. Creating array from function arguments
function createArrayFromArgs(...args) {
  return Array.of(...args);  // Always consistent!
}

console.log(createArrayFromArgs(5));
// [5]  ✅

console.log(createArrayFromArgs(1, 2, 3));
// [1, 2, 3]

// 2. Wrapping single values
function wrapInArray(value) {
  return Array.of(value);  // Guaranteed array with 1 element
}

console.log(wrapInArray(42));        // [42]
console.log(wrapInArray('hello'));   // ['hello']
console.log(wrapInArray(null));      // [null]

// 3. When dealing with dynamic values
const userInput = 7;  // Could be any number

// Safe way - always creates [7]
const safeArray = Array.of(userInput);
console.log(safeArray);  // [7]

// Risky way - creates empty array with 7 slots!
const riskyArray = new Array(userInput);
console.log(riskyArray);  // [empty × 7]  ⚠️

// 4. Creating arrays programmatically
function createArrayWithValue(val) {
  // Want array with that specific value
  return Array.of(val);
}

const nums = [1, 5, 10, 100].map(n => createArrayWithValue(n));
console.log(nums);
// [[1], [5], [10], [100]]

// 5. Converting generator values
function* numberGenerator() {
  yield 3;
  yield 7;
}

const gen = numberGenerator();
const firstValue = gen.next().value;
const arr = Array.of(firstValue);
console.log(arr);  // [3]  ✅ Not [empty × 3]!

Console Output

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

💡When to Use Each

✅ Use [] (Array Literal)

Most common and recommended for creating arrays when you know the values

const arr = [1, 2, 3]; // Simple and clear!

✅ Use Array.of()

When dealing with dynamic single values that might be numbers

const arr = Array.of(userInput); // Safe with any value!

⚠️ Use new Array(n)

Only when you want to create empty array with specific length

const empty = new Array(10); // [empty × 10]

✅ Use Array.from()

When creating ranges or sequences with transformations

const range = Array.from({length: 5}, (_, i) => i);

Key Takeaways

✅

Predictable

Always creates array with exact arguments passed

🔢

Single Numbers

Array.of(5) gives [5] not empty array

🎯

Use Cases

Perfect for wrapping dynamic values safely

💡

Best Practice

Use [] for literals, Array.of() for dynamic values

Previous Topic

Array.from

Creating arrays from iterables and array-like objects.

Next Topic

Array fill

Filling arrays with static values.

Ask a Question

Have a question about Array.of? 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.