Understanding Objets in JavaScript

Objects in JavaScript are very interesting because internally everything that is not a primitive data type is an object.

What is an Object?

An object is a non-primitive data type that can store multiple values. It is used to store related data and functionality together in a single, manageable unit.

Objects store data as comma-separated key-value pairs.
You can think of an object as a container that holds multiple variables together.

Let's look at a code snippet of an object storing multiple values.

const user = {
   name : "someone",
   age : 12,
   course : "Web Development"

console.log(user.age)

//Output : 12
}

In this example

• name , age , course are keys
• and someone , 12 , Web Development are values

Empty Object :

An object can also be empty.

  // empty object -> {}

This creates an empty object with no properties you can add them later.

Diagram

As you can see in the example above, an object in JavaScript is created using curly braces {}.
You can store the object in a variable.
Now you know how to create an object. But how do we access the values stored inside it?
We can access values from an object in two ways.

1. Using Dot Notation :

This is the most common way to access values from an object.
Dot notation is used when you know the property name and the property name does not contain spaces or special characters.

SYNTAX : objectName.propertyName

const user = {
  name: "someone",
  age: 20
};

console.log(user.name); //someone
console.log(user.age);  // 20

In this example :

• user is the object
• name and age are properties
• user.name access values of the name property

2.Bracket Notation :

This method is useful when property name contains special character like (space or hyphen),starts with a number or when the property name is stored in a variable.

SYNTAX : objectName[propertyName]

const product = {
  "product name": "Laptop",
  price: 50000
};

console.log(product["product name"]); 
//Output : Laptop

We have learned how to create objects and access their values.
Now let's learn how to update objects.

In JavaScript, objects are mutable by default. This means that after an object is created, we can update its properties without creating a new object.

const user = {
  name: "Abhi",
  age: 20
};

user.age = 21;

console.log(user.age); // 21

Reference Types are Mutable :

Objects are reference types. When you assign an object to another variable, JavaScript does not create a new object.
Instead, both variables point to the same object in memory.

Side Effects of mutability :

Because objects store references instead of copies, assigning the same object to multiple variables can lead to side effects.
If one variable updates the object, the change is reflected in all variables that reference that object.

const person = { name: 'John', age: 30 };
const person2 = person; // person2 references the same object as person

person2.age = 31; // Modifying the object through person2

console.log(person.age); // Output: 31 (The change is seen in the original object)

Adding and Deleting Properties in Object :

In JavaScript, you can easily add new properties to an object after it has been created.
You can add a property in the same way you assign a value to a variable.

Let's take an example code :

const user = {
   name : "someone",
   age : 12,
}

In this object, we currently have two properties:

• name
• age

To add a new property, we can use the following syntax:

objectName.propertyName = value

Adding a new property

user.course = "system design"
console.log(user.course);

//Output : system design

Now the user object contains three properties

{
  name: "someone",
  age: 12,
  course: "system design"
}

You can remove a property from an object using delete keyword.

delete user.age;

Now the age property will be removed from the object.

Looping through object keys:

Sometimes we need to go through all the properties of an object. In JavaScript, we can loop through the keys and values of an object.
One common way to do this is by using the for...in loop.

const user = {
  name: "Abhi",
  age: 20,
  course: "Web Development"
};

for (let key in user) {
  console.log(key);
}

//Output : 
 Abhi
 20
 Web Development

In this example loop goes through each key in the object.

Looping through objects values :

const user = {
  name: "Abhi",
  age: 20,
  course: "Web Development"
};

for (let key in user) {
  console.log(key + " : " + user[key]);
}

//Output :
name : Abhi
age : 20
course : Web Development

Conclusion :

Objects are one of the most important data structures in JavaScript. They allow us to store related data and functionality together using key–value pairs.
In this article, we learned how to:
Create objects using curly braces {}
Access object properties using dot notation and bracket notation
Update object properties since objects are mutable by default
Add and delete properties from an object
Loop through object keys and values.

Understanding objects is essential because they are used everywhere in JavaScript, from storing application data to building complex applications.