Understanding JavaScript Prototype: A Beginner-Friendly Guide (Part 1)

If you're learning JavaScript, you've probably heard of prototypes. So, what exactly are they?

Prototypes are the basis of JavaScript object-oriented programming (OOP). Even though present JavaScript uses classes, they are based on prototypes. Understanding how prototypes work helps us to develop more efficient and optimized JavaScript code.

Before we get started with prototypes, let's go over some fundamentals that will help us learn them more easily. In this article, we'll cover it in simple terms, using a real-life analogy, and code examples to help clarify things.

🟪 Concepts to Understand Before Learning Prototype

1️⃣ Objects in JavaScript

• Before learning about prototypes, you must understand objects because prototypes are a way to inherit properties and methods in objects.
• An object is a collection of key-value pairs that are capable of holding both data (properties) and functions (methods).

📌 Example

let superHero = {
    name: "Iron Man",
    superPower: function(){
        console.log("Superhuman strength and durability")
    }
}

console.log(superHero.name) // Output: Iron Man
superHero.superPower() // Output: Superhuman strength and durability

2️⃣ Constructor Functions
Constructor functions help create multiple objects with the same structure.

📌 Example

function SuperHero(name) {
    this.name = name
}

let superHero1 = new SuperHero('Captain America')
let superHero2 = new SuperHero('Doctor Strange')

console.log(superHero1.name); // Output: Captain America
console.log(superHero2.name); // Output: Doctor Strange

3️⃣ The this Keyword
The this keyword represents the current object that is calling the function.
👉 Learn more about this and its behavior in various scenarios
📌 Example

function SuperHero(name) {
    this.name = name
    this.intro = function (){
        console.log("I am "+this.name)
    }
}

let superHero1 = new SuperHero('Captain America')
let superHero2 = new SuperHero('Doctor Strange')
superHero1.intro() // Output: I am Captain America
superHero2.intro() // Output: I am Doctor Strange

🟥 The Problem Without Prototypes

Every time we create a new object, the methods are duplicated in memory, which is inefficient.
📌 Example (Without Prototype, Inefficient)

function SuperHero(name) {
    this.name = name
    this.intro = function (){
        console.log("I am "+this.name)
    }
}

let superHero1 = new SuperHero('Captain America')
let superHero2 = new SuperHero('Doctor Strange')

console.log(superHero1.intro === superHero2.intro); // Output: false (Each object has its own copy)

🟩 Introducing Prototypes (Memory Optimization)

Instead of adding methods to the constructor, we can attach them to the prototype, so that all objects use the same method.
📌 Example (With Prototype, Efficient)

function SuperHero(name) {
    this.name = name
}
SuperHero.prototype.intro = function () {
    console.log("I am " + this.name);
};
let superHero1 = new SuperHero('Captain America')
let superHero2 = new SuperHero('Doctor Strange')

console.log(superHero1.intro === superHero2.intro); // Output: true

Conclusion

Prototypes are the basis of JavaScript's object-oriented programming. They allow objects to share methods, which increases memory efficiency. Prototypes still being used in modern JavaScript (ES6 classes)! By learning prototypes, you have greater control over JavaScript and can develop more memory-efficient programs!

💡 Did you find this helpful? Share your thoughts in the comments! 😊👇

Happy coding!✨