jQuery makeArray() Method

Beginner
6 min read
Updated: Oct 2026
5 examples
Live preview
jQuery.makeArray() — convert array-like objects into true JavaScript arrays
Definition

What Is jQuery.makeArray()?

jQuery.makeArray(obj) (alias $.makeArray) turns an array-like object into a true JavaScript Array (since jQuery 1.2) so you can use .reverse(), .map(), .pop(), and other native methods.

Remember
$.makeArray(obj)  → Array

// NodeList / HTMLCollection
var elems = document.getElementsByTagName("div");
var arr = $.makeArray(elems);
arr.reverse();

// jQuery collection
$.makeArray($("li"));  // plain array of DOM nodes

// Array.isArray(result) → true
NeedUse
Any array-like → array$.makeArray(obj)
jQuery collection only$(sel).toArray()
Native ES2015+Array.from(obj)
Approach

How to Use jQuery.makeArray()

Pass one array-like value; get back a real array.

  1. Start with a NodeList, HTMLCollection, jQuery object, or arguments.
  2. Call $.makeArray(obj).
  3. Use native array methods (reverse, map, filter, …).
  4. Wrap with $(arr) only if you need jQuery methods again.
PieceRequired?Role
objYesArray-like object to convert
Return—Plain JavaScript Array
Since—jQuery 1.2

Pseudocode

Pseudocode
function makeArray(obj):
    result = []
    for i from 0 to obj.length - 1:
        result.push(obj[i])
    return result   // true Array — no jQuery methods

// Official idea:
elems = document.getElementsByTagName("div")  // HTMLCollection
arr = $.makeArray(elems)
arr.reverse()
$(arr).appendTo(document.body)
Reference

Cheat Sheet

Keep these facts handy while converting array-like values.

TopicDetail
SyntaxjQuery.makeArray(obj)
SincejQuery 1.2
InputNodeList, jQuery, arguments, …
OutputPlain Array
jQuery methodsLost after conversion
vs toArray()Instance method on jQuery only
vs Array.from()Native ES2015+ cousin
Try it

Live Preview

Convert a sample array-like value with $.makeArray and inspect the result.

Browser demo of $.makeArray(obj) — same idea as the examples below.

Result
$.makeArray(getElementsByTagName("div"))
→ Array.isArray true, length 4
Code

jQuery Examples

Short, copy-ready snippets. Open DevTools Console, or use Try It Yourself for a live editor.

Example 1 — Convert a NodeList

Turn querySelectorAll into a real array.

jQuery
var nodeList = document.querySelectorAll("p");
var arr = $.makeArray(nodeList);

console.log(Array.isArray(nodeList)); // false
console.log(Array.isArray(arr));      // true
console.log(arr.length);              // number of <p> nodes
Try It Yourself

How It Works

  1. Select. querySelectorAll returns a NodeList — array-like, not an array.
  2. Convert. $.makeArray(nodeList) copies indexed items into a new array.
  3. Check. Array.isArray is false before and true after.
  4. Use. You can now call native array methods on arr.

Example 2 — Convert a jQuery Object

Official pattern: jQuery collection in, plain array out.

jQuery
var obj = $("li");
var arr = $.makeArray(obj);

console.log(typeof obj === "object" && !!obj.jquery); // true
console.log(Array.isArray(arr));                      // true
console.log(typeof arr.jquery);                       // "undefined"
Try It Yourself

How It Works

  1. jQuery object. $("li") is array-like and has a .jquery version string.
  2. Convert. $.makeArray(obj) yields DOM nodes in a plain array.
  3. Methods gone. arr.jquery is undefined — special jQuery features are dropped.
  4. Alternative. For collections only, $("li").toArray() does the same job.

Example 3 — Convert arguments

Turn the function arguments object into a joinable array.

jQuery
function collect() {
  return $.makeArray(arguments).join(", ");
}

console.log(collect("a", "b", "c")); // "a, b, c"
Try It Yourself

How It Works

  1. arguments. Inside a function it is array-like but not a real array.
  2. Convert. $.makeArray(arguments) unlocks .join().
  3. Join. Values become the string "a, b, c".
  4. Today. Rest params (...args) often replace this pattern in modern JS.

Example 4 — Official Demo: Reverse DOM Order

Convert an HTMLCollection, reverse it, and re-append the nodes.

jQuery
// <div>First</div><div>Second</div>…
var elems = document.getElementsByTagName("div");
var arr = $.makeArray(elems);
arr.reverse();
$(arr).appendTo(document.body);

console.log(arr.map(function (el) {
  return el.textContent;
}).join(", "));
Try It Yourself

How It Works

  1. Collect. getElementsByTagName returns a live HTMLCollection.
  2. Convert. $.makeArray makes a real array so .reverse() works.
  3. Reverse. Order becomes Fourth → First.
  4. Re-append. $(arr).appendTo(...) moves the nodes into that new order.

Example 5 — Map Text with Native .map()

Read list labels after converting a jQuery selection.

jQuery
var labels = $.makeArray($("li")).map(function (el) {
  return el.textContent.trim();
});

console.log(labels.join(" | ")); // "Apple | Banana | Cherry"
Try It Yourself

How It Works

  1. Select. $("li") is a jQuery collection of list items.
  2. Convert. $.makeArray yields a plain array of elements.
  3. Map. Native .map reads each node’s text.
  4. Join. Labels become a single display string.

Edge Cases & Pitfalls

Check these before converting collections in real projects.

methods

jQuery methods disappear

The result is a plain array. Call $(arr) again if you need .css(), .on(), or chaining.

live

HTMLCollections are live; arrays are not

getElementsByTagName updates as the DOM changes. After makeArray, you hold a fixed snapshot.

shape

Needs length + indexes

Plain objects without length are not array-like. Prefer real arrays or valid array-like shapes.

alt

toArray() vs Array.from()

Use .toArray() on a jQuery collection, or Array.from() in modern JS without jQuery.

Compatibility

Browser Support

jQuery.makeArray() needs a browser (or DOM) with jQuery loaded. It has been available since jQuery 1.2+ in all browsers your jQuery build supports.

✓ jQuery 1.2+ · Browsers

jQuery.makeArray()

Works in Chrome, Firefox, Safari, Edge, and other browsers with jQuery loaded. Convert NodeLists, jQuery objects, and arguments into true arrays.

100% Browser support
Google Chrome All versions · Desktop & Mobile
Full support
Mozilla Firefox All versions · Desktop & Mobile
Full support
Apple Safari All versions · macOS & iOS
Full support
Microsoft Edge All versions · Chromium & Legacy
Full support
Internet Explorer IE 6+ · Legacy environments
Full support
Opera All modern versions
Full support
$.makeArray() Browsers

Bottom line: Use $.makeArray(obj) whenever you need native array methods on an array-like value in jQuery code.

Analysis

Performance Notes

ApproachCostBest for
$.makeArray(obj)O(n)Any array-like in jQuery apps
$(sel).toArray()O(n)jQuery collections only
Array.from(obj)O(n)Modern JS without jQuery

Conversion copies references into a new array — cheap for typical DOM sizes. Prefer converting once, then chaining native methods, instead of converting repeatedly.

Remember

Key Takeaways

  • Role: $.makeArray(obj) → true JavaScript array.
  • Input: NodeList, jQuery, arguments, other array-likes.
  • Trade-off: gain native methods; lose jQuery methods.
  • Cousins: .toArray() / Array.from().

One line: $.makeArray(obj) turns array-like values into real arrays so .reverse(), .map(), and friends work.

Frequently Asked Questions

jQuery.makeArray(obj) converts an array-like object into a true JavaScript Array. It returns a plain array you can pass to native methods like .reverse(), .map(), and .filter(), or to jQuery utilities such as $.merge() and $.grep().
Any object with a numeric length and indexed values — NodeLists, HTMLCollections, the arguments object, jQuery collections, and custom { 0: 'a', 1: 'b', length: 2 } objects. Plain objects without length are not array-like.
makeArray() is a static utility that accepts any array-like input. toArray() is an instance method on a jQuery DOM collection only. Both produce a plain JavaScript array of DOM nodes when starting from a jQuery selection.
No. After conversion the result is a plain array. jQuery-specific methods on the original jQuery object are gone — wrap again with $() if you need jQuery methods on the elements.
Both convert array-like objects to arrays. Array.from() is native ES2015+. jQuery.makeArray() has been available since jQuery 1.2 and is a natural fit in jQuery codebases for NodeLists, jQuery objects, and the arguments object.
Use $.makeArray() when you already depend on jQuery, need to convert the arguments object, or want one consistent utility across NodeLists and jQuery objects. Modern code may use [...nodeList] or Array.from() when jQuery is not required.

Next: inArray()

Search for a value in an array and get its index with jQuery.

inArray() tutorial →

About the author

Mari Selvan M P
Mari Selvan M P 🔗

Developer, cloud engineer, and technical writer

  • Experience 12 years building web and cloud systems
  • Focus Full Stack Development, AWS, and Developer Education

I write practical tutorials so students and working developers can learn by doing—from databases and APIs to deployment on AWS.

AWS Certified Developer – Associate (Credly)

9 people found this page helpful

jQuery.merge() Method jQuery inArray() Method