Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
How to swap two array elements in JavaScript?
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.
4K+ Views
