How to swap two array elements in JavaScript?

Front End Technology Javascript Web Development

In this tutorial, we use different approach to swap two array elements in JavaScript. For example, we swap first and second element of the array as

Input −

["first", "second", "third", "fourth", "fifth"]

Output −

["second", "first", "third", "fourth", "fifth"]

Here we swapped “first” and “second” value of the array.

Now we will look at different methods to swap two elements −

Using an extra variable
Using Array Splice() Method
Using Destructuring

Method 1: Using an Extra Variable

In this method, we will take the help of an extra variable name “temp” and then we do the following

We will copy the first element to temp.
Copy the second element value to the first element.
Copy the temp value to the second value.

Example

In the program below, we swap two elements of an array using an extra variable.

<!DOCTYPE html>
<html>
<head>
   <title>Swapping two array elements in a single line -TutorialsPoint</title>
</head>
<body>
   <p id = "before">Before swap array elements are:<br> </p>
   <p id="after">After swapping array elements are: <br></p>
   <script>
      var arr=["first", "second", "third", "fourth", "fifth"]
      document.getElementById("before").innerHTML+= arr
      var temp=arr[0];
      arr[0]=arr[1];
      arr[1]=temp;
      document.getElementById("after").innerHTML+=arr
   </script>
</body>
</html>

Method 2: Using Array Splice() Method

Using the splice() we can achieve swapping of the array. We will simply take out the element at specified position and then splice will return the array as value that was removed, at the end [0] is necessary condition for array splice method which indicates that splice will return single element in the return.

Example

The following program demonstrates how to swap two elements in an array using the Array splice method.

<html>
<head>
   <title>Swapping two array elements in a single line -TutorialsPoint</title>
</head>
<body>
   <h3>arr=["first", "second", "third", "fourth", "fifth"]</h3>
   <input type="button" value="Click to Swap" onclick="swap()"/>
   <h3 id="writeHere">After swapping array is:</h3>
   <script>
      function swap(){
         var arr=["first", "second", "third", "fourth", "fifth"]
         x=0, y=1
         var returnFromSplice=arr.splice(y, 1, arr[x])[0]
         arr[0]=returnFromSplice
         document.getElementById("writeHere").innerHTML=JSON.stringify(arr)
      }
   </script>
</body>
</html>

Method 3: One Liner Using Destructuring

We could use the destructuring to swap the two elements in an array. The main logic of swapping two elements can be done in one line.

Following is the syntax to swap two array elements in one line −

arr[n]=[arr[m], arr[m]=arr[n]][0]

Here n, m are the indexes of the elements to be swapped.

Example

Swapping Two Elements in One Line.

<html>
<body>
   <h3>arr=["first", "second", "third", "fourth", "fifth"]</h3>
   <input type="button" value="Click to Swap" onclick="swap()"/>
   <h3 id="writeHere">After swapping array is:</h3>
   <script>
      function swap(){
         let arr=["first", "second", "third", "fourth", "fifth"]
         arr[0]=[arr[1], arr[1]=arr[0]][0]
         document.getElementById("writeHere").innerHTML=JSON.stringify(arr)
      }
   </script>
</body>
</html>

Here we are assigning 0th element to 1st element, and using destructuring concept 1st array element will assigned to 0th element, at the end [0] denotes 1 value will be returned in from of an array, and it will get swapped.

So, this is some of the methods using which we can swap two array elements in the last method using one line only we can get our work done.