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
Is it possible to de-structure to already-declared variables? In JavaScript?
Yes, it is possible to destructure to already-declared variables in JavaScript. However, you must wrap the destructuring assignment in parentheses to avoid syntax errors.
The Problem
When variables are already declared, JavaScript cannot distinguish between a block statement and destructuring assignment:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Destructuring Problem</title>
</head>
<body>
<script>
let name, age;
let person = { name: "Alice", age: 25 };
try {
{ name, age } = person; // This will cause an error
} catch (error) {
document.getElementById("result").innerHTML = "Error: " + error.message;
}
</script>
</body>
</html>
The Solution: Using Parentheses
Wrap the destructuring assignment in parentheses to make it work with already-declared variables:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Destructuring Solution</title>
<style>
body {
font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
}
.result {
font-size: 18px;
font-weight: 500;
color: rebeccapurple;
margin: 20px 0;
}
</style>
</head>
<body>
<button class="btn">CLICK HERE</button>
<h3>Click the button to destructure the person object</h3>
<script>
let resultElement = document.querySelector(".result");
let buttonElement = document.querySelector(".btn");
let name, age, person;
person = {
name: "Rohan",
age: 19
};
buttonElement.addEventListener("click", () => {
({ name, age } = person); // Parentheses are required!
resultElement.innerHTML = "name = " + name + "<br>age = " + age;
});
</script>
</body>
</html>
Why Parentheses Are Required
Without parentheses, JavaScript interprets {} as a block statement rather than object destructuring. The parentheses force JavaScript to treat it as an expression.
<!DOCTYPE html>
<html>
<body>
<script>
let a, b, obj;
obj = { a: 10, b: 20 };
// Correct: with parentheses
({ a, b } = obj);
document.getElementById("output").innerHTML =
"a = " + a + ", b = " + b;
</script>
</body>
</html>
Array Destructuring Example
The same principle applies to array destructuring with already-declared variables:
<!DOCTYPE html>
<html>
<body>
<script>
let x, y, numbers;
numbers = [100, 200, 300];
// Parentheses required for array destructuring too
([x, y] = numbers);
document.getElementById("array-result").innerHTML =
"x = " + x + ", y = " + y;
</script>
</body>
</html>
Comparison
| Scenario | Syntax | Works? |
|---|---|---|
| New variables | let {a, b} = obj; |
Yes |
| Existing variables (no parentheses) | {a, b} = obj; |
No - syntax error |
| Existing variables (with parentheses) | ({a, b} = obj); |
Yes |
Conclusion
You can destructure to already-declared variables by wrapping the assignment in parentheses. This prevents JavaScript from interpreting the curly braces as a block statement and ensures proper destructuring behavior.
183 Views
