How to swap two variables in JavaScript ?

0 0 2 minutes read

The swapping process refers to changing the value from one variable to another variable. In this article, we will be learning about swapping 2 variables with Various Approaches.

We would be using various ways to swap variables:

Using 3rd variable.
Without using 3rd variable.
With the destructing assignment.

Approach 1: Using 3rd variable: Here we create a temporary variable that will hold the value of one of the variables to perform the operation.

Let’s say we create a temp variable that stores the value of a variable A.
Then we copy the value of B to A (A would be overwritten).
Then we copy the value of temp to B (earlier value of A).

Syntax:

temp = a;
a = b;
b = temp;

Note: Here, temp is the new 3rd variable that we are using to swap the value of variables a and b.

Example:

HTML

<script>
    var a = 20;
    var b = 10;
    var temp;
 
    console.log(`before swapping: a= ${a}`);
    console.log(`before swapping b= ${b}`);
 
    temp = a;
    a = b;
    b = temp;
 
    console.log(`after swapping a= ${a}`);
    console.log(`after swapping b= ${b}`);
</script>

Output:

before swapping: a= 20
before swapping b= 10
after swapping a= 10
after swapping b= 20

Approach 2: Without using 3rd variable: Here we would be using an arithmetic operation to swap 2 values.

Firstly, we add a + b to a (a would be greater than b as it is).
Now we subtract b from a so the value of b is now available to b
Now we subtract a with b again to a so a will have the value of B

Syntax:

a = a + b;
b = a - b;
a = a - b;

Example:

HTML

<script>
    var a=10;
    var b=20;
 
    console.log(`before swap a= ${a}`);
    console.log(`before swap a= ${b}`);
 
    a=a+b;//10=10+20 now a would be 30
    b=a-b;//20=30-10 now b would be 10
    a=a-b;//30=30-10 so a would be now 20
 
    console.log(`after swap a= ${a}`);
    console.log(`after swap a= ${b}`);
</script>

Output:

before swap a= 10
before swap a= 20
after swap a= 20
after swap a= 10

Approach 3: With destructing Assignment: Here we will be using destructing Assignment.

The destructing assignment makes it possible to unpack values from an array or object or from other properties into distinct variables.

Syntax:

[b,a]=[a,b];

Example:

HTML

<script>
    var a=40;
    var b=30;
 
    console.log(`before swap a= ${a}`);
    console.log(`before swap a= ${b}`);
 
    // a would be swapped to b and b would be swapped to a
    [b,a]=[a,b];
 
    console.log(`after swap a= ${a}`);
    console.log(`after swap a= ${b}`);
</script>

Output:

before swap a= 40
before swap a= 30
after swap a= 30
after swap a= 40

Note: When a large amount of data is concerned Destructing Assignment may helpful.

Where to use which method?

If the operation is related to a numeric value you can swap values with the arithmetic operation(2nd method).
If the operation is related to other types like string or boolean you can use the 1st method.