Skip to main content

Command Palette

Search for a command to run...

Understanding Objects in JavaScript

Published
5 min read

When you start learning JavaScript, you quickly realize that storing simple values like numbers and strings is easy. But what if you want to represent something more complex — like a person, a student, or a product?

That’s where objects come in.

Objects allow us to store multiple related pieces of information together in a structured way. They are one of the most important building blocks in JavaScript and are used everywhere in real applications.

In this article, we will learn:

  • What objects are and why they are useful

  • How to create objects

  • How to access object properties

  • How to update, add, and delete properties

  • How to loop through object keys

  • The difference between arrays and objects

Let's start with the basics.

What Are Objects in JavaScript?

An object is a collection of key-value pairs.

Each piece of information in an object has:

  • a key (also called a property name)

  • a value

Think of it like a dictionary or a contact card.

Example of a person:

Name: Rith
Age: 22
City: Kolkata

In JavaScript, this can be represented as an object:

const person = {
  name: "Rith",
  age: 22,
  city: "Kolkata"
};

Here:

Key Value
name "Rith"
age 22
city "Kolkata"

So the structure becomes:

key : value

Objects help us group related data together, which makes our code easier to manage.

Creating Objects in JavaScript

The most common way to create an object is using curly braces {}.

Example

const person = {
  name: "Rith",
  age: 22,
  city: "Kolkata"
};

In this example:

  • person is the object

  • name, age, and city are properties

  • "Rith", 22, and "Kolkata" are values

You can store different types of values inside an object:

const user = {
  username: "rith_dev",
  age: 22,
  isDeveloper: true
};

Objects are very flexible and can store almost any kind of data.

Accessing Object Properties

Once we create an object, we need ways to access the stored data.

JavaScript provides two ways to access object properties.

Dot Notation

This is the most common method.

Syntax:

object.property

Example:

const person = {
  name: "Rith",
  age: 22,
  city: "Kolkata"
};

console.log(person.name);

Output:

Rith

Bracket Notation

Another way is bracket notation.

Syntax:

object["property"]

Example:

console.log(person["age"]);

Output:

22

Bracket notation is useful when:

  • property names are stored in variables

  • property names contain spaces

Example:

const key = "city";

console.log(person[key]);

Output:

Kolkata

Updating Object Properties

Objects are mutable, which means their values can be changed.

To update a property, simply assign a new value.

Example:

person.age = 23;

Now the object becomes:

{
  name: "Rith",
  age: 23,
  city: "Kolkata"
}

You can also update using bracket notation:

person["city"] = "Delhi";

Adding and Deleting Properties

Objects can also grow or shrink during runtime.

Adding Properties

You can add a new property simply by assigning it.

Example:

person.job = "Developer";

Now the object becomes:

{
  name: "Rith",
  age: 23,
  city: "Delhi",
  job: "Developer"
}

Deleting Properties

JavaScript provides the delete keyword.

Example:

delete person.city;

Now the object becomes:

{
  name: "Rith",
  age: 23,
  job: "Developer"
}

Looping Through Object Keys

Sometimes we need to go through every property in an object.

JavaScript provides the for...in loop for this.

Example:

const person = {
  name: "Rith",
  age: 22,
  city: "Kolkata"
};

for (let key in person) {
  console.log(key, person[key]);
}

Output:

name Rith
age 22
city Kolkata

Here:

  • key represents the property name

  • person[key] gives the value

Difference Between Arrays and Objects

Beginners often confuse arrays and objects.

Both store multiple values, but they work differently.

Array Example

const fruits = ["apple", "banana", "mango"];

Arrays store values using index numbers.

0 → apple
1 → banana
2 → mango

Access example:

fruits[0]

Object Example

const person = {
  name: "Rith",
  age: 22,
  city: "Kolkata"
};

Objects store values using keys instead of indexes.

name → Rith
age → 22
city → Kolkata

Access example:

person.name

Assignment Example: Student Object

Let's create a simple student object.

const student = {
  name: "Rahul",
  age: 21,
  course: "Computer Science"
};

Updating a Property

student.age = 22;

Adding a Property

student.city = "Mumbai";

Printing All Keys and Values

for (let key in student) {
  console.log(key, student[key]);
}

Output might look like:

name Rahul
age 22
course Computer Science
city Mumbai

This simple example shows how objects can represent real-world data.

Visualizing an Object Structure

You can imagine an object like this:

person
 ├── name → "Rith"
 ├── age → 22
 └── city → "Kolkata"

Each key points to a value, forming a structured data container.

Conclusion

Objects are one of the most powerful features in JavaScript. They allow developers to represent real-world entities like users, products, and students using structured key-value pairs.

In this article we learned:

  • What objects are

  • How to create objects

  • How to access properties

  • How to update, add, and delete properties

  • How to loop through object keys

  • The difference between arrays and objects

Understanding objects is essential because they are used everywhere in JavaScript applications, especially when working with APIs, databases, and complex data structures.

Once you are comfortable with objects, you will find it much easier to build structured and scalable applications.