In this quick tutorial, you’re going to learn how you can, in JavaScript, swap two variables. You’ll learn how to approach this in several different ways according to your situation. First, we’ll see how to swap variables two variables of any type, then we’ll move to other techniques to swap numbers specifically.
So, let’s dive in…
Swap Two Variables of Any Data Type in JavaScript
In this first section, we’ll see how to swap variables in JavaScript by using a temporary variable and using the array restructuring assignment.
1. Using a Temporary Variable
For this technique, we create a temporary variable to store one of our variables that we want to swap and acts as a bridge between them. Here’s a code snippet for how to do it,
//two variables
let variableOne = "ABC";
let variableTwo = "EFG";
//logging before
console.log("Before ==>");
console.log("variableOne= ", variableOne);
console.log("variableTwo= ", variableTwo);
//create a temporary variable
let tempVariable;
//swap
tempVariable = variableOne;
variableOne = variableTwo;
variableTwo = tempVariable;
//Testing after
console.log("After ==>");
console.log("variableOne= ", variableOne);
console.log("variableTwo= ", variableTwo);
//Output:
/*
Before ==>
variableOne= ABC
variableTwo= EFG
After ==>
variableOne= EFG
variableTwo= ABC
*/So, as you can see, we successfully swapped the two variables. In order to do that, we,
- Created a temporary variable tempVariable
- Assigned variableOne‘s value to tempVariable
- Assigned variableTwo‘s value to variableOne
- Assigned tempVariable’s value to variableTwo, and the swapping is done!
2. Using the Array Destructuring Assignment
Using the ES6 feature of the array destructuring assignment is an elegant way to swap variables in JavaScript without a temporary variable.
//two variables
var a = true;
var b= false;
//logging before
console.log("Before ==>");
console.log("a = ", a);
console.log("b = ", b);
//swap variables without using temp
[b, a] = [a, b];//Using the destructuring feature in js
//Testing after
console.log("After ==>");
console.log("a = ", a);
console.log("b = ", b);
//Output:
/*
Before ==>
a = true
b = false
After ==>
a = false
b = true
*/Watch this short video for a quick demonstration, and consider subscribing to our channel 😉
In this technique, we took advantage of the destructuring assignment at line 11 to swap the variables,
- First, we’re creating a temporary array for our two variables [a, b],
- Then, we’re unpacking the values of the array [b, a] into the distinct variables to store values from the temporary array respectively in the order they appear.
- The value of a (true) goes to the variable b, and in the same way, the value of b (false) goes to the variable a.
Swap Two Numbers in JavaScript
Besides the two above techniques, you can use the following two techniques to swap numbers,
1. Using Arithmetic Operators
If you don’t want to use a temp variable or the destructuring assignment, you might consider using arithmetic operators to achieve the same thing. Here’s an example of using addition and obstruction to swap variables (two numbers to be more specific) in Javascript,
//two variables
var a = 62;
var b = 54;
//logging before
console.log("Before ==>");
console.log("a = ", a);
console.log("b = ", b);
//swap variables using + and -
a = a + b;
b = a - b;
a = a - b;
/*
//swap variables using * and /
a = a * b;
b = a / b;
a = a / b;
*/
//Testing after
console.log("After ==>");
console.log("a = ", a);
console.log("b = ", b);
//Output:
/*
Before ==>
a = 62
b = 54
After ==>
a = 54
b = 62
*/So, to swap variables, we’re,
- Adding up the two numbers first (a + b = 116).
- Subtracting the value of a from the value of b and assigning it to a (a=54).
- Repeat 2 and assign the value to b (b = 62).
You can use multiplication and division to swap two numbers in JavaScript (See lines 16,17 and 18 in the example above)
2. Using the Bitwise XOR Operator
In this last technique, you can use the bitwise XOR operator to swap two numbers in JavaScript. This operator evaluates at the level of the binary representation of numbers. So, when you apply the XOR operator on two numbers, it’s going to take them digit(bit) by digit from each number. If the two bits are different, the result is going to be 1, and 0 otherwise. To better understand that, let’s have a look at the following example,
//two variables
var a = 2;
var b = 5;
//logging before
console.log("Before ==>");
console.log("a = ", a);
console.log("b = ", b);
//swap variables using xor operator
a = a ^ b
b = a ^ b
a = a ^ b
//Testing after
console.log("After ==>");
console.log("a = ", a);
console.log("b = ", b);
//Output:
/*
Before ==>
a = 2
b = 5
After ==>
a = 5
b = 2
*/So, the swap is done after applying the XOR operator,
- In line 11, we have a(010) ^ b(101) = 111 = 7 (in the decimal representation). The value is assigned to the variable a.
- In line 12, a(111) ^ b(101) = 010 = 2 (in the decimal representation). The value is assigned to b.
- In line 13, a(111) ^ b(010) = 101 = 5 (in the decimal representation). The value is assigned to a. And finally, the swap is done successfully.
This is for how can you effectively swap two variables in JavaScript. Use these techniques accordingly to the situation. You might use the two first ones for numbers, strings, booleans, or objects. Nevertheless, the two last ones are specific to numbers only.
If you want to learn JavaScript from scratch for FREE, I have a dedicated course for that. I think it’s a good opportunity to build solid foundations to start your web development (or mobile/desktop development) journey. You can enrol now and start learning.
Learn JavaScript from Scratch for FREE
This course will teach you modern core JavaScript from the basic fundamentals to advanced topics. It is intended to make you learn JavaScript from scratch apart from its use for frontend/backend development or whatever. It aims mainly to give you an opportunity to build a solid foundation to become a better JavaScript developer no matterHappy coding and happy learning 😉