What’s the difference between toArray and makeArray in jQuery ?
In this article, we will learn the difference between the toArray() and makeArray() methods in jQuery.
JavaScript toArray() method: This method is used on DOM (Document Object Model) elements to convert them into a JavaScript array. We can iterate this array, calculate its length, and access the elements using their indices like a normal array. However, we cannot create an array from other array-like objects using this method. This is the main difference between the two functions.
Syntax:
let dom_array = $("p").toArray();
Example: In this example, we will see how toArray() can be used to convert DOM elements to an array and how it does not work with other types of data.
HTML
< script src = "https://code.jquery.com/jquery-3.6.0.js" > </ script > < h1 style = "color: green;" > w3wiki </ h1 > < p >Data Structures</ p > < p >Competitive Programming</ p > < p >Algorithms</ p > < button >Click Here</ button > < h3 >Output</ h3 > < div id = "output" ></ div > < script > let obj = { name: "Sam", age: 12 } $("button").click(function () { // Creating an array of paragraphs let para_array = $("p").toArray(); // Iterating over para_array // and appending the data in the div for (i = 0; i < para_array.length ; i++) { $("#output").append("Element: " + para_array[i].innerHTML + "<br>"); } // We cannot use toArray() on the object // as toArray() works only for DOM elements // let obj_array = jQuery.toArray(obj); // console.log(obj_array); }); </ script > |
Output:
JavaScript makeArray() method: This method is used on array-like objects to converts them to an array. We can then use normal array functions on that array. This method supports the conversion of DOM elements as they are array-like objects.
Syntax:
// Array using DOM elements let array = jQuery.makeArray($("p")); // Array using other array-like objects let array2 = jQuery.makeArray(array1, array2, array3);
Example: In this example, we will see how makeArray() can be used to convert all types of array-like elements including DOM elements.
HTML
< script src = "https://code.jquery.com/jquery-3.6.0.js" > </ script > < h1 style = "color: green;" > w3wiki </ h1 > < p >Data Structures</ p > < p >Competitive Programming</ p > < p >Algorithms</ p > < button >Click Here</ button > < h3 >Output</ h3 > < div id = "output" ></ div > < h3 >Output 2</ h3 > < div id = "output2" ></ div > < script > let obj = { name: "Sam", age: 12 } $("button").click(function () { // Creating an array of paragraphs let para_array = jQuery.makeArray($("p")); // Iterating over para_array // and appending the data in the first div for (let i = 0; i < para_array.length ; i++) { $("#output").append("Element: " + para_array[i].innerHTML + "<br>"); } // Creating an array of the object let obj_array = jQuery.makeArray(obj); // Iterating over obj_array // and appending the data in the second div for (let i = 0; i < obj_array.length ; i++) { $("#output2").append("Name: " + obj_array[i].name + " Age: " + obj_array[i].age + "<br>"); } }); </ script > |
Output:
Difference between toArray() and makeArray():
JavaScript toArray() Method |
JavaScript makeArray() Method |
---|---|
This method supports the conversion of DOM elements to an array. | This method supports the conversion of all array-like elements to an array. |
Only DOM elements are supported to be converted. Other array-like elements will throw an error. | All types of elements can be converted to an array including DOM elements. |
It does not take any parameters | It only takes one parameter which is an object. |
Its return value is the elements matched by the jQuery selector as an array. | Its return value is an array. |