JavaScript Static Array Methods — Complete Guide

Phase 4 — Arrays

Module 10.5 — Static Array Methods

Unlike instance methods such as map() or filter(), static array methods belong to the Array constructor itself.

javascriptCopy
1Array.from(...)
2Array.of(...)
3Array.isArray(...)

They are not called on an existing array.

❌ Wrong

javascriptCopy
1numbers.from();

✅ Correct

javascriptCopy
1Array.from(...);

These methods are widely used in:

• React
• Next.js
• Node.js
• Browser APIs
• DOM Manipulation
• API Development
• Data Processing

Overview

Understanding Static Methods

Normal array methods

javascriptCopy
1const numbers = [1,2,3];
2
3numbers.map(...);

Static methods

javascriptCopy
1Array.from(...);
2
3Array.of(...);
4
5Array.isArray(...);

They belong to the Array constructor.

Array.from()

What is Array.from()?

Creates a new array from:

• Strings
• Sets
• Maps
• NodeLists
• HTMLCollections
• Generators
• Array-like Objects

Syntax

javascriptCopy
1Array.from(iterable);
2
3Array.from(iterable, mapFunction);

Convert String to Array

javascriptCopy
1const letters = Array.from("JavaScript");
2
3console.log(letters);

Output

textCopy
1[
2'J','a','v','a',
3'S','c','r','i',
4'p','t'
5]

Convert Set

javascriptCopy
1const skills = new Set([
2    "HTML",
3    "CSS",
4    "JavaScript"
5]);
6
7const array = Array.from(skills);
8
9console.log(array);

Output

textCopy
1[
2"HTML",
3"CSS",
4"JavaScript"
5]

Convert Map Keys

javascriptCopy
1const users = new Map([
2
3    [1,"Ankit"],
4
5    [2,"Rahul"]
6
7]);
8
9const ids = Array.from(users.keys());
10
11console.log(ids);

Output

textCopy
1[1,2]

Convert Map Values

javascriptCopy
1const names = Array.from(users.values());
2
3console.log(names);

Output

textCopy
1[
2"Ankit",
3"Rahul"
4]

Create Number Sequence

javascriptCopy
1const numbers = Array.from(
2
3    {
4        length:10
5    },
6
7    (_,index)=>index+1
8
9);
10
11console.log(numbers);

Output

textCopy
1[
21,2,3,4,5,
36,7,8,9,10
4]

Very useful for:

• Pagination
• Calendars
• Pagination Buttons
• Number Tables

Convert NodeList to Array

HTML

htmlCopy
1<ul>
2
3<li>Apple</li>
4
5<li>Banana</li>
6
7<li>Orange</li>
8
9</ul>

JavaScript

javascriptCopy
1const items = document.querySelectorAll("li");
2
3const array = Array.from(items);
4
5console.log(array);

Now all array methods become available.

Mapping While Creating

javascriptCopy
1const squares = Array.from(
2
3    [1,2,3,4],
4
5    number => number * number
6
7);
8
9console.log(squares);

Output

textCopy
1[
21,
34,
49,
516
6]

Array.of()

What is Array.of()?

Creates a new array from the provided arguments.

Syntax

javascriptCopy
1Array.of(element1,element2,...)

Example

javascriptCopy
1const numbers = Array.of(
2
3    10,
4    20,
5    30
6
7);
8
9console.log(numbers);

Output

textCopy
1[
210,
320,
430
5]

Why Use Array.of()?

Consider

javascriptCopy
1new Array(5);

Output

textCopy
1[ <5 empty items> ]

Now

javascriptCopy
1Array.of(5);

Output

textCopy
1[5]

This avoids confusion with the Array constructor.

Multiple Values

javascriptCopy
1const fruits = Array.of(
2
3    "Apple",
4
5    "Banana",
6
7    "Orange"
8
9);
10
11console.log(fruits);

Output

textCopy
1[
2"Apple",
3"Banana",
4"Orange"
5]

Array.isArray()

What is Array.isArray()?

Checks whether a value is an array.

Returns

• true
• false

Syntax

javascriptCopy
1Array.isArray(value);

Example

javascriptCopy
1const numbers = [
2
3    1,
4    2,
5    3
6
7];
8
9console.log(
10
11    Array.isArray(numbers)
12
13);

Output

textCopy
1true

Objects

javascriptCopy
1const user = {
2
3    name:"Ankit"
4
5};
6
7console.log(
8
9    Array.isArray(user)
10
11);

Output

textCopy
1false

String

javascriptCopy
1console.log(
2
3    Array.isArray("JavaScript")
4
5);

Output

textCopy
1false

Null

javascriptCopy
1console.log(
2
3    Array.isArray(null)
4
5);

Output

textCopy
1false

Nested Array

javascriptCopy
1const matrix = [
2
3    [1,2],
4
5    [3,4]
6
7];
8
9console.log(
10
11    Array.isArray(matrix)
12
13);

Output

textCopy
1true

Why Not Use typeof?

javascriptCopy
1typeof [];

Output

textCopy
1object

Arrays are technically objects.

Instead use

javascriptCopy
1Array.isArray([]);

Output

textCopy
1true

Real-World Example — API Validation

javascriptCopy
1function displayUsers(users){
2
3    if(!Array.isArray(users)){
4
5        throw new Error(
6
7            "Users must be an array."
8
9        );
10
11    }
12
13    users.forEach(user=>{
14
15        console.log(user);
16
17    });
18
19}
20
21displayUsers(
22
23    ["Ankit","Rahul"]
24
25);

Real-World Example — Pagination

javascriptCopy
1const pages = Array.from(
2
3    {
4        length:5
5    },
6
7    (_,index)=>index+1
8
9);
10
11console.log(pages);

Output

textCopy
1[
21,
32,
43,
54,
65
7]

Real-World Example — Random OTP Digits

javascriptCopy
1const otp = Array.from(
2
3    {
4        length:6
5    },
6
7    ()=>Math.floor(
8
9        Math.random()*10
10
11    )
12
13);
14
15console.log(otp.join(""));

Possible Output

textCopy
1583104

Real-World Example — Student Roll Numbers

javascriptCopy
1const rollNumbers = Array.from(
2
3    {
4        length:20
5    },
6
7    (_,index)=>1001+index
8
9);
10
11console.log(rollNumbers);

Output

textCopy
1[
21001,
31002,
41003,
5...
61020
7]

Comparison

Browser Support

Performance

Common Mistakes

Using typeof

Wrong

javascriptCopy
1typeof [];

Output

textCopy
1object

Correct

javascriptCopy
1Array.isArray([]);

Using new Array()

javascriptCopy
1new Array(5);

Creates empty slots instead of a single element.

Better

javascriptCopy
1Array.of(5);

Forgetting Array.from() Accepts Mapping

Instead of

javascriptCopy
1Array.from(data).map(...);

You can write

javascriptCopy
1Array.from(data, item => item * 2);

This is shorter and avoids an extra iteration in many cases.

Best Practices

• Use Array.from() to convert iterable objects like NodeList, Set, and Map into arrays.
• Use the optional mapping function in Array.from() for efficient transformation during creation.
• Prefer Array.of() over new Array() when creating arrays from values to avoid constructor ambiguity.
• Always use Array.isArray() instead of typeof to verify array types.
• Validate API responses with Array.isArray() before calling array methods.
• Use Array.from({ length: n }) for generating sequences, placeholders, or UI elements like pagination.

Mini Project — Dynamic Pagination Generator

index.html

htmlCopy
1<!DOCTYPE html>
2<html lang="en">
3<head>
4    <meta charset="UTF-8">
5    <title>Pagination Generator</title>
6</head>
7<body>
8
9<h2>Pagination</h2>
10
11<div id="pages"></div>
12
13<script src="script.js"></script>
14
15</body>
16</html>

script.js

javascriptCopy
1const totalPages = 10;
2
3const pages = Array.from(
4
5    {
6        length: totalPages
7    },
8
9    (_, index) => index + 1
10
11);
12
13const output = document.getElementById("pages");
14
15pages.forEach(page => {
16
17    output.innerHTML += `
18        <button>${page}</button>
19    `;
20
21});

Interview Questions

Q1. What is the difference between Array.from() and Array.of()?

• Array.from() converts iterable or array-like objects into arrays.
• Array.of() creates a new array from the provided arguments.

Q2. Why should you use Array.isArray() instead of typeof?

Because typeof [] returns "object", while Array.isArray() correctly identifies arrays.

Q3. Can Array.from() transform values while creating an array?

Yes. It accepts an optional mapping function as its second argument, allowing conversion and transformation in a single step.

Q4. What are common use cases for Array.from()?

• Converting NodeList to arrays.
• Converting Set and Map to arrays.
• Creating number ranges.
• Generating pagination buttons.
• Building placeholders for UI components.

Summary

In this module, you learned:

• The difference between static array methods and instance array methods.
• How Array.from() converts iterable and array-like objects into arrays.
• How to generate sequences and transform values using Array.from().
• How Array.of() creates arrays without the ambiguity of the Array constructor.
• Why Array.isArray() is the correct way to detect arrays.
• Practical use cases in DOM manipulation, API validation, pagination, and dynamic UI generation.
• Browser support, performance considerations, and interview-focused concepts.

Next Module: Phase 5 — Strings, where you'll begin mastering JavaScript string fundamentals, string methods, template literals, regular expressions, and advanced text-processing techniques used in modern web development.