Difference between toArray and makeArray in jquery

Question

I'm trying to convert the DOM element as an collections of object. But I don't know what the main difference between toArray() and makeArray()

HTML

<div id="firstdiv">
   <div>foo1</div>
   <div>foo2</div>
   <div>foo3</div>
</div>

I used the following code to convert the nodes to an array:

JQUERY

console.log($("#firstdiv > div").toArray());
console.log($.makeArray($("#firstdiv").html()));

I can't quite understand the difference between them, and I've searched for this question but not found any clear explanation.

Thanks in advance.

Solution 1

According to jQuery documentation:

toArray is a method on jQuery Object (which is wrapper around a set of DOM elements). This method extracts members of this set of DOM elements to javascript Array:

jQuery('.some-class').toArray() -> [ dom_el_1, dom_el_2, dom_el_3, ... ] 

makeArray (which is a "static method" on jQuery object) takes array-like object (jQuery, arguments, nodeList, ...) and constructs a proper javascript Array from it, so you can call methods of Array on the result:

// returns a nodeList (which is array like item) but not actual array
// you can't call reverse on int
var elems = document.getElementsByTagName("div"); 
var arr = jQuery.makeArray(elems);
arr.reverse(); // use an Array method on list of dom elements
$(arr).appendTo(document.body);

In summary, toArray transforms jQuery element set to javascript Array, makeArray transforms any array like object to javascript Array.

Solution 2

The only difference is:

toArray() is DOM Element Methods and you can only used it on dom elements. while makeArray(object) can be used on your custom objects.

There is no other differences they are mostly same and return plain array object.

Example

You have any custom object:

function Person(name,age) {
  this.name = name;
  this.age = age;
}
var obj=new Person('abc',1);

now to use both function:

jQuery.makeArray(obj).length;  //would return 1

while:

obj.toArray().length;  //through the error function not defined

and

obj.length; //return undefined

Solution 3

As it was mentioned already toArray() is for jQuery objects.

$.makeArray() is similar to JS Array.prototype.slice.call() or [].slice.call() for short, though the latter instantiates an object with []

But there's a difference when processing POJOs with excessive length value

Examples

1.

$.makeArray({ 0:'a', 1:'b', length:1 })
// ["a"]

[].slice.call({ 0:'a', 1:'b', length:1 })
// ["a"]

2.

$.makeArray({ 0:'a', 1:'b', length:4 })
// { 0:'a', 1:'b', length:4 } // WUT?

[].slice.call({0:'a', 1:'b', length:4})
// ["a", "b", undefined, undefined]

3.

$.makeArray({12:'a', 13:'b', length:1})
// { 12:'a', 13:'b', length:1 } // WUT?

[].slice.call({12:'a', 13:'b', length:1})
// [undefined]

4.

$.makeArray({ 0:'a', 2:'b', length:2 })
// { 0:'a', 2:'b', length:2 } // WUT?

[].slice.call({ 0:'a', 2:'b', length:2 })
// ["a", undefined]

---

Thus $.makeArray() simply returns the input object whenever a key with particular index is not found.

It will work fine only when converting array-like objects with proper number of items in the array e.g. function's arguments, nodeList, jQuery collections, etc.

Comments

[Bergi]

Is there a difference between .get() and .toArray()?

[Aleš Kotnik]

.toArray() and .get() both return Array of nodes in jQuery result set. .get() accepts optional index parameter in which case it returns node at the index position or undefined if index is out of bounds.