Skip to main content

Command Palette

Search for a command to run...

Understanding JavaScripts Objects

Updated
4 min readView as Markdown

JavaScript is one of the most popular programming languages used for web development. One of the most important concepts in JavaScript is Objects.

Objects help us store related data together in a structured way. In this article, we will understand what objects are, why they are useful, and how to work with them in JavaScript.


What Are Objects in JavaScript?

An object is a collection of data stored as key-value pairs.

Each piece of data has:

  • Key (property name)

  • Value (data stored in that property)

Think of an object like a real-world person.

Example:

Name: Parth
Age: 21
City: Hyderabad

In JavaScript, this can be stored like this:

const person = {
  name: "Parth",
  age: 21,
  city: "Hyderabad"
};

Here:

  • name, age, city → keys

  • "Parth", 21, "Hyderabad" → values

So an object helps us group related information together.


Why Are Objects Needed?

If we store data separately, it becomes messy.

Example without object:

const name = "Parth";
const age = 21;
const city = "Hyderabad";

But these values are related to the same person. So objects help us organize them.

Advantages of objects:

  • Organize related data together

  • Make code more readable

  • Easy to update and manage data


Creating Objects

Objects are created using curly braces {}.

Example:

const person = {
  name: "Rahul",
  age: 20,
  city: "Delhi"
};

Each property is written as:

key : value

Properties are separated using commas.


Accessing Object Properties

We can access object properties in two ways.

1️⃣ Dot Notation

console.log(person.name);
console.log(person.age);

Output:

Rahul
20

This is the most common way to access object properties.


2️⃣ Bracket Notation

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

Output:

Delhi

Bracket notation is useful when:

  • Property name is dynamic

  • Property name has spaces


Updating Object Properties

We can change the value of a property easily.

Example:

person.age = 21;

console.log(person.age);

Output:

21

So we simply assign a new value.


Adding New Properties

We can also add new properties to an object.

Example:

person.country = "India";

console.log(person);

Output:

{
  name: "Rahul",
  age: 21,
  city: "Delhi",
  country: "India"
}

Deleting Properties

To remove a property we use the delete keyword.

Example:

delete person.city;

console.log(person);

Now the city property will be removed.


Looping Through Object Keys

To iterate over object properties we use a for...in loop.

Example:

const person = {
  name: "Rahul",
  age: 21,
  city: "Delhi"
};

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

Output:

name Rahul
age 21
city Delhi

Here:

  • key represents the property name

  • person[key] gives the value


Array vs Object

Arrays and objects both store data, but they are used differently.

Array Object
Uses index numbers Uses keys
Ordered collection Key-value structure
Example: [10, 20, 30] Example: {name: "Rahul"}

Example:

const numbers = [10, 20, 30]; // array

const person = { name: "Rahul", age: 21 }; // object

Arrays are best for lists, while objects are best for structured data.


Assignment Example: Student Object

Let’s create an object representing a student.

const student = {
  name: "Aman",
  age: 19,
  course: "Computer Science"
};

Update a property

student.age = 20;
for (let key in student) {
  console.log(key + ": " + student[key]);
}

Output:

name: Aman
age: 20
course: Computer Science

Visual Representation of an Object

person
 ├── name  → "Rahul"
 ├── age   → 21
 └── city  → "Delhi"

Each key points to a value.


Conclusion

Objects are one of the most powerful features of JavaScript. They allow us to store related information together using key-value pairs.

In this article, we learned:

  • What objects are

  • How to create objects

  • Accessing properties

  • Updating and deleting properties

  • Looping through objects

  • Difference between arrays and objects

Understanding objects is an important step toward mastering JavaScript and building real-world applications.