We will learn various ways to swap two variable values in JavaScript. Let us understand the meaning of exchange with an example. For example, we have two variables called variable 1 and variable 2. When we assign the value of variable2 to variable1 and the value of variable1 to variable2, we can say that we have exchanged the values of variable1 and variable2.
We can create a temporary variable, which means any variable that can temporarily store the value of the first variable. Afterwards, 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.
Users can use temporary variables to exchange two variable values according to the following syntax.
let temporaryVariable = variable1; variable1 = variable2; variable2 = temporaryVariable;
In the above syntax, we store the value of variable 1 into a temporary variable. After we assign the value of variable2 to variable1 and assign the value of temporaryVariable to variable2.
In the example below, we create two variables and assign string values. Additionally, we use temporary variables to exchange two variable values. In the output, the user can see that the values of variable 1 and variable 2 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>
In the ES6 version of JavaScript, destructuring of arrays or objects was introduced. In array destructuring we can store array values into another or the same variable. Here we will create an array of two variables and destroy the array to swap the two variables.
Users can use the array destructuring attribute to exchange two variables according to the following syntax.
[var2, var1] = [var1, var2];
In the above syntax, we store the value of var1 into var2 and the value of var2 into var1.
In the example below, we use var1 and var2. After that, we created an array of two variables using var1 and var2. When destructuring the array, we assign the value of var1 to the var2 variable and the value of 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>
We can use the multiplication and division arithmetic operators to exchange two numbers. To swap two variables, we can perform arithmetic operations on two numerical values.
Users can use arithmetic operators to exchange two numeric variable values according to the following syntax.
num1 = num1 * num2; num2 = num1 / num2; num1 = num1 / num2;
In the above syntax, we first multiply two numbers and store them in the num1 variable. After that, we divide the new num1 variable (num1 * num2) with the num2 variable and store it in the num2 variable. Next, we divide the updated num1 (num1*num2) by the updated num2 and store it in the num1 variable.
In the following example, the swapNumbers() function swaps two numeric values. In the output of the example below, the user can observe the initial values of the num1 and num2 variables and the values after swapping the 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>
When we XOR any number with itself, it returns zero. Therefore, we will use this property of the bitwise XOR operator to swap two values.
Users can use the bitwise XOR operator to exchange two numbers according to the following syntax.
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 perform three bitwise XOR operations on num1 and num2, and exchange the num1 and num2 variable values twice.
In the following example, when the user clicks the swap variable button, a prompt box will pop up for numerical input. Then, in the output, the user can see the swapped 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 methods to exchange all variables, such as strings, Boolean values, numbers, etc. The third and fourth methods only work for sorting numerical values.
The above is the detailed content of How to swap two variables in JavaScript?. For more information, please follow other related articles on the PHP Chinese website!
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
