DOM Manipulation - JavaScript

🌟 Object-Oriented Programming (OOP) in JavaScript

Definition: OOP is a programming paradigm where we organize code using objects — bundles of data (properties) and behavior (methods).

Benefits in JavaScript:

Reuse code efficiently
Model real-world entities
Encapsulate functionality
Implement inheritance and polymorphism

1. Constructor Functions

Definition: Special function used with new keyword to create objects.

Syntax:

function Person(name, age) {
  this.name = name;
  this.age = age;
  this.sayHello = function() {
    console.log(`Hi, I'm ${this.name}`);
  };
}

const p1 = new Person("Alice", 25);
p1.sayHello();

Advantages: Easy to create multiple objects, keeps code organized.
Disadvantages: Methods are duplicated for each object → more memory used.
Analogy: Like a blueprint — every new call builds a new house.

2. Prototypes & Inheritance

Definition: Objects created from a constructor inherit methods from its prototype.

Syntax:

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

Person.prototype.greet = function() {
console.log(`Hello, I'm ${this.name}`);
};

const p1 = new Person("Alice");
p1.greet();

Advantages: Memory-efficient, enables inheritance and code reuse.
Disadvantages: Prototype chain can be confusing, debugging can be tricky.
Analogy: Like a family tree — children inherit traits from their parents.

3. class & extends

Definition: ES6 class syntax is a cleaner way to write constructor functions & prototypes. extends allows inheritance.

Syntax:

class Person {
  constructor(name) { this.name = name; }
  greet() { console.log(`Hi, I'm ${this.name}`); }
}

class Student extends Person {
  constructor(name, grade) {
    super(name);
    this.grade = grade;
  }
  study() { console.log(`${this.name} is studying in grade ${this.grade}`); }
}

const s1 = new Student("Bob", 10);
s1.greet();
s1.study();

Advantages: Cleaner syntax, built-in inheritance, easy to maintain.
Disadvantages: Syntactic sugar → still prototypal, beginners may confuse it with classical OOP.
Analogy: Company hierarchy — Person = employee, Student = specialized employee with extra skills.

4. this Keyword

Definition: Refers to the current object executing the function. Context matters.

Syntax:

const obj = {
name: "Alice",
greet() { console.log(this.name); }
};
obj.greet();

Advantages: Makes functions context-aware, essential for OOP.
Disadvantages: Value changes depending on call context, can confuse beginners.
Analogy: this = “myself” — depends on who is speaking.

5. Error Handling

a) try...catch

Definition: Catch runtime errors to prevent crashes.

Syntax:

try {
let result = unknownVariable + 1;
} catch (error) {
console.log("Error caught:", error.message);
}

Advantages: Prevents app from crashing, user-friendly messages.
Disadvantages: Overuse can hide bugs, doesn't catch syntax errors.
Analogy: Like wearing a helmet — protects you when something goes wrong.

b) throw

Definition: Create custom errors when needed.

Syntax:

function divide(a, b) {
  if (b === 0) { throw new Error("Cannot divide by zero!"); }
  return a / b;
}

try {
  divide(10, 0);
} catch (e) {
  console.log(e.message);
}

Advantages: Enforces rules, improves debugging.
Disadvantages: Uncaught throw crashes program.
Analogy: Fire alarm — alerts when something goes wrong.