Skip to main content

Command Palette

Search for a command to run...

Understanding Objects in JavaScript

Updated
•4 min read•View as Markdown

When we start learning JavaScript, we usually store simple values like names, numbers, or booleans in variables. But real-world data is often more complex.

For example, imagine you want to store information about a person:

  • Name

  • Age

  • City

Instead of creating separate variables for each value, JavaScript allows us to group related information together using objects.

Objects are one of the most important concepts in JavaScript and are used everywhere in modern web development.


What Are Objects in JavaScript?

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

Think of it like a profile card where each piece of information has a label.

Example:

let person = {
  name: "Ali",
  age: 22,
  city: "Karachi"
};

Here:

Key Value
name "Ali"
age 22
city "Karachi"

Each piece of information is called a property.

Creating Objects

Objects are created using curly braces {}.

Example:

let student = {
  name: "Sana",
  age: 21,
  course: "Web Development"
};

This object stores information about a student.

Objects help keep related data organized and easy to manage.


Accessing Object Properties

There are two ways to access properties in JavaScript objects.

1️⃣ Dot Notation

This is the most common way.

let person = {
  name: "Ali",
  age: 22
};

console.log(person.name);

Output:

Ali

2️⃣ Bracket Notation

We can also use square brackets.

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

Output:

22

When to Use Bracket Notation

Bracket notation is useful when the property name is stored in a variable.

let key = "name";
console.log(person[key]);

Updating Object Properties

We can easily update values inside an object.

Example:

let person = {
  name: "Ali",
  age: 22
};

person.age = 23;

console.log(person.age);

Output:

23

Here we changed the value of age.


Adding New Properties

JavaScript objects are flexible, which means we can add new properties anytime.

Example:

let person = {
  name: "Ali",
  age: 22
};

person.city = "Karachi";

Now the object becomes:

{
  name: "Ali",
  age: 22,
  city: "Karachi"
}

Deleting Properties

We can also remove properties using the delete keyword.

Example:

let person = {
  name: "Ali",
  age: 22,
  city: "Karachi"
};

delete person.city;

Now the city property is removed.


Looping Through Object Keys

Sometimes we want to print all properties of an object.

We can use the for...in loop.

Example:

let student = {
  name: "Sana",
  age: 21,
  course: "Web Development"
};

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

Output:

name Sana
age 21
course Web Development

This loop goes through each key in the object.


Difference Between Array and Object

Arrays and objects both store data, but they work differently.

Array Object
Stores values in order Stores data as key-value pairs
Uses index numbers Uses property names
Example: [10,20,30] Example: {name:"Ali"}

Example:

let numbers = [10, 20, 30];

let person = {
  name: "Ali",
  age: 22
};

Assignment Example

Let’s create a student object and work with it.

let student = {
  name: "Sana",
  age: 21,
  course: "Web Development"
};

Update One Property

student.age = 22;

Loop Through Keys

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

Output:

name: Sana
age: 22
course: Web Development

Final Thoughts

Objects are a powerful feature in JavaScript that allow us to store and organize related data in a structured way.

Instead of managing many separate variables, objects help keep information together and make programs easier to read and maintain.

As you continue learning JavaScript, you’ll see objects used everywhere—from user data to APIs and full web applications.