Boost Your JavaScript Skills with Object Fundamentals

Ever felt like your JavaScript code could use a better way to organize complex data? Objects in JavaScript are your answer, serving as powerful building blocks to store and manage data with flexibility and clarity. In this article, we’ll dive into the essentials of JavaScript objects, uncovering how to create, manipulate, and leverage them to write more efficient code. From key-value pairs to advanced methods, we’ll break down practical examples to help you master objects, whether you’re just starting out or looking to level up your skills. Get ready to unlock the full potential of objects in your JavaScript projects!

What is Object?

JavaScript object is a variable that can store multiple data in key-value pairs.

An object in JavaScript is a data structure used to store related data collections. It stores data as key-value pairs, where each key is a unique identifier for the associated value. Objects are dynamic, which means the properties can be added, modified, or deleted at runtime.

Here's a quick example of the JavaScript object.

const person = {
   name = "John"
   age = 21
};
console.log(person);  //{name:'john',age:21}

Here, person is an object that stores the name and the age of person as key-value pairs.

Let’s dive deeper into object. object can have properties and method of their own. For example a car

const car = {
 name="Audi"
 model=2024
 weight="900kg"
 start:function(){
 console.log("car is starting")
}
 drive:function(){
 console.log(" Driving a car")
}
 stop:function(){
 console.log("car is stoped")
}
}

Object Properties

A real life car has properties like weight and color:

car.name = “Audi“, car.model = 2024, car.weight = “900kg”.

Car objects have the same properties, but the values differ from car to car.

Object Methods

A real life car has methods like start and stop:

car.start(), car.drive(), car.stop().

Car objects have the same methods, but the methods are performed at different times.

Object Creation

The syntax of JavaScript object is:

const objectName = {
    key1: value1,
    key2: value2,
    ...,
    keyN: valueN
};

Here,

• objectName - Name of the object.

• key1: value1 - The first key-value pair.

• key2: value2 - The second key-value pair.

• keyN: valueN - The Nth key-value pair.

Each key-value pair has a colon : between them and is separated by a comma ,.

Access Object Properties

You can access the value of a property by using its key.

1. Using Dot Notation

Access object properties using a dot (.) followed by the property name. Used when names are valid identifiers (e.g., no spaces, special characters, or starting with numbers).

const person = {
   name = "John"
   age = 21
};
console.log(person.name);  //{name:'john'}
console.log(person.age);  //{age:21}

2. Using Bracket Notation

Access object properties using square brackets ([]) with the property name as a string or variable. Used when property names are dynamic (e.g., stored in a variable) and contain spaces, special characters, or start with numbers.

const person = {
   "first name" = "John"
   age = 21
};
console.log(person["first name"]);  //{name:'john'}
console.log(person["age"]);  //{age:21}

JavaScript Object Operations

In JavaScript, we can perform various operations on object properties like modifying, adding, deleting, and so on. Let's discuss some of them.

1. Modify Object Properties

We can modify object properties by assigning a new value to an existing key. For example,

const person = {
   name = "John"
   age = 21
};
console.log(person);  //{name:'john',age:21}
//modify property
person.age=25
console.log(person);  //{name:"John",age:25}

2. Add Object Properties

In the example, the keys city do not exist within the object. Hence, when we assign value to that keys, new property are added to the object.

const person = {
   name = "John"
   age = 21
};
console.log(person);  //{name:'john',age:21}
person.city="Delhi"
console.log(person);  //{name:'john',age:21,city:'Delhi'}

3. Delete Object Properties

We can remove properties from an object using the delete operator. For example,

const person = {
   name = "John"
   age = 21
};
console.log(person);  //{name:'john',age:21}
delete person.age
console.log(person);  //{name:'john'}

JavaScript Object Methods

We can also include functions inside an object. For example,

const person = {
   name = "John"
   age = 21
   greet:function(){
     console.log("John says Hi!");
   }
};

person.greet() //John says Hi!

Copying Object in js

In JavaScript, copying objects is a crucial concept because objects are reference types, meaning a simple assignment creates a reference to the same object, not a new copy.

Why Copying Objects Matters

Assigning an object to a new variable doesn’t create a new object; it references the original. Changes to the new variable affect the original object. Copying creates an independent object, preserving the original data.

Role of Heap and Stack in Object

Ever wondered how JavaScript manages objects behind the scenes? The heap and stack are key to understanding this. The stack

is a fast, organized memory space storing primitive values (like numbers or strings) and function call details. For objects, it holds a reference—a pointer to the object’s location.

The heap, a larger, flexible memory area, stores the actual object data, like key-value pairs in { name: "Roy", age: 35 }. When you assign an object to a new variable, the stack copies the reference, not the heap data, so changes affect the original. This explains why shallow copies (e.g., spread operator) duplicate only top-level properties, while deep copies (e.g., structuredClone) create new heap data. Understanding heap and stack helps you manage objects, avoid unintended changes, and write efficient JavaScript code

Methods to copy Objects

1. Shallow Copy

A shallow copy duplicates the top-level properties of an object but not nested objects or arrays (they remain references).

Using Spread Operator (...):

A concise way to create a shallow copy, widely used for its simplicity.

let original = { name: "Bob", info: { age: 25 } };
let copy = { ...original };
copy.name = "Bob"; // Doesn’t affect original
console.log(original.name); // Output: Alice
copy.info.age = 26; // Affects nested object
console.log(original.info.age); // Output: 26

2. Deep Copy

A deep copy duplicates all levels of an object, including nested objects and arrays, creating a fully independent copy.

Using JSON Methods:

Converts the object to a JSON string and back, but only works for JSON-serializable data (e.g., no functions or undefined).

let original = { name: "Alice", info: { age: 25 } };
let copy = JSON.parse(JSON.stringify(original));
copy.info.age = 26; // Doesn’t affect original
console.log(original.info.age); // Output: 25

In this article, we’ve journeyed through the essentials of JavaScript objects, uncovering their power as flexible data structures. From using dot and bracket notation to access properties, to mastering shallow and deep copying techniques, and understanding the roles of heap and stack in memory management, we’ve laid a solid foundation. These basics equip you to organize and manipulate data effectively, but JavaScript objects offer even more advanced features to explore, like prototypes and destructuring. By grasping these fundamentals, you’re ready to write cleaner, more efficient code.