"Mastering JavaScript OOP and Prototypes for Better Code"

✅ #13: JavaScript OOP & Prototypes — The Real Power Behind the Scenes! ⚙️ Today, I explored one of the most powerful pillars of JavaScript — Object-Oriented Programming (OOP) and Prototypes. And trust me, it’s where JavaScript feels alive! 🚀 🧱 Object-Oriented Programming (OOP) JavaScript is a prototype-based programming language, and OOP is a paradigm that helps write modular, reusable, and scalable code. Why OOP? - Code Reusability: Write once, use everywhere. - Encapsulation: Bundle data and methods together. - Inheritance: Share properties and methods across objects. - Polymorphism: One method, multiple behaviors. 🏗️ Building Blocks of OOP 1. Object Literals: A concise way to define objects using {}. Example: const user = { username: "Sandeep", loginCount: 8, signedIn: true }; 2. Constructor Functions: - Used to create multiple instances. Example: function User(username, loginCount, isLoggedIn) { this.username = username; this.loginCount = loginCount; this.isLoggedIn = isLoggedIn; } const userOne = new User("Sandeep", 12, true); 3. The new Keyword: Creates a new instance by: 1. Creates an empty object. 2. Links the object to the constructor’s prototype. 3. Binds this to the new object. 4. Returns the object. 4. Prototypes: Objects inherit properties & methods from their prototype chain. Example: User.prototype.greet = function() { console.log(`Welcome ${this.username}`); }; 5. Classes (ES6): Syntactic sugar over constructor functions and prototypes. Example: class User { constructor(username, email, password) { this.username = username; this.email = email; this.password = password; } encryptPassword() { return `${this.password}abc`; } } 🎯 The 4 Pillars of OOP 1. Abstraction: Hide complex details and expose only essentials (e.g., fetch() API). 2. Encapsulation: Bundle data + methods into a single unit (e.g., objects). 3. Inheritance: Reuse code (class Teacher extends User). 4. Polymorphism: Same method, different behavior. 🔑 Key Takeaways - this Keyword: Refers to the current execution context. Its value depends on how a function is called. - Prototypal Inheritance: Objects inherit properties and methods up the prototype chain until null is reached. - Getters/Setters: Control how properties are accessed and modified. - Closures: Functions that retain access to their lexical scope even after execution. 💡 Example: Solving a Real-World Problem I learned how to add a custom method to the String prototype to trim whitespace and get the true length: String.prototype.trueLength = function() { return this.trim().length; }; console.log("Sandeep ".trueLength()); // Output: 7 🤝 Let’s Connect! If you’re also learning JavaScript or have insights to share, I’d love to connect and learn together. Feel free to drop your thoughts or resources in the comments! #JavaScript #OOP #WebDevelopment #Coding #LearningJourney #Programming #Prototypes #Loops #DeveloperCommunity

To view or add a comment, sign in

Explore content categories