Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
How to swap two array elements in JavaScript?
In this tutorial, we explore different approaches to swap two array elements in JavaScript. For example, we can swap the first and second elements of an array:
Input:
["first", "second", "third", "fourth", "fifth"]
Output:
["second", "first", "third", "fourth", "fifth"]
Here we swapped "first" and "second" values of the array.
We will explore three different methods to swap array elements:
Using a temporary variable
Using Array Destructuring (ES6)
Using Array splice() Method
Using a Temporary Variable
This classic approach uses an extra variable to temporarily store one element while swapping:
- Store the first element in a temporary variable
- Copy the second element to the first position
- Copy the temporary variable value to the second position
<!DOCTYPE html>
<html>
<head>
<title>Array Element Swapping - TutorialsPoint</title>
</head>
<body>
<p id="before">Before swap: </p>
<p id="after">After swap: </p>
<script>
var arr = ["first", "second", "third", "fourth", "fifth"];
document.getElementById("before").innerHTML += JSON.stringify(arr);
// Swap elements at index 0 and 1
var temp = arr[0];
arr[0] = arr[1];
arr[1] = temp;
document.getElementById("after").innerHTML += JSON.stringify(arr);
</script>
</body>
</html>
Before swap: ["first","second","third","fourth","fifth"] After swap: ["second","first","third","fourth","fifth"]
Using Array Destructuring (ES6)
ES6 destructuring assignment provides the cleanest way to swap array elements in a single line:
<!DOCTYPE html>
<html>
<head>
<title>Array Swapping with Destructuring - TutorialsPoint</title>
</head>
<body>
<p>Original: ["first", "second", "third", "fourth", "fifth"]</p>
<button onclick="swapElements()">Swap First Two Elements</button>
<p id="result"></p>
<script>
function swapElements() {
let arr = ["first", "second", "third", "fourth", "fifth"];
// Swap using destructuring assignment
[arr[0], arr[1]] = [arr[1], arr[0]];
document.getElementById("result").innerHTML = "After swap: " + JSON.stringify(arr);
}
</script>
</body>
</html>
Using Array splice() Method
The splice() method can remove and replace elements simultaneously. This approach extracts one element and replaces another in the same operation:
<!DOCTYPE html>
<html>
<head>
<title>Array Swapping with Splice - TutorialsPoint</title>
</head>
<body>
<p>Original: ["first", "second", "third", "fourth", "fifth"]</p>
<button onclick="swapWithSplice()">Swap Using Splice</button>
<p id="spliceResult"></p>
<script>
function swapWithSplice() {
var arr = ["first", "second", "third", "fourth", "fifth"];
var x = 0, y = 1; // indices to swap
// splice(y, 1, arr[x]) removes element at y and replaces with arr[x]
// Returns array containing the removed element
var removedElement = arr.splice(y, 1, arr[x])[0];
arr[x] = removedElement;
document.getElementById("spliceResult").innerHTML = "After swap: " + JSON.stringify(arr);
}
</script>
</body>
</html>
Comparison
| Method | Readability | Performance | ES6 Support Required |
|---|---|---|---|
| Temporary Variable | Good | Fast | No |
| Destructuring | Excellent | Fast | Yes |
| splice() Method | Fair | Slower | No |
Conclusion
ES6 destructuring assignment offers the cleanest syntax for swapping array elements. For older JavaScript environments, the temporary variable approach remains reliable and efficient.
5K+ Views
