4. Objects and OOP

Objects are one of the core concepts in JavaScript.

Almost every React and frontend project uses objects heavily.

OOP (Object-Oriented Programming) helps organize code using objects and classes.

---

Topics Covered

• Object Methods
• Destructuring
• Spread Operator
• Rest Operator
• Shallow vs Deep Copy
• this Keyword
• Constructor Functions
• Classes
• Prototype
• Inheritance

---

1. Objects

Objects store data in key-value pairs.

---

Example

const user = {
  name: "Dipak",
  age: 25,
  city: "Kolkata",
};

---

Access Object Properties

Dot Notation

console.log(user.name);

---

Bracket Notation

console.log(user["age"]);

Useful when property name is dynamic.

---

Add New Property

user.email = "dipak@gmail.com";

---

Delete Property

delete user.city;

---

2. Object Methods

Functions inside objects are called methods.

---

Example

const user = {
  name: "Dipak",

  greet() {
    console.log("Hello");
  },
};

user.greet();

---

Example with this

const user = {
  name: "Dipak",

  show() {
    console.log(this.name);
  },
};

user.show();

---

3. Destructuring (VERY IMPORTANT)

Destructuring extracts values from objects or arrays into variables.

---

Object Destructuring

const user = {
  name: "Dipak",
  age: 25,
};

const { name, age } = user;

console.log(name);
console.log(age);

---

Why Destructuring is Useful

• Cleaner code
• Shorter syntax
• Common in React props and state

---

Rename Variables

const user = {
  name: "Dipak",
};

const { name: userName } = user;

console.log(userName);

---

Default Values

const user = {
  name: "Dipak",
};

const { age = 20 } = user;

console.log(age);

---

Array Destructuring

const colors = ["red", "blue"];

const [first, second] = colors;

console.log(first);

---

4. Spread Operator (...) (VERY IMPORTANT)

Spread operator expands elements.

Used for:

• Copying arrays
• Copying objects
• Merging arrays/objects

---

Array Example

const arr1 = [1, 2];

const arr2 = [...arr1, 3];

console.log(arr2);

---

Output

[1, 2, 3];

---

Object Example

const user = {
  name: "Dipak",
};

const updatedUser = {
  ...user,
  age: 25,
};

console.log(updatedUser);

---

Why Spread is Important in React

React prefers immutable updates.

Instead of modifying original object:

user.age = 30;

Use:

const newUser = {
  ...user,
  age: 30,
};

---

5. Rest Operator (...)

Rest operator collects multiple values into an array.

---

Function Example

function sum(...nums) {
  return nums;
}

console.log(sum(1, 2, 3));

---

Output

[1, 2, 3];

---

Rest in Destructuring

const nums = [1, 2, 3, 4];

const [first, ...rest] = nums;

console.log(rest);

---

Difference Between Spread and Rest

Spread	Rest
Expands values	Collects values
Used while copying	Used in parameters
Converts array → individual values	Converts values → array

---

6. Shallow Copy vs Deep Copy

Very common interview question.

---

Shallow Copy

Copies only the first level.

Nested objects still share reference.

---

Example

const user = {
  name: "Dipak",
  address: {
    city: "Kolkata",
  },
};

const copy = { ...user };

copy.address.city = "Delhi";

console.log(user.address.city);

---

Output

Delhi;

Original object also changed.

---

Why?

Because nested object reference is shared.

---

Deep Copy

Creates a completely independent copy.

---

Example

const user = {
  name: "Dipak",
  address: {
    city: "Kolkata",
  },
};

const deepCopy = structuredClone(user);

deepCopy.address.city = "Delhi";

console.log(user.address.city);

---

Output

Kolkata;

---

Interview Definition

Shallow Copy	Deep Copy
Copies first level only	Copies all nested levels
Shares nested references	Completely separate copy

---

7. this Keyword (VERY IMPORTANT)

this refers to the object currently executing the function.

---

Example

const user = {
  name: "Dipak",

  show() {
    console.log(this.name);
  },
};

user.show();

---

Output

Dipak;

---

Global this

In browsers:

console.log(this);

Refers to:

window object

---

this Inside Normal Function

function test() {
  console.log(this);
}

test();

In browser → window

---

Arrow Function and this

Arrow functions do NOT have their own this.

They inherit this from parent scope.

---

Example

const user = {
  name: "Dipak",

  show: () => {
    console.log(this.name);
  },
};

user.show();

---

Output

undefined;

---

Why?

Arrow function uses outer this, not object's this.

---

8. Constructor Functions

Before ES6 classes, objects were created using constructor functions.

---

Example

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

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

console.log(user1);

---

Important Points

• new creates object
• this refers to new object
• Constructor functions usually start with capital letter

---

9. Classes (ES6)

Modern way to create objects.

---

Example

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

  greet() {
    console.log("Hello");
  }
}

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

user1.greet();

---

Why Classes?

• Cleaner syntax
• Easier inheritance
• Better code organization

---

10. Prototype

Every JavaScript object has a hidden prototype object.

Prototype allows sharing methods between objects.

---

Example

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

User.prototype.sayHi = function () {
  console.log("Hi");
};

const user1 = new User("Dipak");

user1.sayHi();

---

Why Prototype is Important

Without prototype, every object gets a separate copy of functions.

Prototype helps save memory.

---

Prototype Chain

If property is not found in object, JavaScript searches prototype chain.

---

11. Inheritance

Inheritance allows one class to use properties and methods of another class.

---

Example

class Animal {
  speak() {
    console.log("Animal sound");
  }
}

class Dog extends Animal {
  bark() {
    console.log("Bark");
  }
}

const d = new Dog();

d.speak();
d.bark();

---

Output

Animal sound
Bark

---

Benefits of Inheritance

• Code reuse
• Cleaner structure
• Reduces duplication

---

Important Interview Questions

---

Q1. What is Destructuring?

Destructuring extracts values from objects or arrays into variables.

const user = {
  name: "Dipak",
  age: 25,
};

const { name, age } = user;

---

Q2. Spread vs Rest Operator

Spread Operator

Expands values.

const arr1 = [1, 2];

const arr2 = [...arr1, 3];

---

Rest Operator

Collects values.

function sum(...nums) {
  return nums;
}

---

Q3. Explain this

this refers to current object.

const user = {
  name: "Dipak",

  show() {
    console.log(this.name);
  },
};

---

Most Asked OOP Interview Topics

Focus heavily on:

• this
• Prototype
• Inheritance
• Classes
• Destructuring
• Spread operator
• Shallow vs Deep copy

---

Best Practices

• Use destructuring for cleaner code
• Prefer spread operator over direct mutation
• Use classes for structured code
• Avoid arrow functions as object methods when using this
• Understand prototype chain properly