JavaScript Object-Oriented Programming

Detailed explanations & code examples are in the JavaScript (.js) file

Click the { } button at the bottom right to view it

Master Objects, Constructors, Classes, and Destructuring

Topic 31: Objects

Objects are collections of related properties and methods representing real-world entities

Objects are the foundation of JavaScript:
Operation Syntax Example
Create Object const obj = {} const person = {name: "Umer"}
Access Property object.property person.firstName
Bracket Notation object["property"] person["lastName"]
Add Property object.newProp = value person.city = "Mumbai"
Delete Property delete object.property delete person.city
Call Method object.method() person.sayHello()
this Keyword in Objects:
• this refers to the object the method belongs to
• Works with regular functions: sayHello: function(){}
• DOESN'T work with arrow functions: sayHello: () => {}
• Arrow functions reference the window object instead

Examples in Console:

Topic 32: Constructor Functions

Blueprints for creating multiple similar objects (pre-ES6 way)

What is a Constructor?
A special function that creates and initializes objects. Think of it as a template or factory that produces similar objects with the same structure but different values. 
// Constructor Function (starts with capital letter by convention)
function Car(make, model, year, color){
    this.make = make;      // 'this' refers to new object
    this.model = model;
    this.year = year;
    this.color = color;
}

// Create instances with 'new' keyword
const car1 = new Car("Ford", "Mustang", 2024, "red");
Keyword Purpose Explanation
function Car() Define Constructor Creates the blueprint/template
this Reference New Object Points to the object being created
new Create Instance Creates a new object from constructor
What 'new' keyword does:
  1. Creates an empty object {}
  2. Sets this to point to that new object
  3. Calls the constructor function
  4. Returns the newly created object
Convention: Constructor names start with a capital letter (Car, Person, Product) to distinguish them from regular functions.

Topic 33: Classes (ES6)

Modern, cleaner syntax for creating objects (introduced in ES6/2015)

🔥 Classes vs Constructors:
Classes are the MODERN way to create objects. They're like "sugar coating" over constructor functions - they look different but work similarly under the hood. Always use classes in new code! 
class Product {
    // constructor method (runs automatically)
    constructor(name, price){
        this.name = name;
        this.price = price;
    }
    
    // Methods (no 'function' keyword needed)
    displayProduct(){
        console.log(`Product: ${this.name}`);
    }
}

const product1 = new Product("Shirt", 19.99);
Feature Constructor Function Class (ES6)
Keyword function class
Constructor Function itself constructor() method
Methods Need function keyword No function keyword
Inheritance Complex (prototypes) Simple (extends)
Modern? ❌ Old way ✅ Modern standard

Class Inheritance

Inheritance Keywords:
• extends - Makes class inherit from parent
• super() - Calls parent class constructor
• Must call super() BEFORE using this in child

Static Methods

Static vs Instance:
• Static: Called on CLASS itself - MathHelper.getArea(10)
• Instance: Called on OBJECTS - product1.displayProduct()
• Use static for utility functions that don't need object data

Topic 34: Destructuring

Extract values from arrays and objects into separate variables

Destructuring:

Array Destructuring

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

// Extract by position
const [first, second, third] = colors;

// Skip elements
const [color1, , color3] = colors;  // Skips "green"

// Rest operator
const [primary, ...others] = colors;

Object Destructuring

const person = {firstName: "Umer", age: 23};

// Extract by property name
const {firstName, age} = person;

// Rename variables
const {firstName: fName} = person;

// Default values
const {country = "India"} = person;
Type Syntax Example
Array [element1, element2] const [x, y] = array
Object {prop1, prop2} const {name, age} = person
Skip Array Item [var1, , var3] const [a, , c] = array
Rename Object {prop: newName} const {name: n} = person
Default Value {prop = value} const {city = "NYC"} = person
Function Params function({prop1, prop2}) function({name, age}){}
Func Params with default function({prop1}) function({name = 'John Doe', age = 'unknown'}){}
📄 loading... 
Loading...