🚨 Using with Statement in Strict Mode in JavaScript 🚨

---

📌 Introduction

The with statement in JavaScript allows access to an object’s properties without repeating the object name. However, it is forbidden in strict mode ("use strict") because it can cause ambiguity and make debugging difficult.

🚀 What You’ll Learn

✔️ What is the with statement?
✔️ How does with work in non-strict mode?
✔️ Why is with forbidden in strict mode?
✔️ Alternative ways to avoid with errors

---

1️⃣ What is the with Statement?

The with statement is used to reduce typing by allowing direct access to an object’s properties.

🔹 Example: Using with in Non-Strict Mode

const obj = { a: 10, b: 20 };

with (obj) {
    console.log(a); // Output: 10
    console.log(b); // Output: 20
}

🔹 Here, a and b are accessed directly inside with(obj), without using obj.a or obj.b.

---

2️⃣ Why is with Forbidden in Strict Mode?

Starting from ECMAScript 5 (ES5), "use strict"; disallows with because it makes code harder to understand and optimize.

🔴 Example: with in Strict Mode

"use strict";

const obj = { a: 10, b: 20 };

with (obj) { 
    console.log(a); // ❌ SyntaxError: Strict mode code may not include a with statement
}

🔴 Error Message:

SyntaxError: Strict mode code may not include a with statement

✅ Fix: Remove with and Access Properties Directly

"use strict";

const obj = { a: 10, b: 20 };

console.log(obj.a); // ✅ 10
console.log(obj.b); // ✅ 20

---

3️⃣ Why is with Problematic?

🔹 1. Variable Scope Ambiguity

When using with, JavaScript cannot determine whether a variable is part of the object or a globally declared variable.

let x = 100;
const obj = { x: 10 };

with (obj) {
    console.log(x); // 🤔 Is this 10 or 100?
}

⚠️ JavaScript first looks for x inside obj, but if x is not found, it falls back to the global variable, which can cause confusion.

---

🔹 2. Performance Issues

The with statement makes JavaScript engines slower because they cannot predict variable scope efficiently.

with (document) {
    console.log(getElementById("myElement"));  // 🔴 Slower execution
}

✅ Fix: Always Reference the Object Explicitly

console.log(document.getElementById("myElement"));  // ✅ Faster execution

---

🔹 3. Harder to Debug

If a variable name inside with does not exist in the object, it can accidentally refer to a global variable, leading to unexpected results.

let a = 50;
const obj = { b: 20 };

with (obj) {
    console.log(a); // 🤔 Does `a` exist in `obj`? If not, it takes global `a`
}

✅ Fix: Avoid with and Use Direct Object References

let a = 50;
const obj = { b: 20 };

console.log(obj.a ?? "Property not found"); // ✅ Avoid ambiguity

---

4️⃣ Alternatives to with

✅ 1. Use a Local Variable

Instead of with, store the object in a local variable.

const obj = { a: 10, b: 20 };
const { a, b } = obj;  // ✅ Destructure properties

console.log(a); // ✅ 10
console.log(b); // ✅ 20

---

✅ 2. Use this in Object Methods

If the object contains methods, use this to refer to properties.

const obj = {
    a: 10,
    b: 20,
    print() {
        console.log(this.a, this.b);
    }
};

obj.print(); // ✅ 10 20

---

✅ 3. Use a Function Scope

If you need to work with an object extensively, use a function to encapsulate operations.

const obj = { a: 10, b: 20 };

function processObject(o) {
    console.log(o.a); // ✅ 10
    console.log(o.b); // ✅ 20
}

processObject(obj);

---

5️⃣ Summary

🔹 Issue	🔹 Why with is Problematic
Scope Confusion	It makes it unclear if a variable belongs to the object or the global scope
Performance Slowdown	JavaScript engines cannot optimize with effectively
Debugging Issues	Harder to find errors because variables may refer to unintended scopes
Strict Mode Restriction	"use strict"; completely disallows with

---

🎯 Best Practices

✅ Always Use Explicit Object References
✅ Avoid with to Improve Code Readability & Performance
✅ Use this, Destructuring, or Functions Instead
✅ Enable "use strict"; in Your Code to Prevent Issues

Would you like more examples or explanations? 🚀