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 variables in JavaScript?
We will learn to swap two variable values in JavaScript using various approaches. Let’s understand via example what swapping means. For example, we have two variables called variable1 and variable2. When we assign the values of variable2 to variable1 and the value of variable1 to variable2, we can say that we have swapped the values of variable1 and variable2.
Use the temporary variable
We can create a temporary variable, which means any variable to store the value of the first variable temporarily. After that, we can assign the value of the second variable to the first variable. Next, we can get the value of the first variable from the temporary variable and assign it to the second variable.
Syntax
Users can follow the syntax below to use the temporary variable to swap two variable values.
let temporaryVariable = variable1; variable1 = variable2; variable2 = temporaryVariable;
In the above syntax, we have stored the variable1’s value to the temporaryVariable. After we assigned variable2’s value to variable1 and temporaryVariable’s value to the variable2.
Example
In the example below, we have created the two variables and assigned string values. Also, we used the temporary variable to swap two variable values. In the output, users can see that the values of variable1 and variable2 are swapped.
<html>
<body>
<h2>Using the <i> temporary variable </i> to swap two variable values in JavaScript</h2>
<div id = "output"> </div>
<script>
let output = document.getElementById('output');
let variable1 = "Value1";
let variable2 = "Value2";
let temporaryVariable = variable1;
variable1 = variable2;
variable2 = temporaryVariable;
output.innerHTML += "The value of the variable1 and variable2 after swaping are the <br/>";
output.innerHTML += "variable1 = " + variable1 + " variable2 = " + variable2;
</script>
</body>
</html>
Use the Assignment destructuring property
In the ES6 version of JavaScript, the destructuring of the array or objects is introduced. In the array destructuring, we can store the array values to the other or the same variable. Here, we will create an array of both variables and destruct the array to swap two variables.
Syntax
Users can follow the syntax below to use the array destructuring property to swap two variables.
[var2, var1] = [var1, var2];
In the above syntax, we have stored the value of var1 to var2 and var2 to var1.
Example
In the example below, we have taken var1 and var2. After that, we created the array of two variables using the var1 and var2. While destructuring the array, we assign the value of var1 to the var2 variable and var2 to the var1 variable.
<html>
<body>
<h2>Using the <i>Assignment destructuring property</i> to swap two variable values in JavaScript </h2>
<div id="output"> </div>
<script>
let output = document.getElementById('output');
let var1 = 20;
let var2 = 10;
function swapVariables() {
[var2, var1] = [var1, var2];
output.innerHTML += "The value of the var1 and var2 after swaping are the <br/>";
output.innerHTML += "var1 = " + var1 + " var2 = " + var2;
}
swapVariables()
</script>
</body>
</html>
Use the Arithmetic operators
We can use the multiplication and division arithmetic operators to swap two numbers. To swap both variables, we can perform arithmetic operations on the two number values.
Syntax
Users can follow the syntax below to use the arithmetic operators to swap two numeric variable values.
num1 = num1 * num2; num2 = num1 / num2; num1 = num1 / num2;
In the above syntax, we have first multiplied both numbers and stored them in the num1 variable. Afterwards, we divided the new num1 variable (num1 * num2) with the num2 variable and stored it in the num2 variable. Next, we divided updated num1 (num1*num2) with updated num2 and stored it in the num1 variable.
Example
In the example below, the swapNumbers() function swaps two numeric values. In the output of the example below, users can observe the initial value of num1 and num2 variables and values after we have swapped two variables.
<html>
<body>
<h2>Using the <i>Arithmetic operators</i> to swap two variable values in JavaScript</h2>
<div id = "output"> </div>
<button onclick = "swapNumbers()"> Swap variables </button>
<script>
let output = document.getElementById('output');
function swapNumbers() {
let num1 = 2;
let num2 = 4;
output.innerHTML += output.innerHTML += "num1 = " + num1 + " num2 = " + num2 + "<br/>";
num1 = num1 * num2; // num1 == 8 (2*4)
num2 = num1 / num2; // num2 == 2 (8/4)
num1 = num1 / num2; // num1 == 4, (8/2)
output.innerHTML += "The value of the num1 and num2 after swaping are the <br/>";
output.innerHTML += "num1 = " + num1 + " num2 = " + num2;
}
</script>
</body>
</html>
Use the Bitwise XOR operator
When we perform the XOR operation of any numeric value with itself, it returns zero. So, we will use that property of the Bitwise XOR operator to swap two values.
Syntax
Users can follow the syntax below to use the Bitwise XOR operator to swap two numbers.
num1 = num1 ^ num2; // num1 == num1 ^ num2 num2 = num1 ^ num2; // num2 == (num1 ^ num2) ^ num2 == num1 num1 = num1 ^ num2; // num1 == (num1 ^ num2) ^ num1 == num2
In the above syntax, we have performed the Bitwise XOR operation of num1 and num2 three times two swap num1 and num2 variable values.
Example
In the example below, when the user clicks the swap variables button, the prompt box will pop up to take number input. Afterwards, in the output, users can see the swapped numeric values.
<html>
<body>
<h2>Using the <i>Bitwise XOR operator</i> to swap two variable values in JavaScript</h2>
<div id="output"> </div>
<button onclick = "swapNumbers()">Swap variables</button>
<script>
let output = document.getElementById('output');
function swapNumbers() {
let num1 = prompt("Enter first number value", 10);
let num2 = prompt("Enter second number value", 20);
output.innerHTML += output.innerHTML += "num1 = " + num1 + " num2 = " + num2 + "<br/>";
num1 = num1 ^ num2;
num2 = num1 ^ num2;
num1 = num1 ^ num2;
output.innerHTML += "The value of the num1 and num2 after swaping are the <br/>";
output.innerHTML += "num1 = " + num1 + " num2 = " + num2;
}
</script>
</body>
</html>
Users can use the first and second approaches to swap all variables such as string, boolean, numbers etc. The third and fourth approach is only useful for sorting the numeric values.
2K+ Views
