R
Rishtaara
JavaScript Fundamentals
Lesson 17 of 28Article18 min

Advanced Objects

Before classes, developers used constructor functions with new to create many similar objects — like a blueprint for students or products.

Constructor functions

Before classes, developers used constructor functions with new to create many similar objects — like a blueprint for students or products.

Real-life example: A cookie cutter (constructor) shapes every dough piece the same way. Each cookie (object) can have different toppings later.

Constructor function
function Student(name, grade) {
  this.name = name;
  this.grade = grade;
  this.study = function () {
    return `${this.name} is studying for grade ${this.grade}`;
  };
}

const asha = new Student("Asha", 10);
const ravi = new Student("Ravi", 11);
console.log(asha.study()); // Asha is studying for grade 10

Prototypes (brief)

Every JavaScript object has a hidden link to a prototype object. Methods shared on the prototype save memory and let all instances use the same function.

Classes use prototypes under the hood. You may see __proto__ or Object.getPrototypeOf in debugging.

Real-life example: A family recipe book (prototype) sits in the kitchen. Every child (object) can cook the same dishes without each one copying the whole book.

Prototype method
function Course(title) {
  this.title = title;
}

Course.prototype.describe = function () {
  return `Course: ${this.title}`;
};

const js = new Course("JavaScript Fundamentals");
console.log(js.describe()); // Course: JavaScript Fundamentals

Object.keys, values, and entries

These helpers turn an object into lists you can loop over easily.

Real-life example: Object.keys is like listing all drawer labels. values is what is inside each drawer. entries gives you label + contents as pairs.

Loop over object data
const profile = { name: "Asha", city: "Delhi", grade: 10 };

Object.keys(profile);    // ["name", "city", "grade"]
Object.values(profile);  // ["Asha", "Delhi", 10]
Object.entries(profile); // [["name","Asha"], ["city","Delhi"], ...]

for (const [key, value] of Object.entries(profile)) {
  console.log(`${key}: ${value}`);
}

Destructuring

Destructuring pulls values out of objects or arrays into short variable names.

Real-life example: Opening a gift box and taking out each item one by one — you name them as you unpack instead of reaching blindly.

Object and array destructuring
const user = { name: "Ravi", age: 15, city: "Mumbai" };
const { name, city } = user;
const { age: userAge } = user; // rename while destructuring

const colors = ["red", "green", "blue"];
const [first, , third] = colors; // skip green

console.log(name, city, userAge, first, third);

Spread clone

The spread operator {...obj} makes a shallow copy. Change the copy without touching the original top-level fields.

Real-life example: Photocopying a form — you write on the copy; the original file in the cabinet stays unchanged.

Clone and update
const original = { title: "HTML Basics", done: false, tags: ["web"] };
const copy = { ...original, done: true };

copy.done;        // true
original.done;    // false — original not changed
copy.tags.push("html"); // nested arrays still shared — deep clone needs extra care

Getters and setters (brief)

Getters and setters let you run code when someone reads or writes a property. Useful for validation and computed values.

Real-life example: A shop scale shows weight (getter) when you place fruit on it. The setter checks the weight is not negative before saving.

Getter and setter
const account = {
  _balance: 100,
  get balance() {
    return `₹${this._balance}`;
  },
  set balance(amount) {
    if (amount < 0) throw new Error("Balance cannot be negative");
    this._balance = amount;
  },
};

account.balance = 250;
console.log(account.balance); // ₹250