Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
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.
9K+ Views
