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.

Following is the code for with statement in JavaScript −

Example

 Live Demo

<!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 −

Updated on: 18-Jul-2020

962 Views

Kickstart Your Career

Get certified by completing the course

Get Started
Advertisements