JavaScript OOP and Classes Made Simple: A Fun, Beginner-Friendly Breakdown 🚀💡

Hey coder friend 👋,

I know how confusing JavaScript OOP (Object-Oriented Programming) can feel at first. I’ve been there too — staring at code, rereading tutorials, watching videos over and over, wondering, "Wait, what even IS abstraction?" 😵‍💫

Trust me, this stuff doesn’t always click on the first try. It might take a few weeks, months, or even longer. And that’s perfectly okay 💙. Eventually, these concepts start to make sense, and you’ll look back and smile at how far you’ve come.

Let’s walk through it all step by step — using simple language, relatable examples, and of course, emojis to help us visualize things 🧠✨

☕ What is Object-Oriented Programming (OOP)?

Object-Oriented Programming is a way of writing code where we group related data and behavior (functions) into objects. Think of it like packing all the related things into a single box 📦.

Instead of writing many scattered variables and functions, we create reusable objects that represent real-world things — like a Car, User, or Animal.

You’ve probably already used objects like this:

const person = {
  name: 'Ali',
  age: 30,
  greet() {
    console.log(`Hi, I'm ${this.name}`);
  }
};

But OOP takes it to the next level with blueprints called constructor functions and classes.

📜 OOP Before ES6: Constructor Functions

Before JavaScript got classes in ES6, we used constructor functions to create object blueprints.

🔧 Constructor Function Example:

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

Person.prototype.greet = function() {
  console.log(`Hello, my name is ${this.name}`);
};

const user1 = new Person('Hassani', 25);
user1.greet();

💻 Console Output:

Hello, my name is Hassani

👨‍🏫 What’s Happening Here? (Explained in Depth)

Let’s break this down line by line, like we’re talking to a total beginner 💬

function Person(name, age) {

🔹 This defines a constructor function named Person. Think of this like a recipe 📝 for baking a cake — you can use it over and over to create as many cakes (people) as you want.

It accepts two ingredients (parameters): name and age.

  this.name = name;
  this.age = age;

🔹 Here’s where the magic happens 🪄:

• this.name = name; means: "The new object’s name property should be whatever was passed in."

• this.age = age; works the same for age.

If you do new Person('Hassani', 25), you're basically creating:

{
  name: 'Hassani',
  age: 25
}

this refers to the object that’s being created when we use new.

}

🔹 This closes the function. You now have a constructor that can make people!

Person.prototype.greet = function() {
  console.log(`Hello, my name is ${this.name}`);
};

🔹 This adds a method to the Person prototype. But why? 🤔

If you added greet() directly inside the constructor, each object would get its own copy — not efficient!

So we attach it to the prototype. Now, all Person objects share one single greet function. Smart! 💡

const user1 = new Person('Hassani', 25);

🔹 We create a person! 🧍‍♂️

• user1 becomes a new object based on the Person blueprint.

• It will have name = 'Hassani', age = 25, and can use the shared greet() method.

user1.greet();

🔹 We call the method. JavaScript sees user1 doesn’t have greet() directly, so it looks up the chain (prototype) and finds it there 🔍.

The console shows:

Hello, my name is Hassani

Next up: We’ll now dive into the 4 Pillars of OOP — Abstraction, Encapsulation, Inheritance, and Polymorphism — first using constructor functions, and then using modern ES6 classes!

You don’t need to memorize everything perfectly. Just absorb the ideas slowly 🌱

🧠 Mini Glossary

To help you along the way:

• Class → A blueprint/template to create objects.

• Object → An actual thing created from a class (an instance).

• Constructor → A special function that runs when you make a new object.

• Method → A function that lives inside an object.

• Prototype → A hidden object that helps share methods across instances.

• Instance → A specific object made from a class (e.g. const phone = new Phone()).

• Private (#) → Keeps a variable or method safe inside the class.

Let’s continue the blog now and dive into the ES6 Classes section, using your iPhone/Camera analogy to explain Abstraction, Encapsulation, Inheritance, and Polymorphism in a way that truly sticks.

🎯 The 4 Pillars Again — Using ES6 Classes (Modern JavaScript)

JavaScript introduced classes in ES6, and they made OOP much cleaner and easier to understand. They’re basically syntactic sugar 🍬 over constructor functions and prototypes — just a nicer way to write the same thing.

Let’s revisit the 4 pillars, but this time, we’ll use a more real-world analogy to explain each one:
🧠 Think of a smartphone (like an iPhone) or a digital camera as our object!

🕵️‍♂️ 1. Abstraction — Hiding Complex Stuff

Think of your iPhone or Camera. 📸
You press a button to take a picture — but inside, so much is happening: focusing the lens, adjusting the light, processing the image.
Do you need to know how all that works? Nope. Just press one button and boom — selfie! 📷

That’s abstraction: showing only what’s necessary, hiding the rest.

class Camera {
  constructor(brand) {
    this.brand = brand;
  }

  #adjustSettings() {
    console.log("🔧 Adjusting aperture, ISO, and shutter speed...");
  }

  takePhoto() {
    this.#adjustSettings(); // internal details are hidden
    console.log(`📸 Click! Photo taken with ${this.brand}`);
  }
}

const myCamera = new Camera("Canon");
myCamera.takePhoto();

🖥 Output:

🔧 Adjusting aperture, ISO, and shutter speed...
📸 Click! Photo taken with Canon

• #adjustSettings() is private — the user can't call it directly.

• They just use takePhoto(), and everything else is abstracted away.

🛡️ 2. Encapsulation — Keeping Data Safe

Let’s say you have a phone that tracks your screen time. You don’t want an app messing with the screen time data, right?

Encapsulation is like putting your important data behind a lock 🔐 — only certain methods can access or change it.

class Phone {
  #screenTime = 0;

  use(hours) {
    if (hours > 0) {
      this.#screenTime += hours;
    }
  }

  getScreenTime() {
    return `${this.#screenTime} hours`;
  }
}

const myPhone = new Phone();
myPhone.use(2);
console.log(myPhone.getScreenTime()); // 2 hours
console.log(myPhone.#screenTime);     // ❌ Error! Private property

🖥 Output:

2 hours
Uncaught SyntaxError: Private field '#screenTime' must be declared in an enclosing class

• The #screenTime is private and can't be accessed from outside. That’s encapsulation.

👪 3. Inheritance — Child Gets Traits from Parent

Just like a camera app inherits features from your phone (like storage, battery), classes can inherit from other classes.

Let’s build a base Device class and have other gadgets inherit from it!

class Device {
  constructor(name) {
    this.name = name;
  }

  powerOn() {
    console.log(`${this.name} is now ON 🔋`);
  }
}

class Camera extends Device {
  takePhoto() {
    console.log(`${this.name} takes a photo 📸`);
  }
}

const canon = new Camera("Canon G7X");
canon.powerOn();   // inherited method
canon.takePhoto(); // its own method

🖥 Output:

Canon G7X is now ON 🔋
Canon G7X takes a photo 📸

• Camera extends Device, inheriting its methods.

• In real life, your camera inherited power-on ability from being a device 📱🔌.

🌀 4. Polymorphism — Same Method, Different Behavior

Imagine pressing the "Play" button:

• On a phone: plays music 🎵

• On a camera: plays a slideshow 🖼️

• On a smart TV: plays a video 🎬

Same button, different result depending on the device.

Let’s see this in code:

class Device {
  play() {
    console.log("Playing something 🎮");
  }
}

class Phone extends Device {
  play() {
    console.log("📱 Playing music");
  }
}

class Camera extends Device {
  play() {
    console.log("📸 Playing slideshow");
  }
}

const myPhone = new Phone();
const myCamera = new Camera();

myPhone.play();   // 📱 Playing music
myCamera.play();  // 📸 Playing slideshow

🖥 Output:

📱 Playing music
📸 Playing slideshow

That’s polymorphism — the same method play() behaves differently depending on the class that’s using it.

💡 Wrap-Up of the 4 Pillars

🧠 Why Use OOP in JavaScript?

So... why should you care about all this Object-Oriented Programming stuff?

Here’s why developers (like you 😎) love OOP — especially when building large projects:

🧼 1. Clean Code

OOP helps organize your code neatly into objects and classes.
You avoid writing spaghetti code 🍝 and instead, build readable, structured blocks.

// Without OOP
let name = "Canon";
let battery = 50;
function takePhoto() {
  // ...
}

// With OOP
class Camera {
  constructor(name) {
    this.name = name;
    this.battery = 50;
  }

  takePhoto() {
    // ...
  }
}

🔁 2. Reusability

With inheritance, you can reuse common logic in many places.
Build once, use everywhere. No copy-pasting code again and again.

class Device {
  powerOn() {
    console.log("Powering on...");
  }
}

class Phone extends Device {} // Phone inherits powerOn()

(📌 extends means the class is inheriting from another one.)

🔒 3. Better Security (Encapsulation)

You can protect data by keeping it private (like #password, #pin).
This prevents bugs and misuse.

class Account {
  #pin = 1234;

  checkPin(input) {
    return input === this.#pin;
  }
}

(📌 The # before a variable means it’s private and not accessible from outside.)

⚙️ 4. Powerful Flexibility (Polymorphism)

Different classes can use the same method name but do things their own way.

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

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

(📌 This is polymorphism, and it helps when many objects need similar methods but with their own behavior.)

🔧 5. Based on Real-World Concepts

OOP is modeled after real things.
Think of:

• A User

• A Photo

• A Product

• A Button

Each has properties (like name, price) and methods (like click(), addToCart()).

This makes your code feel natural and easier to design.

🧪 Quick Quiz! (No Pressure 😊)

Let's see how much you've picked up so far.
Grab a pen and try answering before checking the answers! 🖊️✍️

🧩 Question 1:

What does this line do?

const user = new Person('Hassani', 25);

A. It deletes a person called Hassani
B. It creates a new object using the Person blueprint
C. It assigns 25 to a global variable
D. It runs a for loop

🧩 Question 2:

Which keyword helps classes inherit from another class?

A. new
B. prototype
C. extends
D. superpowers

🧩 Question 3:

Which of these is an example of encapsulation?

A. Sharing all your variables with the whole app
B. Keeping methods inside a class
C. Writing only console logs
D. Using alerts in every file

🧩 Question 4:

What’s the main benefit of using the prototype?

A. To create bugs
B. To copy code to every object
C. To share methods across objects without duplicating them
D. To hack into the matrix

How did you do? 😄 If you got even 1 or 2 right, that’s a win!
If not — don’t stress. We’re all learning together 💪

Now that we’ve had our little review, let’s move on and see why developers often prefer OOP over the traditional (procedural) way of writing code...

Awesome! Let’s jump right in and explore Procedural Programming vs Object-Oriented Programming — and let’s make it fun and visual using a relatable example: a 📸 Camera App! (or you can imagine a Phone or a Bakery, but we’ll go with the Camera for now since it works great for this concept).

⚔️ Procedural Programming vs Object-Oriented Programming

Before we dive into code, let’s first understand what these two styles really mean in plain English:

🧾 Procedural Programming (PP)

This is the traditional style of coding — it’s like giving your computer a step-by-step recipe 📃.
You write functions and variables that operate separately.

Think of it like this:

“Hey computer, take this image, resize it, apply a filter, compress it, then upload it.”

Everything is done step by step, but data and functions are kept separate.

🧱 Object-Oriented Programming (OOP)

OOP bundles everything together into objects that represent real-world things.
It’s like saying:

“Hey camera object, please take a photo, apply a filter, and upload it.”

You group related data + behavior inside an object. Neat and clean.

🎥 Real-World Example: A Camera App

Let’s compare both styles by imagining we’re building a basic photo app.

🧾 Procedural Way (Messy and Scattered)

// Data
let image = null;
let isCameraOpen = false;

// Functions
function openCamera() {
  isCameraOpen = true;
  console.log('Camera opened');
}

function captureImage() {
  if (isCameraOpen) {
    image = '📸 Image captured!';
    console.log(image);
  }
}

function applyFilter(img, filterName) {
  console.log(`Applying ${filterName} to ${img}`);
}

function uploadImage(img) {
  console.log(`Uploading: ${img}`);
}

// Execution
openCamera();
captureImage();
applyFilter(image, 'Black & White');
uploadImage(image);

🚫 Problem?

• Everything is scattered 🧩

• Functions depend on global variables 😬

• Hard to manage as the app grows

• Anyone can change image by mistake (no protection)

🧱 Object-Oriented Way (Organized and Scalable)

class Camera {
  constructor() {
    this.image = null;
    this.isCameraOpen = false;
  }

  open() {
    this.isCameraOpen = true;
    console.log('Camera opened');
  }

  capture() {
    if (this.isCameraOpen) {
      this.image = '📸 Image captured!';
      console.log(this.image);
    }
  }

  applyFilter(filterName) {
    if (this.image) {
      console.log(`Applying ${filterName} to ${this.image}`);
    }
  }

  upload() {
    if (this.image) {
      console.log(`Uploading: ${this.image}`);
    }
  }
}

// Using the Camera
const myCamera = new Camera();

myCamera.open();
myCamera.capture();
myCamera.applyFilter('Black & White');
myCamera.upload();

✅ Much better!

• Code is clean and grouped 👏

• Easy to reuse and scale

• Data is protected inside the object

• Looks more like how we think about things in real life 🎯

📌 Recap:

🧠 Why OOP is Preferred (Especially in Bigger Projects)

• Easier to manage complexity as your codebase grows 🧩

• You can create reusable components like User, Product, Order 📦

• Real-world modeling feels more natural and intuitive

• Powerful concepts like inheritance, encapsulation, and polymorphism are built in

• Better for working in teams and collaborative projects 🤝

You're right to ask why we should revisit the pillars of OOP with classes — it’s because now that we’ve covered procedural programming and why OOP is so useful for larger projects, we can revisit the core principles of OOP using the modern ES6 class syntax. This will give readers a fresh perspective after learning about constructor functions earlier on. 🧠

The ES6 class syntax is cleaner, easier to understand, and much more readable compared to the older style. So, let’s take a closer look at the 4 Pillars of OOP and demonstrate them using ES6 Classes.

📚 Revisited: The 4 Pillars of OOP with ES6 Classes

We’re going to use Camera examples once again to make things feel practical and fun. 🎥

1. 🕵️‍♂️ Abstraction — Hiding the Complex Stuff

Abstraction is all about hiding unnecessary details from the user and only exposing what’s needed. It simplifies things.

In our Camera App, we don’t need to show the user how the camera works under the hood. We just want them to use simple functions like takePicture() or applyFilter().

class Camera {
  constructor() {
    this.image = null;
    this.isCameraOpen = false;
  }

  open() {
    this.isCameraOpen = true;
    console.log('Camera opened');
  }

  capture() {
    if (this.isCameraOpen) {
      this.image = '📸 Image captured!';
      console.log(this.image);
    }
  }

  applyFilter(filterName) {
    console.log(`Applying ${filterName} to ${this.image}`);
  }

  upload() {
    console.log(`Uploading: ${this.image}`);
  }
}

// Usage
const myCamera = new Camera();
myCamera.open();
myCamera.capture();
myCamera.applyFilter('Black & White');
myCamera.upload();

🧠 Explanation:
In this code, the user doesn’t need to know how the camera actually works behind the scenes (like focusing the lens, adjusting the aperture, etc.). They just call capture(), and everything else happens internally.

2. 🛡️ Encapsulation — Protecting the Data

Encapsulation is about keeping data safe inside the object and only allowing access through public methods. This helps prevent accidental changes.

class Camera {
  constructor() {
    this.image = null;  // Private data
    this.isCameraOpen = false;  // Private data
  }

  open() {
    this.isCameraOpen = true;
    console.log('Camera opened');
  }

  capture() {
    if (this.isCameraOpen) {
      this.image = '📸 Image captured!';
      console.log(this.image);
    }
  }

  applyFilter(filterName) {
    console.log(`Applying ${filterName} to ${this.image}`);
  }

  upload() {
    console.log(`Uploading: ${this.image}`);
  }

  // A public method to access image (getter)
  getImage() {
    return this.image;
  }
}

// Usage
const myCamera = new Camera();
myCamera.open();
myCamera.capture();
console.log(myCamera.getImage());  // Access through a method (getter)

🧠 Explanation:
We kept the image and isCameraOpen properties private. They are only accessible within the class itself. The user cannot directly modify these values. They can only interact with the camera through public methods like open(), capture(), applyFilter(), and upload().

3. 👪 Inheritance — Reusing Code

Inheritance allows one class to inherit properties and methods from another class. This is helpful for building on top of existing functionality.

For example, imagine we have a base class called Device, and our Camera can inherit from it.

class Device {
  constructor(name) {
    this.name = name;
  }

  powerOn() {
    console.log(`${this.name} is now ON!`);
  }
}

class Camera extends Device {
  constructor(name) {
    super(name); // Call the parent class constructor
    this.isCameraOpen = false;
    this.image = null;
  }

  open() {
    this.isCameraOpen = true;
    console.log(`${this.name} camera opened`);
  }

  capture() {
    if (this.isCameraOpen) {
      this.image = '📸 Image captured!';
      console.log(this.image);
    }
  }
}

// Usage
const myCamera = new Camera('Nikon');
myCamera.powerOn();  // Inherited method
myCamera.open();
myCamera.capture();

🧠 Explanation:
In this example, the Camera class inherits the powerOn() method from the Device class. This helps us avoid rewriting code for common functionality. We just extend it!
The keyword super() calls the constructor of the parent class (Device).

4. 🌀 Polymorphism — Same Method, Different Behavior

Polymorphism allows different objects to respond to the same method in their own way. The method name is the same, but the behavior changes depending on the object.

Let’s say we want to have multiple devices (like a Phone and a Camera) that both have a takePicture() method, but each device behaves differently when taking a picture.

class Device {
  constructor(name) {
    this.name = name;
  }

  takePicture() {
    console.log('Taking a generic picture...');
  }
}

class Camera extends Device {
  constructor(name) {
    super(name);
  }

  takePicture() {
    console.log('📸 Camera taking a picture!');
  }
}

class Phone extends Device {
  constructor(name) {
    super(name);
  }

  takePicture() {
    console.log('📱 Phone taking a selfie!');
  }
}

// Usage
const camera = new Camera('Canon');
const phone = new Phone('iPhone');

camera.takePicture(); // Camera taking a picture!
phone.takePicture(); // Phone taking a selfie!

🧠 Explanation:
Both Camera and Phone have the takePicture() method, but the behavior is different for each. That’s polymorphism — the same method name, but different behavior based on the object calling it. 💥

📌 Summary of the 4 Pillars of OOP:

🏁 Conclusion

We’ve covered the 4 key principles of OOP: Abstraction, Encapsulation, Inheritance, and Polymorphism, showing how they help organize code and make it easier to manage.

OOP is perfect for larger projects because it makes the code modular, scalable, and maintainable. By using these principles, you’ll be able to write cleaner, more efficient code — whether you’re working solo or in a team. 💻🚀

With these concepts under your belt, you're now more familiar with how OOP helps in organizing code and how it scales in large projects. 🎯

If anything still feels a bit tricky, don't worry! With practice, OOP will become second nature. It’s a powerful tool that, once understood, can make your code much cleaner, maintainable, and easier to scale over time. 🧑‍💻✨

Now it’s time to practice and apply what you’ve learned. You’ve got this! 🙌