JavaScript has a statement called “with” that changes how code accesses object properties. The”with” Function makes a temporary scope, so you can use object keys with less text. This guide explains what “with” does, how it works, and why developers avoid it now.
Table of Content
Understand the “with” Function in JavaScript
The with statement runs a block of code in the scope of a chosen object. Inside that block, you can use the object’s keys without repeating the object name.
Here is the syntax:
with (objectName) {
// code that uses object keys
}This tells JavaScript to treat the object’s keys as local variables inside the block.
Some code needs short access to many keys in one object. The with statement allows that but can confuse scope rules in large code.
Let’s look at an example to understand that:
let user = {name: "Ali", age: 25};
with (user) {
console.log(name);
console.log(age);
}This prints the two values without writing user.name or user.age inside the block.
The with statement changes how variables are looked up inside its block. JavaScript checks the object’s keys first, then other scopes.
Examples of “with” Function in JavaScript
Read Properties Without Full Path:
let car = {brand: "Toyota", model: "Corolla"};
with (car) {
console.log(brand);
console.log(model);
}This code prints the brand and model without the object name because the block scope points to car.
Mix Local Variables and Object Properties:
let data = {x: 5, y: 10};
let z = 15;
with (data) {
console.log(x + y + z);
}It shows how with reads x and y from the object, but still reads z from the outer scope.
Shadowing Variables:
let value = 50;
let obj = {value: 100};
with (obj) {
console.log(value);
}This prints 100 because the with block uses value from obj before the outer one.
Change Object Property Inside Block:
let profile = {name: "Sara", age: 22};
with (profile) {
age = 23;
}
console.log(profile.age);It changes the age property on profile because the assignment happens inside the with scope.
Wrapping Up
You learned what the with statement in JavaScript does and how it changes the scope for object keys.
Here is a quick recap:
- The with statement lets you use object keys directly inside a block of code. That does not need you to write the object name.
- This may cause scope confusion when saving text.
FAQs
What is the with function in JavaScript?
let obj = { x: 5, y: 10 };
with(obj) {
console.log(x + y);
}
Output:
15
How do you use the with function in JavaScript?
with(object) {
// statements using object properties
}
Example:
let person = { name: "Ali", age: 30 };
with(person) {
console.log(name);
console.log(age);
}
Output:
Ali
30
Why is the with function discouraged in JavaScript?
let obj = { value: 50 };
let value = 100;
with(obj) {
console.log(value);
}
Output could be:
50
It hides which variable is accessed.
Hence, many coding standards advise not to use it.
What are alternatives to with function in JavaScript?
let car = { brand: "Toyota", year: 2022 };
console.log(car.brand);
console.log(car.year);
Example with destructuring:
let car = { brand: "Toyota", year: 2022 };
let { brand, year } = car;
console.log(brand);
console.log(year);
Both methods are safer and clearer than with.
Similar Reads
The for...of loop appeared to solve the problem of complex loops over arrays and strings. It gives you a way…
String Operators in JavaScript help you work with text. You can join, build, or change strings. Most of what you…
JavaScript toReversed returns a new array with the reversed order of its elements. It does not change the original array…
The ternary operator in JavaScript keeps your code short. It helps you write conditions inside one line. JavaScript lets you…
JavaScript arithmetic operators let you add, subtract, multiply, or divide numbers. You can also use them to find remainders or…
Math.random() gives a number between 0 and 1 in JavaScript. It helps create random values for colors or other data.…
JavaScript Objects hold values as key and value pairs, and they help you store and access data. Understand the JavaScript…
The development of full-featured and interesting pages cannot be done without JavaScript which makes it possible to animate plain HTML…
You have to organize your JavaScript code structure. A clean layout helps you read and fix your code. Whether you…
Math.atan() function in JavaScript helps you to solve math problems in your code. It turns a number into an angle.…