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
What are the uses of the JavaScript WITH statement?
The WITH statement is used to specify the default object for the given property and allow us to prevent writing long lengthy object references. It adds the given object to the head of the scope chain.
Important: The with statement is deprecated and not recommended in modern JavaScript. It's disabled in strict mode and can cause performance and security issues.
Syntax
with (object) {
// statements
}
Basic Example
Here's how the with statement works with a simple object:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>JavaScript WITH Statement</title>
<style>
body {
font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
}
.result {
font-size: 20px;
font-weight: 500;
color: green;
margin: 20px 0;
}
</style>
</head>
<body>
<h1>JavaScript WITH Statement</h1>
<div class="result"></div>
<button class="btn">CLICK HERE</button>
<h3>Click the button to see the WITH statement in action</h3>
<script>
let resEle = document.querySelector(".result");
let btnEle = document.querySelector(".btn");
let obj = {
firstName: "Rohan",
lastName: "Sharma",
age: 25,
city: "Mumbai"
};
btnEle.addEventListener("click", () => {
// Using WITH statement
with (obj) {
resEle.innerHTML = "Welcome " + firstName + " " + lastName +
"<br>Age: " + age + "<br>City: " + city;
}
});
</script>
</body>
</html>
Problems with WITH Statement
The with statement has several issues that make it unsuitable for modern JavaScript:
- Performance: Slows down JavaScript engines
- Ambiguity: Makes variable resolution unclear
- Strict Mode: Completely banned in strict mode
- Debugging: Makes code harder to debug and maintain
Modern Alternative
Instead of using with, use destructuring assignment:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Modern Alternative to WITH</title>
</head>
<body>
<div id="output"></div>
<script>
let obj = {
firstName: "Rohan",
lastName: "Sharma",
age: 25,
city: "Mumbai"
};
// Modern approach using destructuring
const { firstName, lastName, age, city } = obj;
document.getElementById("output").innerHTML =
"Welcome " + firstName + " " + lastName +
"<br>Age: " + age + "<br>City: " + city;
</script>
</body>
</html>
Comparison
| Approach | Performance | Readability | Strict Mode | Recommended |
|---|---|---|---|---|
with statement |
Slow | Confusing | Forbidden | No |
| Destructuring | Fast | Clear | Allowed | Yes |
Conclusion
While the with statement can reduce repetitive object references, it's deprecated and causes performance issues. Use destructuring assignment instead for cleaner, more maintainable code.
1K+ Views
