with in JavaScript: Its Advantages and Why It Is Not Used Anymore

The with statement is one of those lesser-known features of JavaScript that often gets overlooked in conversations about the language’s quirks. It might look like a neat trick to cut down on code verbosity, but it’s kind of fallen out of favour with developers because of the big problems it can cause. In this article, we’ll check out the benefits that with was meant to provide and dive into why it’s not really recommended anymore.

What Is the with Statement?

The with statement was introduced in JavaScript to provide a convenient way to work with object properties. It allows you to treat the properties of an object as though they were local variables, reducing the need to repeatedly reference the object.

Advantages of Using with

1. Reduced Repetition: The primary advantage of with is that it reduces the need to repeatedly type the object name when accessing multiple properties. This can be particularly helpful when working with objects that have many properties or when dealing with deeply nested objects.

Example without with:

let person = {
  name: "Alice",
  age: 30,
  city: "Wonderland"
};

console.log(person.name);
console.log(person.age);
console.log(person.city);

Example with with:

let person = {
  name: "Alice",
  age: 30,
  city: "Wonderland"
};

with (person) {
  console.log(name);
  console.log(age);
  console.log(city);
}

seems like a quick and easy way to do this right?

2. Simplified Code: For developers looking to write quick, concise code, especially in the early days of JavaScript, with seemed like a useful tool. It simplified the process of accessing multiple properties from an object, making the code easier to write and potentially easier to read.

Why with Is Not Used Anymore

Despite these advantages, the with statement is now widely discouraged and rarely used in modern JavaScript development. Here’s why:

Get Devansh Walia’s stories in your inbox

Join Medium for free to get updates from this writer.

Remember me for faster sign in

1. Ambiguity and Confusion: The with statement introduces significant ambiguity into the code. When you use with, it becomes unclear whether a variable or property inside the with block refers to a local variable, a global variable, or a property of the object passed to with.

Example of Ambiguity:

let a = 10;
let obj = { a: 20, b: 30 };

function test() {
  with (obj) {
    console.log(a); // Does this refer to obj.a or the global a?
  }
}
test();

This ambiguity can lead to bugs that are hard to track down, especially in large codebases or when multiple developers are working on the same code.

2. Performance Issues: Modern JavaScript engines optimise code by analysing the scope of variables. The with statement, however, disrupts this optimisation because it dynamically changes the scope at runtime. This makes it difficult for JavaScript engines to optimise the code, leading to slower execution.

3. Strict Mode Incompatibility: JavaScript’s strict mode, introduced in ECMAScript 5, is designed to enforce better coding practices and prevent common errors. The with statement is forbidden in strict mode due to its potential to create unpredictable and error-prone code. As strict mode is often recommended (and sometimes required) in modern development, this further discourages the use of with.

4. Poor Code Maintainability: Code that uses with is harder to maintain and debug. When you or another developer revisit the code later, it’s challenging to determine which object a variable refers to within a with block. This lack of clarity makes the code more error-prone and less maintainable.

Modern Alternatives to with

In modern JavaScript development, there are safer and more effective alternatives to achieve the same goals that with was intended to address:

1. Destructuring: ES6 introduced destructuring assignment, which allows you to extract multiple properties from an object into local variables in a clear and concise manner.

let person = { name: "Alice", age: 30, city: "Wonderland" };
let { name, age, city } = person;

console.log(name); // Alice
console.log(age);  // 30
console.log(city); // Wonderland

2. Explicit Assignments: You can assign object properties to local variables directly, ensuring clarity and reducing ambiguity.

let name = person.name;
let age = person.age;
let city = person.city;

console.log(name); // Alice
console.log(age);  // 30
console.log(city); // Wonderland

These alternatives not only provide the same benefits as with but also maintain the clarity, performance, and maintainability of the code.

Conclusion

The with statement was introduced with the intention of simplifying and reducing the verbosity of JavaScript code. However, its potential for creating ambiguity, performance issues, and maintenance headaches has led to its decline in usage. Modern JavaScript offers better tools and practices, such as destructuring and explicit assignments, that achieve the same goals in a more reliable and clear manner. As a result, with has largely been relegated to the annals of JavaScript history, serving as a reminder of how language features can evolve over time.