Academy — Sanjib Sikder

The Problem Objects Solve

An array stores an ordered list. But sometimes order isn't the point — relationship is.

A student has a name, marks, subject, and attendance. You could store these as four separate variables, or as four elements in an array. But student[0] tells you nothing. student.name tells you everything.

An object groups related values under meaningful names called properties.

Creating Objects

JavaScript

Ctrl+Enter to run

const student = {
  name: "Rahul",
  marks: 85,
  subject: "Physics",
  passed: true,
};

console.log(student);
console.log(student.name); // dot notation
console.log(student["marks"]); // bracket notation — same result

An object is written with curly braces {}. Each entry is a key-value pair separated by a colon, pairs separated by commas. The trailing comma after the last property is optional but recommended — it makes adding new properties easier.

Two ways to access properties:

Dot notation student.name — clean, readable, use this by default
Bracket notation student["name"] — necessary when the key is stored in a variable or contains special characters

Adding, Changing, Deleting Properties

JavaScript

Ctrl+Enter to run

const student = { name: "Priya", marks: 91 };

// Add a new property
student.subject = "Chemistry";

// Change an existing property
student.marks = 95;

// Delete a property
delete student.subject;

console.log(student);

// Check if a property exists
console.log("name" in student); // true
console.log("subject" in student); // false

Objects are mutable. Even if declared with const, you can change, add, or delete properties — const only prevents you from reassigning the variable to a completely different object. The contents are freely modifiable.

Methods — Functions Inside Objects

A property whose value is a function is called a method.

JavaScript

Ctrl+Enter to run

const circle = {
  radius: 7,

area() {
return Math.PI _ this.radius _ this.radius;
},

circumference() {
return 2 _ Math.PI _ this.radius;
},

describe() {
return `Circle: r=${this.radius}, area=${this.area().toFixed(2)}`;
},
};

console.log(circle.area().toFixed(4));
console.log(circle.circumference().toFixed(4));
console.log(circle.describe());

this refers to the object the method belongs to. Inside area(), this.radius means "the radius property of this same object." This is how an object's methods can access its own data.

Looping Over an Object

JavaScript

Ctrl+Enter to run

const scores = {
  physics:   88,
  chemistry: 75,
  maths:     95,
  biology:   82,
};

// for...in: loops over keys
for (const subject in scores) {
console.log(`${subject}: ${scores[subject]}`);
}

console.log("---");

// Object.keys, Object.values, Object.entries
console.log(Object.keys(scores));
console.log(Object.values(scores));
console.log(Object.entries(scores));

Object.entries(obj) returns an array of [key, value] pairs — which means you can immediately chain array methods onto it:

JavaScript

Ctrl+Enter to run

const scores = { physics: 88, chemistry: 75, maths: 95, biology: 82 };

const average = Object.values(scores).reduce((sum, v) => sum + v, 0) / Object.values(scores).length;
console.log("Average:", average.toFixed(1));

const passing = Object.entries(scores)
.filter(([subject, mark]) => mark >= 80)
.map(([subject, mark]) => `${subject}: ${mark}`);

console.log("Passed:", passing);

Destructuring

Destructuring is a clean way to extract properties into variables:

JavaScript

Ctrl+Enter to run

const student = {
  name: "Sneha",
  marks: 78,
  subject: "Maths",
  city: "Kolkata",
};

// Without destructuring
const name1 = student.name;
const marks1 = student.marks;

// With destructuring — much cleaner
const { name, marks, city } = student;
console.log(name, marks, city);

// Rename while destructuring
const { marks: score, subject: topic } = student;
console.log(score, topic);

// Default values
const { attendance = 100 } = student; // not in object — uses default
console.log(attendance);

Destructuring is everywhere in modern JavaScript — in function parameters, in loops, in imports. It eliminates the repetitive obj.prop pattern and makes code dramatically more readable.

Destructuring in Function Parameters

JavaScript

Ctrl+Enter to run

// Instead of receiving the whole object and doing obj.name, obj.marks...
function report({ name, marks, subject = "General" }) {
  const grade = marks >= 90 ? "A" : marks >= 75 ? "B" : "C";
  console.log(`${name} (${subject}): ${marks} — Grade ${grade}`);
}

report({ name: "Vikram", marks: 92, subject: "Physics" });
report({ name: "Anita", marks: 74 }); // subject defaults to "General"

This pattern — destructuring directly in the parameter list — is extremely common in React components, API handlers, and configuration functions.

Spreading and Copying Objects

Just like arrays, the spread operator works on objects:

JavaScript

Ctrl+Enter to run

const defaults = { theme: "dark", fontSize: 14, language: "en" };
const userPrefs = { fontSize: 18, language: "bn" };

// Merge: later properties overwrite earlier ones
const config = { ...defaults, ...userPrefs };
console.log(config);

// Copy an object
const original = { x: 1, y: 2 };
const copy = { ...original };
copy.x = 99;

console.log("Original:", original); // unchanged
console.log("Copy:", copy);

This pattern — spread defaults then user overrides — is one of the most common patterns in all of JavaScript. Configuration objects, React props, API options — you will write this hundreds of times.

Arrays of Objects

The most common data structure in real applications: an array where each element is an object.

JavaScript

Ctrl+Enter to run

const students = [
  { name: "Rahul",  marks: 82, city: "Delhi"   },
  { name: "Priya",  marks: 91, city: "Mumbai"  },
  { name: "Arjun",  marks: 54, city: "Kolkata" },
  { name: "Sneha",  marks: 78, city: "Chennai" },
  { name: "Vikram", marks: 95, city: "Delhi"   },
];

// All students from Delhi, sorted by marks
const delhiRanked = students
.filter(s => s.city === "Delhi")
.sort((a, b) => b.marks - a.marks)
.map(({ name, marks }) => `${name}: ${marks}`);

console.log("Delhi (ranked):", delhiRanked);

// City-wise average — using reduce to build an object
const cityAverages = students.reduce((acc, { city, marks }) => {
if (!acc[city]) acc[city] = { total: 0, count: 0 };
acc[city].total += marks;
acc[city].count += 1;
return acc;
}, {});

console.log("\nCity averages:");
for (const [city, { total, count }] of Object.entries(cityAverages)) {
console.log(` ${city}: ${(total / count).toFixed(1)}`);
}

The reduce here builds an entirely new object — grouping students by city and accumulating totals. This pattern (called group by) appears in data analysis, dashboards, and reporting constantly.

Nested Objects

Objects can contain other objects:

JavaScript

Ctrl+Enter to run

const school = {
  name: "Sikder Academy",
  location: {
    city: "Kolkata",
    state: "West Bengal",
  },
  stats: {
    students: 240,
    teachers: 18,
    passRate: 0.94,
  },
};

console.log(school.location.city);
console.log(`Pass rate: ${(school.stats.passRate * 100).toFixed(0)}%`);

// Nested destructuring
const { name, location: { city }, stats: { passRate } } = school;
console.log(`${name}, ${city} — ${(passRate * 100).toFixed(0)}% pass rate`);

What You Have Learned

Objects are how JavaScript represents structured, named data.

The key ideas:

{ key: value } — create; .prop or ["prop"] — access
Objects are mutable even when declared with const
Methods are functions inside objects; this refers to the owning object
Object.keys(), Object.values(), Object.entries() — bridge to array methods
Destructuring { name, marks } = obj — the modern way to unpack properties
Spread { ...a, ...b } — merge or copy objects
Arrays of objects + chained array methods = the backbone of real data processing

Together, arrays and objects can represent any data structure in existence — a student record, a weather report, a social media post, a physics simulation. Everything from here builds on these two foundations.

In the next lesson: Closures — the most misunderstood concept in JavaScript, and the one that unlocks everything: private state, factory functions, callbacks, and the entire async model.