🧱 JavaScript Objects & OOP – Complete Guide to Object-Oriented JavaScript (2025)

---

🧲 Introduction – Why Use Objects & OOP in JavaScript?

In JavaScript, objects are the most powerful data type. They allow you to group properties and behavior in one place. When combined with Object-Oriented Programming (OOP) principles like encapsulation, inheritance, and abstraction, you can build scalable and reusable code structures.

🎯 In this guide, you’ll learn:

• How to create and manipulate objects
• How OOP works in JavaScript using prototypes and constructors
• Advanced concepts like destructuring, getters/setters, mixins, and proxies

---

📘 Topics Covered

🔹 Topic	📄 Description
Objects	Introduction and object creation
Object Properties / Methods	Accessing and defining values and functions
Object Constructors	Creating object templates
Destructuring / Nested Objects	Extracting properties with ease
Getters & Setters	Encapsulating property access
Prototypes	Enabling inheritance and method sharing
Inheritance / OOP Concepts	Extending objects and classes
Mixins / Proxies	Composing and intercepting object behavior
Object Protection	Sealing, freezing, and immutability

---

🧱 JavaScript – Objects

An object is a collection of key-value pairs, where values can be data or functions (methods).

const person = {
  name: "Alice",
  age: 30,
  greet() {
    console.log("Hello!");
  }
};

You can access properties using:

• Dot notation: person.name
• Bracket notation: person["age"]

---

🛠️ JavaScript – Object Properties & Methods

You can add, update, or delete properties dynamically:

person.job = "Engineer";
delete person.age;

Methods

Functions inside objects are called methods:

const car = {
  start() {
    console.log("Car started");
  }
};

Use this to access object properties within methods.

---

🏗️ JavaScript – Object Constructors

Constructors are functions used to create multiple similar objects:

function User(name, age) {
  this.name = name;
  this.age = age;
}

const user1 = new User("Bob", 25);

✅ Use new keyword to instantiate.

---

🧩 JavaScript – Object Destructuring & Nested Objects

Destructuring

Extract values from objects:

const user = { name: "Alice", age: 30 };
const { name, age } = user;

Nested Destructuring

const data = {
  profile: {
    username: "john_doe",
    location: "USA"
  }
};

const {
  profile: { username }
} = data;

---

🧬 JavaScript – Getters & Setters

Used to control access to properties:

const account = {
  _balance: 1000,
  get balance() {
    return this._balance;
  },
  set balance(amount) {
    if (amount > 0) this._balance = amount;
  }
};

console.log(account.balance); // 1000
account.balance = 2000;

---

🧪 JavaScript – Prototypes

Every object in JavaScript has a prototype from which it can inherit properties.

function Animal() {}
Animal.prototype.sound = function() {
  console.log("Animal sound");
};

const dog = new Animal();
dog.sound(); // Animal sound

🔁 Shared methods are defined on the prototype to save memory.

---

🏛️ JavaScript – Inheritance / OOP Concepts

JavaScript supports prototypal inheritance:

function Person(name) {
  this.name = name;
}
Person.prototype.greet = function() {
  console.log("Hi, I'm " + this.name);
};

function Employee(name, role) {
  Person.call(this, name);
  this.role = role;
}
Employee.prototype = Object.create(Person.prototype);
Employee.prototype.constructor = Employee;

const emp = new Employee("Anna", "Manager");
emp.greet(); // Hi, I'm Anna

---

⚙️ JavaScript – Mixins & Proxies

Mixins

Mixins allow object composition:

let sayHi = {
  sayHi() {
    console.log("Hi!");
  }
};

let user = { name: "Alex" };
Object.assign(user, sayHi);
user.sayHi(); // Hi!

Proxies

Used to intercept object operations:

const target = { name: "John" };

const proxy = new Proxy(target, {
  get(obj, prop) {
    return prop in obj ? obj[prop] : "Not found";
  }
});

console.log(proxy.name);    // John
console.log(proxy.age);     // Not found

---

🛡️ JavaScript – Object Protection

Method	Purpose
Object.freeze()	Prevents all modifications
Object.seal()	Prevents adding/removing properties
Object.preventExtensions()	Disallows adding new properties

const config = Object.freeze({ debug: true });
config.debug = false; // ❌ Won’t change

---

📌 Summary – Recap & Next Steps

JavaScript objects and OOP principles let you model real-world entities, organize code, and implement complex logic in a maintainable way.

🔍 Key Takeaways:

• Use object literals and constructors to create structured data
• Use prototypes for shared methods and memory efficiency
• Use destructuring and getters/setters for cleaner code
• Embrace inheritance, mixins, and proxies for advanced use cases
• Use freeze/seal to protect object integrity

⚙️ Real-world Relevance:
OOP in JS powers everything from data models in apps to UI components in frameworks like React and Vue.

---

❓ FAQs

Q1: What’s the difference between object literals and constructors?

✅ Object literals are used for individual objects; constructors are reusable templates for creating multiple objects.

Q2: Can I override prototype methods?

✅ Yes. You can override inherited prototype methods with new definitions.

Q3: When should I use getters and setters?

✅ When you want to control how a property is accessed or mutated.

Q4: What’s the use of Object.freeze()?

✅ It creates a read-only object. Properties can’t be added, removed, or changed.

Q5: Are JavaScript classes and prototypes the same?

✅ Classes are syntactic sugar over JavaScript’s prototypal inheritance model.

---

Share Now :