Uses of the JavaScript with Statement

Javascript Web Development Object Oriented Programming

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>