Understanding Objects in JavaScript

When you build real-world applications, you often work with structured data:

• A person with name, age, and city

• A product with title, price, and stock

• A student with name, course, and grade

In JavaScript, the most common way to represent this kind of structured data is with an object.

This article will cover:

• What objects are and why we need them

• How to create objects

• How to access and update properties

• How to add and delete properties

• How to loop through object keys

• A clear comparison between arrays and objects

• A simple assignment to practice

What Is an Object in JavaScript?

An object is a collection of key–value pairs.

• The key (also called a “property name”) is usually a string.

• The value can be anything: number, string, boolean, array, another object, or even a function.

Real-world analogy:

• Think of an object like a dictionary:

  • Each word (key) has a meaning (value).

• Or like a record in a form:

  • Name: Alice

  • Age: 25

  • City: Delhi

Example: person object

const person = {

name: "Alice",

age: 25,

city: "Delhi"

};

Here:

• name, age, city → keys (property names)

• "Alice", 25, "Delhi" → values

We use objects to group related data together in a meaningful way.

Why Do We Need Objects?

Without objects, we might do something like this:

const name = "Alice";

const age = 25;

const city = "Delhi";

This works, but:

• All three variables belong together.

• It’s harder to pass them around as one unit.

• If you want to manage many people, it gets messy fast.

With objects:

const person = {

name: "Alice",

age: 25,

city: "Delhi"

};

Benefits:

• Organized: related data is grouped.

• Readable: person.name clearly tells you what it is.

• Scalable: you can create many person objects (e.g., in an array of people).

---

Creating Objects

There are multiple ways to create objects. The simplest and most common is the object literal.

1. Object literal syntax (recommended for beginners)

const person = {

name: "Alice",

age: 25,

city: "Delhi"

};

• Curly braces {} Define the object.

• Inside, you list key: value pairs, separated by commas.

2. Creating an empty object, then adding properties

const person = {}; // empty object

person.name = "Alice";

person.age = 25;

person.city = "Delhi";

Both approaches are valid. Use the one that makes your code clearer.

---

Accessing Object Properties

You can access properties in two main ways:

• Dot notation

• Bracket notation

Dot notation

This is the most common and easiest to read.

const person = {

name: "Alice",

age: 25,

city: "Delhi"

};

console.log(person.name); // "Alice"

console.log(person.age);  // 25

Use dot notation when:

• You know the property name in advance.

• The property name is a valid identifier (no spaces, no special characters, doesn’t start with a number).

Bracket notation

Bracket notation works like indexing into a map of keys.

const person = {

name: "Alice",

age: 25,

city: "Delhi"

};

console.log(person["name"]); // "Alice"
console.log(person["city"]); // "Delhi"

You must use bracket notation when:

• The property name is stored in a variable.

• The key has spaces, hyphens, or other special characters.

Example with a variable key:

const key = "age";

console.log(person[key]); // 25

Example with a space in the key:

const weirdObject = {

"favorite color": "blue"

};

console.log(weirdObject["favorite color"]); // "blue"
// weirdObject.favorite color (not valid)

Rule of thumb:

• Prefer dot notation when possible.

• Use bracket notation when you need dynamic or unusual keys.

Updating Object Properties

You can change a property’s value using either dot or bracket notation.

Example

const person = {

name: "Alice",

age: 25,

city: "Delhi"

};

person.age = 26;           // update using dot

person["city"] = "Mumbai"; // update using bracket

console.log(person.age);  // 26

console.log(person.city); // "Mumbai"

If the property already exists, it gets overwritten with the new value.

Adding New Properties

Adding a new property is the same as updating—if the key does not exist yet, JavaScript creates it.

const person = {

name: "Alice",

age: 25

};

person.city = "Delhi";            // new property

person["country"] = "India";      // another new property

console.log(person.city);    // "Delhi"

console.log(person.country); // "India"

You don’t need any special method—just assign a value to a new key.

---

Deleting Properties

To remove a property from an object, you use the delete operator.

const person = {

name: "Alice",

age: 25,

city: "Delhi"

};

delete person.city;

console.log(person.city); // undefined

• After delete person.city, the city property is no longer part of the object.

• Accessing it returns undefined.

Use delete when you truly want to remove the key from the object structure.

Looping Through Object Keys

Often, you want to process all keys and values in an object.

The most common way for beginners is for...in.

Using for...in

const person = {

name: "Alice",

age: 25,

city: "Delhi"

};

for (const key in person) {

const value = person[key];

console.log(key, ":", value);

}

Output:

name : Alice

age : 25

city : Delhi

• key will be "name", then "age", then "city".

• person[key] gives you the corresponding value.

Using Object.keys() (slightly more advanced but very common)

const keys = Object.keys(person); // ["name", "age", "city"]

keys.forEach(function(key) {

console.log(key, ":", person[key]);

});

For now, for...in It is enough to understand the basic idea.

Array vs Object: What’s the Difference?

Both arrays and objects can store multiple values, but they are used for different purposes.

Arrays: an ordered list of values

• Use arrays when you have an ordered collection.

• Elements are accessed by index (0, 1, 2, ...).

Example:

const cities = ["Delhi", "Mumbai", "Bengaluru"];

console.log(cities[0]); // "Delhi"

console.log(cities[1]); // "Mumbai"

Arrays are best for lists like:

• List of numbers

• List of users

• List of tasks

Objects: key–value pairs (labeled data)

• Use objects when you care more about labels (keys) than order.

• Each value has a name (key) attached.

Example:

const person = {

name: "Alice",

age: 25,

city: "Delhi"

};

console.log(person.name); // "Alice"

console.log(person.age);  // 25

Objects are best for:

• Representing a single entity with properties:

  • One person, one product, one student, one book.

Visual comparison

You can imagine these diagrams:

Array (index-based):

Index: 0 → Value: "Delhi"


Index: 1 → Value: "Mumbai"


Index: 2 → Value: "Bengaluru"

Object (key-based):

Key: name → Value: "Alice"


Key: age → Value: 25


Key: city → Value: "Delhi"

Rule of thumb:

• Use an array when position/order matters and you have many of the same type of things.

• Use an object when you have one thing with many named properties.

Assignment: Working with a Student Object

Here’s a practice exercise you can try in a .js file or console.

Step 1: Create an object representing a student

It should have properties like:

• name

• age

• course

Example:

const student = {

name: "Rahul",

age: 20,

course: "Computer Science"

};

Step 2: Update one property

Change the course or age.

student.course = "Information Technology"; // updating property

Step 3: Add a new property

Add, for example, city or isEnrolled.

student.city = "Pune";

Step 4: Print all keys and values using a loop

Use for...in:

for (const key in student) {

const value = student[key];

console.log(key, ":", value);

}

You should see something like:

name : Rahul

age : 20

course : Information Technology

city : Pune

This exercise will help you:

• Create objects

• Update properties

• Add properties

• Loop through all keys and values

Diagram Ideas (For Visual or Slide Use)

You can sketch or design these as simple diagrams.

1. Object key–value structure

Draw a box labeled person:

• Inside it, three rows:

  • name → "Alice"

  • age → 25

  • city → "Delhi"

This makes it clear that an object is a container of labeled values.

2. Array vs Object comparison diagram

Two side-by-side boxes:

• Array:

  • Indices: [0, 1, 2]

  • Values: ["Delhi", "Mumbai", "Bengaluru"]

• Object:

  • Keys: [name, age, city]

  • Values: ["Alice", 25, "Delhi"]

Label them:

• “Array: ordered, index-based.”

• “Object: labeled, key-based.”

Summary

• A JavaScript object is a collection of key–value pairs that represents structured data, such as a person, product, or student.

• You can:

  • Create objects with {} key–value pairs.

  • Access properties using dot or bracket notation.

  • Update and add properties by simple assignment.

  • Delete properties with delete.

  • Loop through keys using for...in.

• Use objects when you have one entity with multiple named properties, and arrays when you have a list of items in order.