Understanding Objects in JavaScript

Think of an object like a filled-in form. A job application form has labelled fields: Name, Age, City, Qualification. Each label is the KEY and what we write in the field is the VALUE. A JavaScript object works exactly the same way.

What are objects and why do we need them?

Imagine, we want to store information about a person, their name, age and city. WIthout objects we might need separate variables:

let name = 'Alice';
let age  = 25;
let city = 'Mumbai';

This works for one person, but what about 100 people? We might need 300 variables for these 100 people. Objects solve this by letting is group all related data under one name:

const person = {
  name: 'Alice',
  age:  25,
  city: 'Mumbai',
};

Now, everything about person lives in one container. We can pass the whole thing around, print it, update it easily and cleanly

Creating an Object

The most common way to create an object is the object literal syntax , list key-value pairs inside curly braces { }.

Object Literal { }

const person = {
  name:      'Alice',          // string value
  age:       25,               // number value
  city:      'Mumbai',         // string value
  isStudent: true,             // boolean value
  hobbies:   ['Reading','Coding'],  // array value
};


console.log(person);

Each entry is called a property. A property has a key (the label) and a value (the data), separated by a colon.

Empty Object - Add properties later

onst car = {};           // start empty


car.brand = 'Toyota';    // add properties one by one
car.model = 'Camry';
car.year  = 2023;


console.log(car);
// { brand: 'Toyota', model: 'Camry', year: 2023 }

Accessing Properties

Javascript gives us 2 ways to read values from an object: dot notation and bracket notation.

Dot Notation - obj.key

The most common and readable approach. Use the name, a dot . , then the property name.

const person = {
  name: 'Alice',
  age:  25,
  city: 'Mumbai',
};


console.log(person.name);   // Alice
console.log(person.age);    // 25
console.log(person.city);   // Mumbai

Bracket Notation - obj['key']

More flexible, essential when the key has spaces or when we need to use a variable as the key:

const person = {
  name:       'Alice',
  'home city': 'Mumbai',   // key with a space
};


// Dot notation FAILS for keys with spaces:
// console.log(person.home city);   // SyntaxError!


// Bracket notation works:
console.log(person['name']);         // Alice
console.log(person['home city']);    // Mumbai


// Using a VARIABLE as the key:
let key = 'name';
console.log(person[key]);            // Alice

Which notation should we use?
Use dot notation (person.name) by default. Switch to bracket notation (person['name'] when the key has spaces, special characters, or when the key name is stored in a variable.

Updating Object Properties

Assign a new value to an existing key using =. Works with both notations

const person = {
  name: 'Alice',
  age:  25,
  city: 'Mumbai',
};


// Update with dot notation
person.age  = 26;
person.city = 'Delhi';


console.log(person.age);    // 26  (updated)
console.log(person.city);   // Delhi  (updated)


// Update with bracket notation
person['name'] = 'Bob';
console.log(person.name);   // Bob  (updated)

const does not freeze the object
We used const to declare person, yet we can still change its properties. Here is why:
const means the VARIABLE cannot point to a different object.
But the CONTENTS inside the object can change freely.
We can use Object.freeze(person) if we truly want to lock everything.

const person = { name: 'Alice' };


person.name = 'Bob';   // FINE — changing a property inside


// person = { name: 'Charlie' };  // ERROR — reassigning the variable

Adding and Deleting Properties

Adding New Properties

Add a brand new property at any time by assigning to a key that does not yet exist.

const person = {
  name: 'Alice',
  age:  25,
};


person.email    = 'alice@example.com';   // new property
person.city     = 'Mumbai';
person.isActive = true;


console.log(person);
// {name:'Alice',age:25,email:'alice@...',city:'Mumbai',isActive:true}

Deleting Properties

Use the delete operator to permanently remove a property.

const person = {
  name: 'Alice',
  age:  25,
  city: 'Mumbai',
};


delete person.city;


console.log(person.city);   // undefined  (gone)
console.log(person);        // { name: 'Alice', age: 25 }

delete removes the property permanently
Once deleted, the property no longer exists. If we just want to clear a value without removing the key, set it to null instead: person.city = null

Looping through Object Properties

Objects don't have numeric indexes, so we can't use a regular for loop. Javascript provides four dedicated tools for iterating over objects properties.

Looping Tools

for...in Loop

Iterates over each key in the object. Use the key to access the corresponding value.

const person = {
  name: 'Alice',
  age:  25,
  city: 'Mumbai',
};


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


// Output:
// name : Alice
// age  : 25
// city : Mumbai

Object.keys() - Array of all keys

const keys = Object.keys(person);
console.log(keys);          // ['name', 'age', 'city']
console.log(keys.length);   // 3

Object.values() - Array of Values

const values = Object.values(person);
console.log(values);   // ['Alice', 25, 'Mumbai']

Object.entires() - Array of [key, value] pairs

This gives is both key and value in every iteration.

const entries = Object.entries(person);
console.log(entries);
// [['name','Alice'], ['age',25], ['city','Mumbai']]


for (let [key, value] of Object.entries(person)) {
  console.log(key + ' => ' + value);
}
// name => Alice
// age  => 25
// city => Mumbai

Array vs Object - When to use which?

Both group multiple values together, but serve different purposes.

// Use an ARRAY for a list of similar things
const students = ['Alice', 'Bob', 'Charlie'];
const scores   = [95, 87, 72];


// Use an OBJECT to describe one entity with named properties
const student = { name:'Alice', score:95, grade:'A' };


// Combine them — array of objects (very common in real apps!)
const classroom = [
  { name:'Alice',   score:95 },
  { name:'Bob',     score:87 },
  { name:'Charlie', score:72 },
];


console.log(classroom[0].name);    // Alice
console.log(classroom[1].score);   // 87

Nested Objects

Object properties can themselves be objects. This is called nesting and lets us model rich real-world data structures.

const person = {
  name:    'Alice',
  age:     25,
  address: {
    street:  '12 MG Road',
    city:    'Mumbai',
    pincode: 400001,
  },
  hobbies: ['Reading', 'Coding', 'Hiking'],
};


// Chain dot notation to drill into nested objects
console.log(person.address.city);     // Mumbai
console.log(person.address.pincode);  // 400001


// Access array inside object
console.log(person.hobbies[0]);       // Reading
console.log(person.hobbies.length);   // 3

Chain as deep as we need:
person.address.city reads from person, get address, then from that get city. We can chain many levels deep. But we should be careful that if any level is undefined or null, accessing a property on it will throw an error.

Assignment

Task 1 - Create a student object

const student = {
  name:     'Rahul',
  age:      20,
  course:   'Computer Science',
  grade:    'A',
  isActive: true,
};
console.log(student);

Task 2 - Access properties both ways

console.log(student.name);        // dot notation
console.log(student['course']);    // bracket notation

Task 3 - Update and add properties

student.grade = 'A+';              // update
student.city  = 'Pune';            // add new
console.log(student.grade);        // A+
console.log(student.city);         // Pune

Task 4 - Print all keys and values using a loop

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

Task 5 - Use Object.keys, .values, .entries

console.log(Object.keys(student));
console.log(Object.values(student));


for (let [k, v] of Object.entries(student)) {
  console.log(k + ' => ' + v);
}

Task 6 - Delete a property

delete student.isActive;
console.log(student.isActive);       // undefined
console.log(Object.keys(student));   // isActive gone

Summary

Here is everything we saw and learned in this article:

• Objects group related data as key-value pairs — perfect for describing real-world entities

• Create with { key: value } object literal syntax

• Dot notation obj.key — clean and preferred for simple known keys

• Bracket notation obj['key'] — use for dynamic keys, spaces, or variables

• Update properties: obj.key = newValue

• Add properties: obj.newKey = value (anytime, on the fly)

• Delete properties: delete obj.key

• for...in loops over keys; Object.keys(), .values(), .entries() return arrays

• Objects stored by reference — copying copies the pointer, not the data

• Use arrays for ordered lists, objects for named entities, and combine both for real app data

Objects are at the heart of JavaScript. Every API response, every user record, every component's data - it all flows through object.