Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
How to swap variables using Destructuring Assignment in JavaScript?
The Destructuring assignment is a feature that was introduced in the ECMAScript 2015. This feature lets the user extract the contents of the array, and properties of an object into distinct variables without actually writing the repetitive code.
This assignment lets the expression unpack values from arrays, and properties into distinct variables. One of the most elegant use cases is swapping variables without using a temporary variable.
Traditional Variable Swapping
Before destructuring, swapping variables required a temporary variable:
<!DOCTYPE html>
<html>
<head>
<title>Traditional Variable Swap</title>
</head>
<body>
<h1 style="color: green;">
Welcome To Tutorials Point
</h1>
<script>
let x = "First";
let y = "Second";
console.log("Before swap - x:", x, "y:", y);
// Traditional method using temporary variable
let temp = x;
x = y;
y = temp;
console.log("After swap - x:", x, "y:", y);
</script>
</body>
</html>
Before swap - x: First y: Second After swap - x: Second y: First
Basic Variable Swapping with Destructuring
With destructuring assignment, we can swap variables in a single, elegant line:
<!DOCTYPE html>
<html>
<head>
<title>Variable Swap with Destructuring</title>
</head>
<body>
<h1 style="color: green;">
Welcome To Tutorials Point
</h1>
<script>
let x = "First";
let y = "Second";
console.log("Before swap - x:", x, "y:", y);
// Swap using destructuring assignment
[x, y] = [y, x];
console.log("After swap - x:", x, "y:", y);
</script>
</body>
</html>
Before swap - x: First y: Second After swap - x: Second y: First
Swapping Multiple Variables
Destructuring also allows you to swap multiple variables simultaneously:
<!DOCTYPE html>
<html>
<head>
<title>Multiple Variable Swap</title>
</head>
<body>
<h1 style="color: green;">
Welcome To Tutorials Point
</h1>
<script>
let a = 1;
let b = 2;
let c = 3;
console.log("Before swap - a:", a, "b:", b, "c:", c);
// Swap all three variables in one line
[a, b, c] = [c, a, b];
console.log("After swap - a:", a, "b:", b, "c:", c);
</script>
</body>
</html>
Before swap - a: 1 b: 2 c: 3 After swap - a: 3 b: 1 c: 2
Advanced Example with Rest Operator
You can combine destructuring with the rest operator when working with arrays:
<!DOCTYPE html>
<html>
<head>
<title>Destructuring with Rest Operator</title>
</head>
<body>
<h1 style="color: green;">
Welcome To Tutorials Point
</h1>
<script>
let arr = ["First", "Second", "Third", "Fourth", "Fifth"];
let [x, y, ...rest] = arr;
console.log("Before swap - x:", x, "y:", y);
console.log("Rest elements:", rest);
// Swap x and y using destructuring
[x, y] = [y, x];
console.log("After swap - x:", x, "y:", y);
console.log("Rest elements:", rest);
</script>
</body>
</html>
Before swap - x: First y: Second Rest elements: ["Third", "Fourth", "Fifth"] After swap - x: Second y: First Rest elements: ["Third", "Fourth", "Fifth"]
Comparison of Methods
| Method | Code Lines | Readability | Performance |
|---|---|---|---|
| Temporary Variable | 3 lines | Good | Fast |
| Destructuring Assignment | 1 line | Excellent | Fast |
Conclusion
Destructuring assignment provides a clean and elegant way to swap variables in JavaScript without temporary variables. It's particularly useful for swapping multiple variables simultaneously and makes code more readable and concise.
335 Views
