Reorder an array in JavaScript



The given task is to reorder an array in JavaScript.

We can reorder the elements in the array by using the following methods. One of the ways to achieve the above task is b using sort() method.

The sort() is an in-built method in JavaScript, which sorts the alphabetic elements. By default, it sorts in ascending order.

Example

Following is the example where the array got reordered in ascending order −

<!DOCTYPE html> <html> <body> <p id="para1"></p> <p id="para2"></p> <script> const States = ["Telangana", "Uttar Pradesh", "Karnataka", "Kerala", "TamilNadu"]; document.getElementById("para1").innerHTML = States; States.sort(); document.getElementById("para2").innerHTML = States; </script> </body> </html>

As we can see, the sort() method sorted the elements of the array in ascending order −

reverse() method

The reverse() method will reverse an array of elements. The first element will be placed at last and last element will be placed at first. This method will change the original array.

const array = ['welcome', 'Tutorials', 'point']; const rev = array.reverse(); console.log(rev); // output: ["three", "two", "one"] console.log(array); // output: ["three", "two", "one"]

Example 1

In the example below we have changed the order of array by reversing the elements −

<!DOCTYPE html> <html> <body> <p id="para1"></p> <p id="para2"></p> <script> const cities = ["vizag", "Hyderabad", "bangalore", "Guragaon"]; document.getElementById("para1").innerHTML = cities; cities.reverse(); document.getElementById("para2").innerHTML = cities; </script> </body> </html>

The reverse() method has returned the array elements in the reverse order in the following output −

Example 2

In the example below, we have declared an array with integer values in it. And we have performed swapping to reorder the array elements. With the help of temp variable, we have shifted the array elements.

<!DOCTYPE html> <html> <body> <p id="para1"></p> <p id="para2"></p> <script> let array = [23, 53, 12, 87, 9]; document.getElementById("para1").innerHTML = "The array: " + array; temp = array[1]; array[1] = array[0]; array[0] = temp; temp = array[3]; array[3] = array[2]; array[2] = temp; document.getElementById("para2").innerHTML = "After the array got swapped: " + array; </script> </body> </html>

Using the Compare() function

Alternative way to reorder the array elements is by using compare() function. This function could be a parameter of sort() method.

But, there is a problem with sort() method that it will not sort the array of integer elements as because it converts the elements into strings and then comparing their sequences with UTF-16 code unit values.

const array = [12,34,564,1232134];
array.sort();
console.log(array);
// output: [12, 1232134, 34, 564]

Using sort() function

We can eradicate this by the compare function. This function will return negative, zero, or positive values, depending upon the arguments we compare.

This is the syntax of the compare function

function(a, b){return a - b}

The sort() function will compare two values and will send the values to compare function, then it will sort the values according to output.

  • If the output is negative, a will be sorted before b.

  • If the output is 0 (zero), no changes will happen.

  • If the output is positive, b will be sorted before a.

For example, we have two values 10, 90(a, b), when the function calculates 10 – 90. The output is negative, so the sort function will place 40 will be sorted before 100.

Example

Following is an example for reordering the elements of the array by using compare function −

<!DOCTYPE html> <html> <body> <p>Reordering the array in ascending order:</p> <button onclick = "Asc()"> Click Asc </button> <button onclick = "Desc()"> Click Desc </button> <p id="demo1"></p> <p id="demo2"></p> <script> const points = [64, 23, 13, 75, 86]; function Asc(){ points.sort(function(a, b){return a - b}); // Ascending order document.getElementById("demo1").innerHTML = points; } function Desc(){ points.sort(function(a, b){return b - a}); // Descending order document.getElementById("demo2").innerHTML = points; } </script> </body> </html>

The output of the above code will return the array elements in both ascending and descending order which leads to reordering the elements of the array.


Advertisements