2025-02-09

Understanding Object In JavaScript

JavaScript is one of the most popular programming languages for web development.
One of its core concepts is objects, which help store and manage data efficiently.

In this article, we’ll explore objects in JavaScript with examples and a behind-the-scenes look at how they’re stored in memory.

🧩 What is an Object in JavaScript?

An object in JavaScript is a collection of key-value pairs, where keys are strings (or Symbols) and values can be of any data type — numbers, strings, arrays, functions, or even other objects.

💡 Think of an object as a real-world entity.
For example, a car has multiple properties like color, brand, model, and speed.
Similarly, in JavaScript, we can create a car object:

const car = {
    brand: "BMW",
    model: "M340i",
    color: "Black", // my fav 🥰
    speed: 253
};

Here, brand, model, color, and speed are keys (also called properties), and their respective values are stored inside the object.

Accessing and Modifying Object Properties

You can access object properties with dot notation means objectName.propertyName. here car is object name and brand is property.

console.log(car.brand);//Print BMW
You can modify a property of object. assign value to specific property.

car.color = "white";
console.log(car.color); // Output: white

How Objects are Stored in Memory

primitive data types (numbers strings), which are stored directly in the stack memory, objects are stored by reference in the heap memory. This means that when you assign an object to a variable, JavaScript stores a reference (memory address) to the actual object.

Stack vs. Heap Memory

Primitive Data Types (Numbers, Strings, Booleans):

Stored directly in the stack.

Each variable holds its own copy of the value.

let x = 10;
let y = x;
y = 20;
console.log(x); // Output: 10

Here, changing y does not affect x since primitives are copied by value.

Objects (Arrays, Objects):

Stored in the heap memory.

Variables hold a reference to the object, not the actual object itself.

let obj1 = { name: "Alice" };
let obj2 = obj1;
obj2.name = "Bob";
console.log(obj1.name); // Output: Bob

Here, both obj1 and obj2 point to the same memory address, so modifying one affects the other.

Shallow Copy

A shallow copy means using the spread operator (...) to copy an object, but it only copies the first layer. If the object has nested objects inside, those are not duplicated—only their references are copied.

let objA = { name: "Renil", address: { city: "Rajkot" } };
let objB = { ...objA };

objB.address.city = "Ahmedabad";
console.log(objA.address.city); // Output: Ahmedabad

Deep Copy

A deep copy makes a completely independent copy of an object, including all nested objects.

Using JSON.parse(JSON.stringify(obj)): Stringify is convert object to string, (we can copy string) and parse convert string to object.

let objC = { name: "Renil", address: { city: "Rajkot" } };
let objD = JSON.parse(JSON.stringify(objC));

objD.address.city = "Ahmedabad";
console.log(objC.address.city); // Output: Rajkot

Now that you understand objects in JavaScript, try creating your own objects and explore how they behave in different scenarios

Stack : Not Grow , Read Fast

heap : Can Grow , Read Slow