Understanding the Difference Between Adding a Property to Instance vs Prototype in JavaScript

Explore the differences between adding properties to an instance in JavaScript versus adding to the prototype. Learn how these choices affect object behavior and performance. --- This video is based on the question https://stackoverflow.com/q/65539719/ asked by the user 'Eitanos30' ( https://stackoverflow.com/u/5752410/ ) and on the answer https://stackoverflow.com/a/65539756/ provided by the user 'Pointy' ( https://stackoverflow.com/u/182668/ ) at 'Stack Overflow' website. Thanks to these great users and Stackexchange community for their contributions. Visit these links for original content and any more details, such as alternate solutions, latest updates/developments on topic, comments, revision history etc. For example, the original title of the Question was: What are the difference between adding a property to instance or adding to prototypeproperty? Also, Content (except music) licensed under CC BY-SA https://meta.stackexchange.com/help/l... The original Question post is licensed under the 'CC BY-SA 4.0' ( https://creativecommons.org/licenses/... ) license, and the original Answer post is licensed under the 'CC BY-SA 4.0' ( https://creativecommons.org/licenses/... ) license. If anything seems off to you, please feel free to write me at vlogize [AT] gmail [DOT] com. --- Understanding the Difference Between Adding a Property to Instance vs Prototype in JavaScript In JavaScript, when you're working with objects and classes, you may often find yourself asking how to effectively manage properties. One common question that arises is: What is the difference between adding a property directly to an instance of a class versus adding it to the prototype of that class? In this guide, we'll explore this fundamental concept, breaking it down into easy-to-understand sections to help you get a clearer grasp of the topic. The Basics of JavaScript Prototypes JavaScript is a prototypical language, meaning that objects can inherit properties and methods from other objects through prototypes. When you create a class in JavaScript, it's essentially a constructor function with a prototype. The prototype is an object that is shared across all instances of the class, allowing you to define methods and properties that should be available to all instances without having to redefine them for each instance. Example Class To illustrate, let's consider the following example of a simple class: [[See Video to Reveal this Text or Code Snippet]] We can create multiple instances of this class, such as: [[See Video to Reveal this Text or Code Snippet]] With these instances created, let's dive into the core question regarding properties. Adding Properties to Instances vs Prototype 1. Adding a Property in the Constructor When you add a property directly in the constructor, like so: [[See Video to Reveal this Text or Code Snippet]] Characteristics: Each instance of PersonCl will have its own species property initialized to "Human". If you modify the species property for a particular instance (e.g., Joe.species = "Tiger"), it won't affect other instances. Each instance maintains its own copy of the property. 2. Adding a Property to the Prototype Alternatively, if you add a property to the prototype, like this: [[See Video to Reveal this Text or Code Snippet]] Characteristics: The species property will be accessible on all created instances of PersonCl, but it won't be a personal property of each instance until modified. If you later change the species property on an instance, like Joe.species = "Tiger", it creates a local property for that specific instance, overriding the prototype's value. Other instances will still see "Human" unless similarly modified. Key Differences and Considerations Visibility Instance Property: Directly visible and accessible only by that specific instance; no other instance will see its value unless explicitly shared. Prototype Property: Initially shared across instances. It’s good for properties that are common to all instances. Performance and Memory Usage Adding properties to the prototype can save memory since each instance doesn't have its own copy of the property (the property is stored once in the prototype object). It reduces redundancy when many instances share the same value. Impact on Object Keys Keep in mind that methods like Object.keys() will only return the "own properties" of an object (properties that are not inherited), which means properties defined in the prototype won't show up when called on instances. Conclusion Choosing between adding a property to an instance or to the prototype in JavaScript is not just about preference, but also understanding the implications for memory usage, performance, and object behavior. By knowing the differences, you can make more informed decisions when designing your classes and managing properties in your JavaScript applications. In summary, adding properties directly to instances gives each object its uni