Ways of Swapping Variables in Javascript

In technical interviews, you might be asked questions like,”how can you swap two variables without using temporary variable” or “how many swapping techniques are there in JavaScript“.

Knowing multiple ways to swap variables is beneficial. In this article, we will explore 4-5 different methods.

1. Destructuring Assignment.

2. Temporary Variable.

3. Arithmetic Operators:

   1. Using (+) addition & (-) difference.

   2. Using (*) multiplication & (/) division.

4. Bitwise XOR Operator.

5. Bitwise XNOR Operator.

1. Destructuring Assignment

Destructuring assignment lets us extract items of an array into variables. For example, the following code destructures an array. Knowing how to destructure an array, it's easy to use it for swapping variables. Let's swap the variables x and y using destructuring assignment:

let x = 10, y =9;
console.log('Before Swapping: ',x,y);// 10 9
[x, y] = [y, x];
console.log('After Swapping: ',x,y); // 9 10

[x, y] = [y, x] is the destructuring assignment that swaps the variables x and y.

On the right side of the destructuring, an array [y, x] is created which results to [9, 10].

Then the destructuring of the array occurs: [x, y] = [9, 10]. The variable x is assigned with10 & y with 9 and swapping of x and y has been performed.

This method of swapping variable is compatible with any data type like: numbers, strings, booleans, and objects.

2. Temporary Variable

Swapping variables using a temporary variable is one of the way. As the name itself says, this approach requires a temporary variable.

Let's swap the values of variables x and y using a temporary variable temp:

let x = 10, y = 9,temp;
console.log('Before Swapping: ',x,y);// 10 9
temp = x;
x = y;
y = temp;
console.log('After Swapping: ',x,y); // 9 10

temp is the temporary variable.

In the first step, temp is assigned with the value of x. Then x variable is assigned with the value of y. Finally, the variable y is assigned with the value of temp which is having the initial value of x).

Moreover, this approch of swapping variables works with any data type like: numbers, strings, booleans, and objects.

3. Arithmetic Operators

We can also swap variables having integers without the use of additional memory (like a temporary array or variable).

a). The below example swaps the variables x and y using the addition + and difference - arithmetic operators:

let x = 10, y = 9;   
console.log('Before Swapping: ',x,y);// 10 9
x = x + y; 
y = x - y; 
x = x - y; 
console.log('After Swapping: ',x,y);// 9 10

Initially, x is 10 and y is 9. Let's see how the 3 statements perform the swapping:

1. x = x + y assigns to x the value 10 + 9, which is now 19.

2. y = x - y assigns to y the value 19 - 9 = 10 (y is now 10).

3. x = x - y assigns to a the value 19 - 10 = 9 (x is now 9).

Finally, the swapping of x and y has been performed.x is 9 and y is 10.

b). The below example swaps the variables x and y using the mulitplication * and divison/ arithmetic operators:

let x = 10, y = 9;   
console.log('Before Swapping: ',x,y);// 10 9
x = x * y; 
y = x / y; 
x = x / y; 
console.log('After Swapping: ',x,y);// 9 10

Initially, x is 10 and y is 9. Let's see how the 3 statements perform the swapping:

1. x = x * y assigns to x the value 10 * 9, which is now 90.

2. y = x / y assigns to y the value 90 / 9 = 10 (y is now 10).

3. x = x / y assigns to a the value 90 /10 = 9 (x is now 9).

Finally, the swapping of x and y has been performed.x is 9 and y is 10.

This approach doesn't use temporary variables, it has this limitation though. We can swap integers only.

4. Bitwise XOR Operator

The XOR operator outputs true if the operands are different. Here’s a refresher to XOR truth table:

---------------
| x | y |x ^ y|
---------------
| 0 | 0 |  0  |
| 1 | 0 |  1  |
| 0 | 1 |  1  |
| 1 | 1 |  0  |
---------------

In JavaScript, the bitwise operators performs the bitwise operation on each bit of numbers. Same in the case of bitwsie XOR Operator.

Lets use XOR properties to swap the variables x and y.

let x = 10, y = 9;  
console.log('Before Swapping: ',x,y);// 10 9
x = x ^ y;
y = y ^ x;
x = x ^ y;
console.log('After Swapping: ',x,y);// 9 10

1. Initially, we are performing x = x ^ y on initial values of x & y and assigning it to x and here's how 10 ^ 9 evaluates to 3:

1010 (binary of 10)
1001 (binary of 9)
----
0011 (10^9 = 3 in binary)

2. We are performing y = y ^ x , now value of x is 3 from step-1 and y is still 9 and here's how 9 ^ 3 evaluates to 10:

1001 (binary of 9)
0011 (binary of 3)
----
1010 (9^3 = 10 in binary)

3. We are performing x = x ^ y , now value of x from step-1 is 3 and updated value of y is 10 from step-2 and here's how 3 ^ 10 evaluates to 9:

0011 (binary of 3)
1010 (binary of 10)
----
1001 (3^10 = 9 in binary)

Finally, we have the updated/swapped value of both x and y that is 9 and 10.

5. Bitwise XNOR Operator

The XNOR (exclusive-NOR) is a combination of an XOR followed by an inverter/negation. It outputs true if the inputs are the same and false if the inputs are different. Here’s a refresher to XNOR truth table:

------------------
| x | y |~(x ^ y)|
------------------
| 0 | 0 |    1   |
| 1 | 0 |    0   |
| 0 | 1 |    0   |
| 1 | 1 |    1   |
------------------

Likewise other bitwise operators, XNOR also performs the bitwise operation on each bit of numbers.

Lets use XNOR properties to swap the variables x and y.

let x = 10, y = 9;  
console.log('Before Swapping: ',x,y);// 10 9
x = ~(x ^ y);
y = ~(y ^ x);
x = ~(x ^ y);
console.log('After Swapping: ',x,y);// 9 10

1. We are performing x = ~(x ^ y) on initial values of x & y and assigning it to x and here's how ~(10 ^ 9) evaluates to 12:

1010 (binary of 10)
1001 (binary of 9)
----
1100 (~(10^9) = 12 in binary)

2. We are performing y = ~(y ^ x), now the value of x is 12 from step-1 and y is still 9 and here's how ~(9 ^ 12) evaluates to 10:

1001 (binary of 9)
1100 (binary of 12)
----
1010 (~(9^12) = 10 in binary)

3. We are performing x = x ^ y , now the value of x is 12 from step-1 and updated value of y is 10 from step-2 and here's how ~(12 ^ 10) evaluates to 9:

1100 (binary of 12)x
1010 (binary of 10)y
----
1001 (~(12^10) = 9 in binary)

Finally, we have the updated/swapped value of both x and y that is 9 and 10.

So here we conclude that JavaScript has several good ways to swap variables, with and without extra memory.

1. Destructuring Assignment: Use [x, y] = [y, x] to swap values. It's short and easy to understand. This is my preferred method.

2. Temporary Variable: Use a temporary variable to hold one value during the swap. This is a reliable alternative to destructuring.

3. Addition & Subtraction/Multiplication & Division: Swap integers without extra variables using addition and subtraction. However, this method only works for integers.

4. Bitwise XOR/XNOR: Another way to swap integers without extra memory is by using bitwise XOR/XNOR. Like the previous method, it's limited to integers only.