# JavaScript Objects: Storing and Managing Structured Data

You already know how to store a single value in a variable. You know how to store a list of values in an array. But what if you want to store multiple pieces of information that all describe one thing — like a person's name, age, and city? That's where objects come in.

* * *

## The Problem Objects Solve

Say you want to describe a person using what you already know:

```javascript
let name = "Alice";
let age  = 28;
let city = "New York";
```

These three variables are related — they all describe the same person. But JavaScript has no idea they're connected. They're just three separate boxes floating around in your code.

An object solves this by grouping all related data under one roof:

```javascript
let person = {
  name: "Alice",
  age:  28,
  city: "New York"
};
```

One variable, one person, all their details in one place.

* * *

## What Is an Object?

An object is a collection of **key-value pairs**. Each piece of data has a name (the key) and a value.

```plaintext
Object: person
--------------------------
| Key    | Value         |
--------------------------
| name   | "Alice"       |
| age    | 28            |
| city   | "New York"    |
--------------------------
```

The key is always a string. The value can be anything — a string, number, boolean, array, or even another object.

* * *

## Arrays vs Objects

Both arrays and objects store multiple values, but they serve different purposes.

```plaintext
Array                          Object
------------------------------  --------------------------------
Ordered list of values          Named collection of values
Accessed by index (0, 1, 2...)  Accessed by key ("name", "age")
Best for: list of similar items Best for: describing one thing

let colors = ["red","green"]    let person = { name: "Alice" }
colors[0] → "red"               person.name → "Alice"
```

Use an **array** when you have a list of similar items. Use an **object** when you have different properties that describe a single entity.

* * *

## Creating an Object

The most common way to create an object is with **object literal syntax** — curly braces with key-value pairs separated by commas.

```javascript
let car = {
  brand: "Toyota",
  model: "Camry",
  year:  2022,
  color: "white"
};
```

Each key-value pair is separated by a comma. The key and value are separated by a colon.

You can also create an empty object and add properties later:

```javascript
let car = {};
```

* * *

## Accessing Properties

There are two ways to read a value from an object.

### Dot Notation

```javascript
let person = {
  name: "Alice",
  age:  28,
  city: "New York"
};

console.log(person.name); // "Alice"
console.log(person.age);  // 28
console.log(person.city); // "New York"
```

This is the most common and readable way. Use it whenever the key name is known and straightforward.

### Bracket Notation

```javascript
console.log(person["name"]); // "Alice"
console.log(person["age"]);  // 28
```

Bracket notation is useful when the key is stored in a variable or when the key contains spaces or special characters.

```javascript
let key = "city";
console.log(person[key]); // "New York"
```

You cannot do `person.key` here — that would look for a property literally named `"key"`, not the value of the variable.

* * *

## Updating Properties

To change the value of an existing property, simply reassign it:

```javascript
let person = {
  name: "Alice",
  age:  28
};

person.age = 29;
console.log(person.age); // 29

person["name"] = "Alicia";
console.log(person.name); // "Alicia"
```

Both dot and bracket notation work for updating.

* * *

## Adding and Deleting Properties

### Adding a new property

You can add a property to an object at any time — even after it was created:

```javascript
let person = {
  name: "Alice"
};

person.age    = 28;
person.city   = "New York";
person.active = true;

console.log(person);
// { name: "Alice", age: 28, city: "New York", active: true }
```

### Deleting a property

Use the `delete` keyword to remove a property from an object:

```javascript
delete person.active;

console.log(person);
// { name: "Alice", age: 28, city: "New York" }
```

The property is gone entirely — not just set to `undefined`.

* * *

## Looping Through Object Keys

Unlike arrays, objects are not directly iterable with a regular `for` loop. Instead, use `for...in` to loop through all keys.

```javascript
let person = {
  name: "Alice",
  age:  28,
  city: "New York"
};

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

// name: Alice
// age: 28
// city: New York
```

On each iteration, `key` holds the current property name. Use bracket notation `person[key]` to get its value — dot notation won't work here since `key` is a variable.

You can also get all keys as an array using `Object.keys()`:

```javascript
console.log(Object.keys(person));
// ["name", "age", "city"]
```

* * *

## Putting It All Together

```javascript
let book = {
  title:  "The Alchemist",
  author: "Paulo Coelho",
  year:   1988
};

// Access
console.log(book.title);  // "The Alchemist"

// Update
book.year = 1993;

// Add
book.genre = "Fiction";

// Delete
delete book.year;

// Loop
for (let key in book) {
  console.log(key + ": " + book[key]);
}
// title: The Alchemist
// author: Paulo Coelho
// genre: Fiction
```

* * *

## Practice Assignment

Work through these steps to practice everything covered:

**1\. Create an object representing a student:**

```javascript
let student = {
  name:   "Raj",
  age:    21,
  course: "Computer Science"
};
```

**2\. Access and print individual properties:**

```javascript
console.log(student.name);   // "Raj"
console.log(student.course); // "Computer Science"
```

**3\. Update one property:**

```javascript
student.age = 22;
console.log(student.age); // 22
```

**4\. Add a new property:**

```javascript
student.city = "Mumbai";
```

**5\. Print all keys and values using a loop:**

```javascript
for (let key in student) {
  console.log(key + ": " + student[key]);
}
// name: Raj
// age: 22
// course: Computer Science
// city: Mumbai
```

* * *

## Quick Recap

*   An object stores related data as key-value pairs
    
*   Use arrays for ordered lists of similar items, objects for describing a single entity
    
*   Create objects with curly braces: `let obj = { key: value }`
    
*   Access values with dot notation (`obj.key`) or bracket notation (`obj["key"]`)
    
*   Update properties by reassigning: `obj.key = newValue`
    
*   Add new properties the same way; remove them with `delete`
    
*   Loop through object keys using `for...in`
    

Objects are one of the most fundamental building blocks of JavaScript. Everything from API responses to class instances is built on them. Getting comfortable with the basics here will make everything that comes next feel much more natural.

Happy coding! 🚀

* * *

> If you enjoyed this article, check out my other blogs on this profile. 🔗 Connect with me: [LinkedIn](https://linkedin.com/in/rajharsh03) | [GitHub](https://github.com/RajHarsh03) | [X (Twitter)](https://x.com/rajharsh03)