JavaScript Swap Two Variables Guide

Swapping two variables is a common task in programming. In JavaScript, you have several ways to exchange the values of two variables. Each method has its own strengths and use cases.

This guide covers the most popular techniques. You will learn how to swap variables using a temporary variable, destructuring assignment, arithmetic operations, and the XOR bitwise operator. We will also discuss when to use each approach.

Why Swap Variables?

Swapping variables is useful in sorting algorithms, data manipulation, and state management. For example, when you need to reorder elements in an array or exchange values between two variables during calculations.

Understanding different swap methods helps you write cleaner and more efficient code. Let's explore each technique with clear examples.

Method 1: Using a Temporary Variable

This is the most straightforward and readable method. You create a third variable to hold one value temporarily.

// Using a temporary variable
let a = 5;
let b = 10;

console.log("Before swap: a =", a, ", b =", b);

// Swap using a temporary variable
let temp = a; // Store value of a in temp
a = b;        // Assign value of b to a
b = temp;     // Assign original value of a (from temp) to b

console.log("After swap: a =", a, ", b =", b);

Before swap: a = 5 , b = 10
After swap: a = 10 , b = 5

Pros: Very easy to understand and debug. Works with any data type, including strings and objects.

Cons: Uses an extra variable, which some consider unnecessary for simple swaps.

Method 2: Using Destructuring Assignment

Destructuring assignment is a modern ES6 feature. It allows you to swap variables in a single line of code.

// Using destructuring assignment
let x = "hello";
let y = "world";

console.log("Before swap: x =", x, ", y =", y);

// Swap using destructuring
[x, y] = [y, x];

console.log("After swap: x =", x, ", y =", y);

Before swap: x = hello , y = world
After swap: x = world , y = hello

Pros: Clean, concise, and easy to read. Works with any data type. No extra variable needed.

Cons: Creates a temporary array under the hood, but this is negligible for most use cases.

This method is highly recommended for modern JavaScript development. If you are new to variables, check out our JavaScript Variable Declaration Guide to understand how let and const work.

Method 3: Using Arithmetic Operators

This technique works only with numbers. It uses addition and subtraction to swap values without a temporary variable.

// Using arithmetic operators (numbers only)
let m = 15;
let n = 25;

console.log("Before swap: m =", m, ", n =", n);

// Swap using arithmetic
m = m + n; // m becomes 40
n = m - n; // n becomes 15 (original m)
m = m - n; // m becomes 25 (original n)

console.log("After swap: m =", m, ", n =", n);

Before swap: m = 15 , n = 25
After swap: m = 25 , n = 15

Pros: No extra variables. Pure arithmetic.

Cons: Only works with numbers. Can cause overflow with very large integers. Less readable than other methods.

Be careful with this method. It can lead to unexpected results if you use floating-point numbers. For a deeper understanding of variable types, see our JavaScript Variable Types Guide.

Method 4: Using the XOR Bitwise Operator

XOR (exclusive or) is a bitwise operator that can swap integers without a temporary variable. This is a classic trick from low-level programming.

// Using XOR bitwise operator (integers only)
let p = 7;
let q = 13;

console.log("Before swap: p =", p, ", q =", q);

// Swap using XOR
p = p ^ q; // p becomes 10 (7 XOR 13)
q = p ^ q; // q becomes 7 (10 XOR 13)
p = p ^ q; // p becomes 13 (10 XOR 7)

console.log("After swap: p =", p, ", q =", q);

Before swap: p = 7 , q = 13
After swap: p = 13 , q = 7

Pros: Very efficient at the bit level. No extra variables.

Cons: Only works with integers. Code is hard to read and understand. Not recommended for beginners.

This method is rarely used in modern JavaScript. It is more of a curiosity than a practical tool. If you are interested in variable behavior in different contexts, read about JavaScript Variable Scope Explained.

Which Method Should You Use?

For most situations, the destructuring assignment is the best choice. It is clean, readable, and works with all data types.

The temporary variable method is also excellent for clarity, especially if you are teaching beginners or working in a team that values simplicity.

Avoid arithmetic and XOR methods unless you have a specific performance reason. They sacrifice readability for minor gains.

Practical Example: Swapping Array Elements

Swapping variables is often used to reorder elements in an array. Here is an example using destructuring.

// Swapping array elements
let arr = [1, 2, 3, 4, 5];
console.log("Original array:", arr);

// Swap first and last elements
[arr[0], arr[4]] = [arr[4], arr[0]];

console.log("After swap:", arr);

Original array: [1, 2, 3, 4, 5]
After swap: [5, 2, 3, 4, 1]

This pattern is common in sorting algorithms like bubble sort or selection sort.

Common Pitfalls

When swapping variables, watch out for these issues:

• Using const: You cannot reassign a constant variable. Always use let for variables you plan to swap.
• Type confusion: Arithmetic and XOR methods only work with numbers. Using them on strings will give unexpected results.
• Overflow: Very large numbers may overflow when using arithmetic methods.

Conclusion

Swapping two variables in JavaScript is simple once you know the techniques. The destructuring assignment is the modern, preferred method for its readability and versatility. The temporary variable approach remains a solid fallback for clarity.

Avoid arithmetic and XOR methods unless you have a specific need. They can introduce bugs and make your code harder to maintain.

Practice these methods in your projects. You will encounter swapping in sorting, data transformation, and many other algorithms. Mastering it will make you a more confident JavaScript developer.