How to add properties and methods to an existing object in JavaScript?

JavascriptWeb DevelopmentObject Oriented Programming

Following is the code for adding properties and methods to an existing object 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;
      color: blueviolet;
   }
</style>
</head>
<body>
<h1>Add properties and methods to an existing object in JavaScript</h1>
<div class="result"></div>
<button class="Btn">CLICK HERE</button>
<h3>Click on the above button to add property and methods to student object and display
them</h3>
<script>
   let resEle = document.querySelector(".result");
   let BtnEle = document.querySelector(".Btn");
   let student = {
      };
      BtnEle.addEventListener("click", () => {
         student.name = 'Rohan Sharma';
         student.age = 16;
         student.place = 'Delhi';
         student.displayInfo = function(){
         return 'Name = '+this.name+' : Age = '+this.age+' : Place = '+this.place;
      }
      resEle.innerHTML += student.displayInfo();
   });
</script>
</body>
</html>

Output

On clicking the ‘CLICK HERE’ button −

raja
Published on 22-Jul-2020 08:03:32
Advertisements