Tvisha Sharma

Understanding Objects in JavaScript - The Office Laptop Saga 💻

Tvisha Sharma's photo
Tvisha Sharma
·

3 min read

Understanding Objects in JavaScript - The Office Laptop Saga 💻

Table of contents

Imagine you’ve just joined a fancy IT job (ik you have secretly practised DSA😏). You get a brand-new office laptop 🖥️, but little do you know, it has a personality of its own. It tracks your browsing history (oops 😬), reminds you of deadlines, and somehow always runs out of battery right before an important meeting. In JavaScript, we can represent this laptop using an object! 🎉

What are Objects? 🤔

Objects in JavaScript represent real-world entities (like your office laptop 💻). An entity is anything that has properties (attributes like brand, battery life, browsing history) and methods (actions like sending reminders, crashing unexpectedly).

let officeLaptop = {             
  brand: "HP ProBook",
  batteryLife: "10 hours",
  browsingHistory: ["JS tutorials", "TMKOC", "instagram.com"],
  remainingStorage: "512GB",
  autoShutdownTime: null,

  showStorage: function(){
    console.log("Remaining Storage: ", this.remainingStorage);
  },

  // Another way of writing a function inside an object
  clearHistory(){
    this.browsingHistory = [];
    console.log("Browsing history cleared! Hopefully... 😅");
  }
};

console.log(officeLaptop.showStorage());  
console.log(officeLaptop.clearHistory());

Prototype - The Laptop’s Hidden Features 🔧

JavaScript objects have a special property called prototype. Think of it as your laptop’s hidden settings menu – a place where extra features are stored, but you don’t always see them upfront.

Even arrays in JavaScript are technically objects! If you check the type of an array, it says object because it inherits properties from the prototype.

We can set a prototype using __proto__:

let hackerMode = {
  secretFeature: "Bypass IT restrictions 🕵️‍♂️"
};

hackerMode.__proto__ = officeLaptop;
console.log(hackerMode.batteryLife); // Inherits from officeLaptop

Classes in JavaScript - The Laptop Factory 🏭

Think of a class as a blueprint for making multiple laptops! Instead of writing an object manually every time, we can create a class Laptop, and then use it to create multiple laptops.

class Laptop {
    constructor(brand, batteryLife, storage) {
        this.brand = brand;
        this.batteryLife = batteryLife;
        this.storage = storage;
    }

    showStorage(){
        console.log(`Remaining Storage on ${this.brand}: ${this.storage}`);
    }
}

let myLaptop = new Laptop("hp proBook", "14 hours", "256GB");
myLaptop.showStorage();

Constructor - The Laptop’s Boot-up Process 🔄

The constructor is like your laptop’s boot-up process! When you use new, the constructor automatically runs and sets up the object (like initializing the system).

There are two types of constructors:

1. Default Constructor 🛠️

If we create a class but don’t define a constructor, JavaScript automatically creates one for us!

class Laptop {}
const newLaptop = new Laptop(); // JavaScript creates a hidden constructor behind the scenes.

What’s actually happening?

2. Parameterized Constructor 🔌

This is when we explicitly define a constructor to take parameters.

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

const myLaptop = new Laptop("Lenovo ThinkPad");
console.log(myLaptop.brand); // Lenovo ThinkPad 💻

What’s happening here is when we create an object using a class, the constructor gets called automatically, here the object myLaptop is created and constructor got called and brand gets initiated.

Prototype Magic - The Laptop’s Hidden OS 🕶️

When we create an object from a class, it automatically gets linked to the prototype of that class.

console.log(Laptop.prototype === myLaptop.__proto__); // true

This means that any method we define in Laptop (like showStorage()) is available in myLaptop because they share the same prototype!

Conclusion 🎉

JavaScript objects are like office laptops 💻 – they have properties (brand, storage) and methods (showStorage). Classes act as blueprints for making objects, and constructors help in setting them up. The prototype chain allows objects to inherit features from their parent, making JavaScript flexible and powerful!

So next time you work with JavaScript objects, just imagine your own office laptop, full of quirks, secret features, and the occasional blue screen of death! 😂🔥

Thanks for reading, Thanks for your time <3

ChaiCodeJavaScript