Post
Ask Question

Swap Array Elements In JavaScript Using Array Prototype And Other Methods

In this tutorial, we will be using a function to swap array elements in JavaScript/jQuery. We will implement the same objective, using an Array.prototype.
 
Hence, let's start with the code.
 
Method 1
 
 Check the code, mentioned below. Here, I have used jQuery version 3.1.0. Inside the $(document).ready() section, we have declared an array and a Swap() function to swap the array elements. We are passing the actual array and the indexes to this function.
  1. <script src="https://code.jquery.com/jquery-3.1.0.js"></script>  
  2. <script type="text/javascript">  
  3.   
  4. $(document).ready(function(){  
  5.   
  6. var myArray = [18,3,90,25,2,27,36, 22, 4];  //Declare the array  
  7. var testString = '';  // declare a temporary variable to store the sorted array values.  
  8.   
  9. //Declare the function to swap the array elements using a third variable.  
  10. //Here we are passing the array indexes as well as the array itself   
  11. function Swap(arr,a, b){  
  12.    var temp;  
  13.    temp = arr[a];  
  14.    arr[a] = arr[b];  
  15.    arr[b] = temp;  
  16. }  
  17.   
  18. //Declare the function to sort the array  
  19. function Sort(array){  
  20.  for(var j = 0; j< array.length-1; j++){  
  21.      for(var k = 1; k< array.length; k++){  
  22.        if(array[k] < array[k - 1]){  
  23.         Swap(array,k,k-1)  //call the Swap function here  
  24.        }  
  25.      }  
  26.  }  
  27. }  
  28.   
  29. //Call the Sort Function with the array declared above  
  30. Sort(myArray);  
  31.   
  32. //Loop through the sorted array elements after swapping  
  33. for(var i = 0; i < myArray.length; i++){  
  34.   testString += ", " + myArray[i];  
  35. }  
  36.   
  37. alert(testString.substring(2));  // Display the sorted array after swapping  
  38.   
  39. });  
  40. </script> 
Method 2
 
In this method, we will implement the Swap() function with the Array.prototype builtin. Check with the code, mentioned below. I have added Swap() function to Array.prototype.
 
P.S 
 
This method should be avoided while working with multiple JS library, as it may create confusion.
  1. <script src="https://code.jquery.com/jquery-3.1.0.js"></script>  
  2. <script type="text/javascript">  
  3.   
  4. $(document).ready(function(){  
  5.   
  6. var myArray = [18,3,90,25,2,27,36, 22, 4];  
  7. var testString = '';  
  8.   
  9. //Declare the Swap function with Array.prototype. We are only passing the indexes here.  
  10. Array.prototype.Swap = function (x,y) {  
  11.   var b = this[x];  
  12.   this[x] = this[y];  
  13.   this[y] = b;  
  14.   return this; // return the current array instance.  
  15. }  
  16.   
  17.   
  18. //Declare the sort function  
  19. function Sort(array){  
  20.  for(var j = 0; j< array.length-1; j++){  
  21.      for(var k = 1; k< array.length; k++){  
  22.        if(array[k] < array[k - 1]){  
  23.          array.Swap(k,k-1)  // Call the Swap() function like this.  
  24.        }  
  25.      }  
  26.  }  
  27. }  
  28.   
  29. //call the Sort() function  
  30. Sort(myArray);  
  31.   
  32. for(var i = 0; i < myArray.length; i++){  
  33.   testString += ", " + myArray[i];  
  34. }  
  35.   
  36. alert(testString.substring(2)); // display the sorted array.  
  37.   
  38. });  
  39. </script> 
I hope, this will be helpful for the beginners in JavaScript. Please comment and provide the feedback, if you like my post. Thank you for reading.