JavaScript, __proto__ and prototype in JS

What is difference between __protp__ and prototype in JS
Answer: In JavaScript, '__proto__' and 'prototype' are both related to prototypal inheritance, but they serve different purposes and are used in different contexts. Here's a detailed explanation of each:
## '__proto__'
- '__proto__' is a property of an object that points to the prototype object from which the object inherits properties and methods.
- It is an internal property (not a part of the ECMAScript standard until ES6) and can be used to access or set the prototype of an existing object.
const person = {
greet() {
console.log('Hello, my name is ${this.name}');
}
};
const john = {
name: 'John'
};
john.__proto__ = person;
john.greet(); // Output: Hello, my name is John

In this example, 'john.__proto__' is set to 'person', so 'john' inherits the 'greet' method from 'person'.
## 'prototype'
- 'prototype' is a property of a function (specifically, constructor functions) that is used when creating new instances with the 'new' keyword.
- It is an object that will become the prototype of instances created by the constructor function.
function Person(name) {
this.name = name;
}
Person.prototype.greet = function() {
console.log('Hello, my name is ${this.name}');
};
const jane = new Person('Jane');
jane.greet(); // Output: Hello, my name is Jane

In this example, 'Person.prototype' contains the 'greet' method. When a new 'Person' instance is created using 'new Person('Jane')', the instance's '__proto__' property is set to 'Person.prototype'.
## Key Differences
1. Usage Context:
- '__proto__' is used on individual objects to get or set their prototype.
- 'prototype' is used on constructor functions to define the properties and methods that should be inherited by instances created by that constructor.
2. Purpose:
- '__proto__' links an object to its prototype.
- 'prototype' provides a blueprint for creating new objects with shared properties and methods.
3. Setting Prototypes:
- '__proto__' can be used to manually set the prototype of an existing object (though not recommended for performance reasons).
- 'prototype' is automatically used when creating new objects with the 'new' keyword.
## Illustration
To illustrate the relationship:
1. Using 'prototype':

function Animal(type) {
this.type = type;
}
Animal.prototype.speak = function() {
console.log('${this.type} makes a sound');
};
const dog = new Animal('Dog');
dog.speak(); // Dog makes a sound

Here, 'Animal.prototype' is the prototype of the 'dog' object created by 'new Animal('Dog')'.
2. Using '__proto__':

const animal = {
speak() {
console.log('${this.type} makes a sound');
}
};
const cat = {
type: 'Cat'
};
cat.__proto__ = animal;
cat.speak(); // Cat makes a sound

Here, 'cat.__proto__' is set to 'animal', so 'cat' inherits the 'speak' method from 'animal'.
## Summary
- '__proto__' is an object property used to access or set the prototype of an object.
- 'prototype' is a property of a constructor function that defines properties and methods to be inherited by instances created with the 'new' keyword.
Both are essential for understanding JavaScript's prototypal inheritance but are used in different scenarios.