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;">
    GeeksforGeeks
</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;">
    GeeksforGeeks
</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.