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.
Following is the code for with statement in JavaScript −
Example
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
body {
font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
}
.result {
font-size: 20px;
font-weight: 500;
}
</style>
</head>
<body>
<h1>JavaScript with statement</h1>
<div style="color: green;" class="result"></div>
<button class="Btn">CLICK HERE</button>
<h3>Click on the above button to get the first and lastname property of obj</h3>
<script>
let resEle = document.querySelector(".result");
let BtnEle = document.querySelector(".Btn");
let obj = {
firstName: "Rohan",
lastName: "Sharma",
};
BtnEle.addEventListener("click", () => {
with (obj) {
resEle.innerHTML = "Welcome " + firstName + " " + lastName;
}
});
</script>
</body>
</html>Output
The above code will produce the following output −
On clicking the ‘CLICK HERE’ button −
