JavaScript OOP: The Truth Behind “Classes” A common misconception is that JavaScript uses "real" classes like Java or C++. In reality, JavaScript is built on prototypal inheritance - or more accurately, behavior delegation. Every object in JavaScript has an internal link to another object called its prototype. When you try to access a property or method that doesn’t exist on the object itself, JavaScript looks for it up the prototype chain. This process isn’t about copying properties or methods - it’s about delegating behavior. Think of it this way: Objects in JavaScript don’t inherit behavior in the classical sense - they delegate behavior to other objects. This delegation model is far more flexible and dynamic than traditional class-based inheritance, allowing objects to share behavior at runtime without rigid hierarchies. Understanding this concept changes how you architect and reason about your code. Instead of forcing class-based design patterns from other languages, you start leveraging JavaScript’s native strengths: composition, delegation, and dynamic object links. Currently diving deeper into these mechanics through “You Don’t Know JS: Objects & Classes” - a must-read for truly understanding how JavaScript thinks. Frameworks evolve. Syntax evolves. But understanding how the language itself works - that remains constant. #JavaScript #OOP #SoftwareEngineering #ComputerScience #Learning
Yordan Gergov’s Post
More Relevant Posts
-
Functional Programming in JavaScript — The Secret Sauce Behind Cleaner Code At first glance, JavaScript looks like Java or C++. But deep down, it’s far closer to functional programming languages like Lisp, Scheme, or ML. Why? Because JS has first-class functions — meaning: ✅ Functions behave like objects 🧩 ✅ You can pass them as arguments ✅ You can return them from other functions This is what unlocks Functional Programming (FP) — a way to write cleaner, reusable, and expressive code. 🧠 Example: Doubling an Array ❌ Imperative (traditional) way: const arr = [1, 2, 3]; let doubled = []; for (let i = 0; i < arr.length; i++) { doubled.push(arr[i] * 2); } console.log(doubled); // [2, 4, 6] ✅ Functional way: function mapForEach(arr, fn) { let newArr = []; for (let i = 0; i < arr.length; i++) { newArr.push(fn(arr[i])); } return newArr; } const arr = [1, 2, 3]; const doubled = mapForEach(arr, item => item * 2); console.log(doubled); // [2, 4, 6] Instead of telling JavaScript how to loop, you just tell it what to do for each element. 🌟 Why It Matters 🔹 Reusability: Same mapForEach can filter, transform, or validate. 🔹 Cleaner code: No boilerplate loops. 🔹 Composability: Functions can be chained to build complex logic. 💡 Pro Tip: In FP, avoid mutating data — always return new values. Immutability = predictability = fewer bugs. 👉 Functional programming isn’t a fancy buzzword — It’s what makes JavaScript powerful, elegant, and fun to write. What’s your favorite functional trick in JS — map, reduce, or filter? Let’s discuss 👇 #JavaScript #FunctionalProgramming #WebDevelopment #CodeBetter #LearningJS
To view or add a comment, sign in
-
JavaScript Deep Dive: The Story Behind null Today, I explored the origins of one of JavaScript’s quirkiest features — null. It turns out this little value has a surprising history! 🔹 Where it Began: JavaScript was created in 1995 by Brendan Eich in just 10 days. Since it was inspired by Java, null was included to represent the intentional absence of any object — just like in Java. 🔹 The Famous Bug: Ever wondered why this happens? typeof null // "object" This result is actually due to an early implementation bug. null was given the same type tag as objects — and fixing it would have broken lots of existing code. So it stayed. 😅 🔹 null vs undefined: JavaScript defines two empty values: null: Intentionally empty (set by programmers) undefined: Automatically assigned by JavaScript for missing or uninitialized values This distinction has confused developers for decades! 🔹 Standardized in ECMAScript: Both null and undefined were formalized in the first ECMAScript standard (1997), cementing their roles in the language. 💡 Takeaway: JavaScript's null is a great example of how early design decisions — even mistakes — can shape a language's future. Knowing its history helps us write code with more clarity and intention. Let’s keep learning the story behind the code! 🎯 #JavaScript #LearningInPublic #WebDevelopment #HistoryOfJS #Programming #10000Coders #CodeNewbie
To view or add a comment, sign in
-
-
💡 𝗝𝗮𝘃𝗮𝗦𝗰𝗿𝗶𝗽𝘁 𝗣𝗿𝗼𝘁𝗼𝘁𝘆𝗽𝗮𝗹 𝗜𝗻𝗵𝗲𝗿𝗶𝘁𝗮𝗻𝗰𝗲 — 𝗠𝗮𝗱𝗲 𝗦𝗶𝗺𝗽𝗹𝗲 🧠 When you hear “everything in JavaScript is an object”, you’re actually hearing about the magic of prototypal inheritance. 🔍 𝗪𝗵𝗮𝘁 𝗶𝘀 𝗣𝗿𝗼𝘁𝗼𝘁𝘆𝗽𝗮𝗹 𝗜𝗻𝗵𝗲𝗿𝗶𝘁𝗮𝗻𝗰𝗲? In JavaScript, objects can inherit properties and methods from other objects — not through classes (like Java or C++), but through a special link called a prototype. Every object in JS has an internal reference to another object — its prototype. If a property or method isn’t found on the object itself, JavaScript looks for it in the prototype. This chain continues until it reaches the root object — Object.prototype. That’s called the prototype chain 🔗 🧩 𝗜𝗻 𝘁𝗵𝗲 𝗯𝗲𝗹𝗼𝘄 𝗰𝗼𝗱𝗲, 𝗵𝗲𝗿𝗲’𝘀 𝘄𝗵𝗮𝘁 𝗵𝗮𝗽𝗽𝗲𝗻𝘀: -> user doesn’t have its own greet() method. -> JS checks user.__proto__ (which points to person). -> Finds greet() there and executes it. -> That’s prototypal inheritance in action ✅ 💭 𝗥𝗲𝗮𝗹-𝗟𝗶𝗳𝗲 𝗔𝗻𝗮𝗹𝗼𝗴𝘆: Imagine you don’t own a car 🚗 You borrow your parent’s car — you didn’t “copy” it; you’re just “using it”. That’s exactly how prototypes work — they share behavior, not duplicate it. 🧠 𝗪𝗵𝘆 𝗜𝘁 𝗠𝗮𝘁𝘁𝗲𝗿𝘀 ✅ It makes memory usage efficient. ✅ It’s the foundation of JavaScript’s class syntax (class is just syntactic sugar). ✅ It’s heavily tested in interviews — both theoretically and with small coding challenges. ✨ 𝗧𝗮𝗸𝗲𝗮𝘄𝗮𝘆: Prototypal inheritance is the core of how JS objects relate to each other. Master this — and you’ll truly understand how JavaScript works behind the scenes 🔥 #JavaScript #WebDevelopment #FrontendDevelopment #Coding #InterviewPreparation #FrontendEngineer #100DaysOfCode #Learning #DevCommunity
To view or add a comment, sign in
-
-
JavaScript isn't an OOP language. Many beginners think of JavaScript classes as “classical OOP”, similar to Java or C++. But here’s the fascinating part: ✅ JavaScript doesn’t have classical inheritance. ✅ Classes in JS are syntactic sugar over its prototype system. Here’s what actually happens: class User { greet() { console.log('Hello!'); } } const u = new User(); u.greet(); When you create `u`, JS doesn’t copy `greet` into `u`. Instead: - `u` has a hidden reference `__proto__` pointing to `User.prototype`. - The method `greet` lives on the prototype. - JS looks up the prototype chain when a method is called. You can even add new methods dynamically: User.prototype.sayBye = () => console.log('Bye!'); u.sayBye(); 💡 Takeaway: Understanding prototypes is the key to truly mastering JS OOP. Classes are just a convenient way to write what prototypes already do. #JavaScript #WebDevelopment #OOP #Prototypes #LearningInPublic
To view or add a comment, sign in
-
🧠 Understanding “this” and Constructor Functions in JavaScript. In JavaScript, objects aren’t just data containers — they can also hold behavior. That behavior comes from methods — functions stored as object properties. 🔹 Object Methods and “this” Let’s say we have: let user = { name: "Gautam", greet() { console.log(`Hello, ${this.name}!`); } }; user.greet(); // Hello, Gautam! Here, this refers to the object before the dot (user). So, when user.greet() runs, this equals user. But there’s a catch — this is not fixed. If you assign the same method to another object, this changes accordingly. let admin = { name: "Admin" }; admin.greet = user.greet; admin.greet(); // Hello, Admin! 👉 this depends on how the function is called, not where it’s defined. That’s what makes it so powerful — and sometimes confusing. 🔹 Constructor Functions and the “new” Operator When we want to create multiple similar objects, defining each manually becomes repetitive. That’s where constructor functions come in. function User(name) { this.name = name; this.isAdmin = false; } let user1 = new User("Gautam"); let user2 = new User("Chirag"); The new operator does a few magical things: -> Creates a new empty object. -> Sets this to that new object. -> Executes the function body. -> Returns the newly created object automatically. In short — new + function = object factory 🏭 💬 A Subtle Detail If a constructor explicitly returns an object, that object is returned instead of this. Otherwise, the newly created object is returned automatically. That’s why constructors don’t need return statements in most cases. 🪞 In Summary ->Methods are object properties that store functions. ->The value of this is determined at call time — by the object before the dot. ->Constructor functions (with new) let us create multiple similar objects easily. ->Always start constructor names with a capital letter (by convention). ->If you forget new, this becomes undefined — and the code breaks. ✨ Learning Takeaway Understanding how this and new work gives you deeper control over object creation and method context — the foundation of object-oriented JavaScript. Learn it once, use it everywhere — because “this” is everywhere. 📚 Inspired by javascript.info #JavaScript #WebDevelopment #Learning #CleanCode #FrontendDevelopment #Programming
To view or add a comment, sign in
-
🛑 Still using this to deep clone objects in JavaScript? JSON.parse(JSON.stringify(obj)) It works… until it doesn’t 😅 It breaks with: ❌ Dates (turn into strings) ❌ Maps / Sets (lost completely) ❌ undefined & functions (removed) ❌ Circular references (throws error) JavaScript now has a modern, safer solution: structuredClone(obj) ✨ Supports circular references ✨ Preserves Date, Map, Set, RegExp ✨ Faster & built-in in modern JS/Node I wrote a simple blog with easy examples explaining why this matters, including a quick view of Shallow vs Deep cloning so the concept is crystal clear even for beginners. 🔗 Read it here: https://lnkd.in/dVcGiNwv #JavaScript #WebDevelopment #Programming #NodeJS #TypeScript #JSTips #CleanCode #SoftwareEngineering #Developers #WebDev #CodingLife
To view or add a comment, sign in
-
-
JavaScript taught me something cool today 🤔 You know how we write classes in JavaScript? Turns out, JS doesn't actually have "real" classes like Java or C++. It's a Prototype-based language wearing a class costume! ✨ ➡️When we write this: class Person { constructor(name) { this.name = name; } greet() { return `Hello, I'm ${this.name}`; } } ➡️ JavaScript actually does this: function Person(name) { this.name = name; } Person.prototype.greet = function() { return `Hello, I'm ${this.name}`; } 🔺 Same result, different reality! The class syntax is just syntactic sugar to make it look familiar. Under the hood, everything still runs on Prototypes, implementing Inheritance, Encapsulation, Abstraction and Polymorphism in its own unique way. 📌 Understanding this helped me: • Finally get why this acts weird sometimes • Debug inheritance issues way faster • Realize methods live on the prototype (memory efficient!) 🖊️ Anyone else had this "wait, what?" moment with JavaScript? 😅 #JavaScript #WebDevelopment #LearningToCode
To view or add a comment, sign in
-
🔥 JS Dev → Strongly Typed Language: The Pain Is Real As a JavaScript developer, I lived in functions, callbacks, and the classic: “Just run it and see what breaks.” 😅 Then I switched to a strongly typed language… and suddenly everything hit at once: ⚠️ Interfaces everywhere ⚠️ Abstract classes you can’t ignore ⚠️ Constructors for every dependency ⚠️ Generics staring at you like a warning sign ⚠️ Repository + Service layers (even for simple features!) ⚠️ DTOs for tiny inputs ⚠️ Dependency Injection running the whole system ⚠️ Compile-time errors before you even run code Coming from JS, it feels like the language is fighting you — too many layers, too many rules, too many types. But then… it clicks. ✅ ✨ Your code becomes cleaner ✨ Your architecture finally makes sense ✨ Your bugs drop significantly ✨ Your confidence grows with every file you write JavaScript gives you speed. Strongly typed languages give you structure. Mastering both? That makes you dangerous as a developer. 🚀 #JavaScript #TypeScript #SoftwareDevelopment #Programming #DeveloperLife #Coding #CareerGrowth
To view or add a comment, sign in
-
🤖 Day 4 of my 7-Day JavaScript Revision Challenge! Today’s focus: Functions, Callbacks & Higher-Order Functions in JavaScript Functions are the engines of JavaScript. They help break complex problems into clean, reusable, and efficient pieces — improving readability, modularity, and overall code quality. ⚙️✨ 📚 1. Function Basics 🔹 Functions group logic into reusable blocks 🔹 Accept inputs as parameters 🔹 Return meaningful outputs 🔹 Help structure repeated tasks and calculations ⚡ 2. Arrow Functions 🔹 Short, modern, and cleaner syntax 🔹 Commonly used in callbacks 🔹 Great for writing compact, expressive logic 🔁 3. Callback Functions 🔹 A function passed as an argument into another function 🔹 Essential for async tasks, event handling, array methods 🔹 Provides more flexibility and control 🧠 4. Higher-Order Functions 🔹 Functions that take or return other functions 🔹 Core concept in functional programming 🔹 Common examples: handling lists, transforming data, pipelines 📝 5. Practice Challenges ✅ Create a function that returns the square of a number ✅ Convert an array of names to uppercase using a function ✅ Build a reusable greeting function ✅ Use a callback inside a custom function ✅ Transform a list of numbers into their cubes 🔥 Key Takeaway Functions are the backbone of JavaScript. Understanding how they work makes your code cleaner, faster, and more professional. 💪💡 🚀 Up next — Day 5: ES6+ Features! #JavaScript #WebDevelopment #CodingJourney #DeveloperCommunity #ProgrammingLife #WomenWhoCode #100DaysOfCode #FrontendDevelopment #LearningEveryday #SoftwareEngineering #TechLearning #JavaScriptDeveloper #CodeNewbie #Functions #Callbacks #HigherOrderFunctions #JSRevision #DailyCoding #AmanCodes #JSChallenge #7DaysOfCode #TechCommunity #BuildInPublic #SelfImprovement #CodeWithAman #StudyWithMe #LearnToCode
To view or add a comment, sign in
-
-
Prototypes JavaScript is an object-oriented language built around a prototype model. In JavaScript, every object inherits properties from its prototype, if there are any. A prototype is simply an object from which another object inherits properties. To create complex programs using JavaScript, one has to be proficient in working with prototypes — they form the very core of OOP in the language.
To view or add a comment, sign in
-
Explore content categories
- Career
- Productivity
- Finance
- Soft Skills & Emotional Intelligence
- Project Management
- Education
- Technology
- Leadership
- Ecommerce
- User Experience
- Recruitment & HR
- Customer Experience
- Real Estate
- Marketing
- Sales
- Retail & Merchandising
- Science
- Supply Chain Management
- Future Of Work
- Consulting
- Writing
- Economics
- Artificial Intelligence
- Employee Experience
- Workplace Trends
- Fundraising
- Networking
- Corporate Social Responsibility
- Negotiation
- Communication
- Engineering
- Hospitality & Tourism
- Business Strategy
- Change Management
- Organizational Culture
- Design
- Innovation
- Event Planning
- Training & Development