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.

Aleš Kotnik · Accepted Answer · 2013-05-08 08:44:28Z

15

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.

edited May 8, 2013 at 8:44

answered May 8, 2013 at 7:20

Aleš Kotnik

2,75420 silver badges18 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Bergi Over a year ago

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

Aleš Kotnik Over a year ago

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

Zaheer Ahmed · Accepted Answer · 2013-05-08 07:03:51Z

3

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

edited May 8, 2013 at 7:03

answered May 8, 2013 at 6:52

Zaheer Ahmed

28.7k12 gold badges77 silver badges113 bronze badges

Comments

Steven Pribilinskiy · Accepted Answer · 2018-10-08 11:57:57Z

1

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.

edited Oct 8, 2018 at 11:57

answered Jun 10, 2015 at 9:07

Steven Pribilinskiy

2,0021 gold badge21 silver badges21 bronze badges

1 Comment

PHP Guru Over a year ago

You have a couple of small mistakes in this answer. First don't use the word POJO. They're called array-like objects. Second, [].slice.call() doesn't fill in empty slots with undefined. Only Array.from() does that. [].slice.call() leaves them empty.

Collectives™ on Stack Overflow

Difference between toArray and makeArray in jquery

3 Answers 3

2 Comments

Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related