jQuery jQuery.makeArray() Method

What You’ll Learn

The jQuery.makeArray() utility turns array-like objects into real JavaScript arrays. This tutorial covers syntax, five worked examples with NodeLists and jQuery collections, comparisons with toArray() and Array.from(), and when conversion unlocks native array methods.

Introduction

Not everything that looks like an array is an array. DOM APIs return NodeLists; jQuery selections expose .length and [0] indexing but lack native methods like .reverse() and .map() (unless you use jQuery’s own helpers).

jQuery.makeArray() (also written $.makeArray()) bridges that gap: pass any array-like object, get back a genuine JavaScript Array you can use with ES5+ array methods or feed into utilities like $.merge() and $.grep().

Understanding the jQuery.makeArray() Method

jQuery.makeArray(obj) copies indexed values from obj into a new array from index 0 to obj.length - 1. The return value is always a plain array — special features of the source (jQuery methods, NodeList live binding in some browsers) are not carried over.

After conversion you can call any native array method. To get jQuery behavior back on DOM nodes, wrap the result: $( $.makeArray(nodeList) ).

📝 Syntax

General form of jQuery.makeArray:

jQuery.makeArray( obj )
// or
$.makeArray( obj )

Parameters

• obj — any array-like object to convert: NodeList, HTMLCollection, jQuery collection, arguments, or a custom object with length and numeric keys.

Return value

• A new true JavaScript Array containing the indexed values from obj.

Minimal workflow

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

console.log(Array.isArray(arr)); // true

Examples Gallery

Each example uses $.makeArray(). Open DevTools or use the Try-it links to run them interactively.

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> elements

false
true
3

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

console.log($obj.jquery !== undefined); // true — still a jQuery object
console.log(Array.isArray(arr));        // true — plain array of DOM nodes

true
true

function collect() {
  var args = $.makeArray(arguments);
  return args.join(", ");
}

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

a, b, c

// NodeList from getElementsByTagName — array-like, no .reverse()
var elems = document.getElementsByTagName("div");
var arr = $.makeArray(elems);

arr.reverse();           // native Array method now works
$(arr).appendTo("body"); // re-wrap and move nodes

Divs reversed in the DOM (Fourth, Third, Second, First)

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

console.log(labels.join(" | "));
// e.g. "Apple | Banana | Cherry"

Apple | Banana | Cherry

🚀 Common Use Cases

• DOM reordering — reverse or sort NodeLists before re-inserting elements.
• Function arguments — convert arguments to a real array in pre-ES6 code.
• Utility compatibility — feed NodeLists into $.merge() or $.grep() on older jQuery.
• Native array methods — use .filter(), .slice(), or .reduce() on jQuery selections.
• Interop with non-jQuery APIs — pass a true array to libraries that reject array-like objects.
• Extract DOM nodes — get plain element references out of a jQuery wrapper.

📝 Notes

• Available since jQuery 1.2.
• The source object is not modified — a new array is allocated.
• Shallow copy: array elements are references (DOM nodes, objects), not deep clones.
• Objects with incorrect length (sparse or padded) may produce unexpected results — input should be genuinely array-like.
• After conversion, wrap with $() to restore jQuery methods on DOM nodes.
• On jQuery selections only, .toArray() is a convenient instance-method alternative.

💡 Best Practices