Article Categories

Selected Reading

Can we share a method between JavaScript objects in an array?

Javascript Web Development Object Oriented Programming

Yes, we can share methods between JavaScript objects in an array using prototypes or by defining shared methods outside the objects. This approach promotes code reusability and memory efficiency.

Using Prototype Methods

The most common way to share methods is through prototype inheritance. When you define a method on a constructor's prototype, all instances share that method.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Shared Methods in JavaScript</title>
<style>
   body {
      font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
   }
   .result {
      font-size: 18px;
      font-weight: 500;
      color: rebeccapurple;
      margin: 10px 0;
   }
</style>
</head>
<body>
<h1>Share a method between objects in an array</h1>
<div class="result"></div>
<button class="Btn">CALL WELCOME METHODS</button>
<h3>Click the button to call welcome() method of all person objects</h3>
<script>
   let resEle = document.querySelector(".result");
   
   function Person(firstName, lastName) {
      this.firstName = firstName;
      this.lastName = lastName;
   }
   
   // Shared method via prototype
   Person.prototype.welcome = function () {
      return "Welcome " + this.firstName + " " + this.lastName;
   };
   
   Person.prototype.getFullName = function() {
      return this.firstName + " " + this.lastName;
   };
   
   let people = [
      new Person("Rohit", "Sharma"),
      new Person("Shawn", "Mendes"),
      new Person("Michael", "Clarke"),
   ];
   
   document.querySelector(".Btn").addEventListener("click", () => {
      resEle.innerHTML = "";
      people.forEach((person) => {
         resEle.innerHTML += person.welcome() + "<br>";
      });
   });
</script>
</body>
</html>

Using ES6 Classes

Modern JavaScript provides a cleaner syntax using classes, which internally use prototypes:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>ES6 Class Method Sharing</title>
</head>
<body>
<div id="output"></div>
<script>
   class Employee {
      constructor(name, department) {
         this.name = name;
         this.department = department;
      }
      
      // Shared method
      introduce() {
         return `Hi, I'm ${this.name} from ${this.department}`;
      }
      
      // Another shared method
      getInfo() {
         return `${this.name} - ${this.department}`;
      }
   }
   
   const employees = [
      new Employee("Alice", "Engineering"),
      new Employee("Bob", "Marketing"),
      new Employee("Carol", "Design")
   ];
   
   let output = document.getElementById("output");
   employees.forEach(emp => {
      output.innerHTML += emp.introduce() + "<br>";
   });
</script>
</body>
</html>

Memory Efficiency Comparison

Approach	Method Storage	Memory Usage
Individual methods per object	Each object has its own copy	High - duplicated methods
Prototype methods	Single copy on prototype	Low - shared reference
ES6 Class methods	Single copy on prototype	Low - shared reference

Key Benefits

Memory Efficiency: Methods are stored once on the prototype, not duplicated for each object
Consistency: All objects share the same method implementation
Easy Updates: Changing the prototype method affects all instances

Conclusion

Yes, JavaScript objects in an array can share methods through prototypes or ES6 classes. This approach saves memory and ensures consistent behavior across all instances.

AmitDiwan

Updated on: 2026-03-15T23:18:59+05:30

190 Views

Kickstart Your Career

Get certified by completing the course

Get Started

Previous Next