JavaScript Objects

What is an object?

An object is a collection of related values stored as properties. Each property has a key and a value.

const student = {
  name: "Aman",
  course: "JavaScript",
  score: 88
};

console.log(student);

Creating object literals

The most common beginner syntax is an object literal using curly braces.

const course = {
  title: "JavaScript",
  level: "Beginner",
  isLive: true
};

Property values can be strings, numbers, booleans, arrays, functions, other objects and more.

Dot notation and bracket notation

Use dot notation for simple known property names. Bracket notation is useful for dynamic keys or keys that are not valid identifier names.

const student = { name: "Riya", "course-level": "Beginner" };

console.log(student.name);
console.log(student["course-level"]);

const key = "name";
console.log(student[key]);

Add, update and delete properties

Object properties can be added or updated after creation. delete removes an own property.

const profile = { name: "Neha" };
profile.city = "Delhi";
profile.name = "Neha Sharma";
delete profile.city;

console.log(profile);

A const object binding cannot be reassigned, but properties of the existing object can still change.

Object methods

A property can store a function. When a function belongs to an object, it is commonly called a method.

const learner = {
  name: "Aman",
  greet() {
    return "Hello, " + this.name;
  }
};

console.log(learner.greet());

Understanding this in methods

In a normal method call such as learner.greet(), this usually refers to the object used to call the method.

const course = {
  title: "JavaScript",
  showTitle() {
    console.log(this.title);
  }
};

course.showTitle();

Nested objects

Objects can contain other objects, which is useful for structured data.

const student = {
  name: "Riya",
  progress: {
    html: 100,
    css: 90,
    javascript: 55
  }
};

console.log(student.progress.javascript); // 55

Arrays of objects

Real applications often store multiple records as an array of objects.

const students = [
  { name: "Aman", score: 82 },
  { name: "Riya", score: 91 },
  { name: "Neha", score: 76 }
];

const passed = students.filter(student => student.score >= 80);
console.log(passed);

Object destructuring

Destructuring lets you extract properties into variables.

const student = { name: "Aman", score: 88 };
const { name, score } = student;

console.log(name, score);

Rename and default values

Destructuring can rename a property and provide a default when a property is undefined.

const user = { name: "Riya" };
const { name: userName, role = "student" } = user;

console.log(userName); // Riya
console.log(role);     // student

Object spread

Spread syntax creates a shallow copy and can combine or override properties.

const base = { name: "Aman", score: 70 };
const updated = { ...base, score: 85, active: true };

console.log(updated);

Rest properties

Rest syntax can collect the remaining properties during destructuring.

const student = { name: "Neha", score: 92, city: "Lucknow" };
const { name, ...details } = student;

console.log(name);
console.log(details);

Object.keys(), values() and entries()

These methods return arrays of an object's own enumerable string-keyed properties.

const course = { title: "JS", level: "Beginner", lessons: 18 };

console.log(Object.keys(course));
console.log(Object.values(course));
console.log(Object.entries(course));

Looping through object entries

Object.entries() works well with for...of.

const progress = { html: 100, css: 90, js: 60 };

for (const [topic, value] of Object.entries(progress)) {
  console.log(topic, value);
}

Checking whether a property exists

Object.hasOwn() checks whether an object directly owns a property.

const profile = { name: "Aman" };

console.log(Object.hasOwn(profile, "name")); // true
console.log(Object.hasOwn(profile, "role")); // false

Computed property names

Bracket syntax inside an object literal can use an expression as a property key.

const key = "score";
const student = {
  name: "Riya",
  [key]: 95
};

console.log(student.score);

Objects are reference values

Assigning one object variable to another does not clone the object. Both bindings can refer to the same object.

const original = { score: 70 };
const same = original;
same.score = 90;

console.log(original.score); // 90

Spread creates a shallow copy, not a deep clone of nested objects.

const original = { progress: { js: 50 } };
const copy = { ...original };
copy.progress.js = 80;

console.log(original.progress.js); // 80

Optional chaining and nullish fallback

Optional chaining safely stops when an intermediate value is null or undefined. Nullish coalescing can provide a fallback.

const student = { profile: { name: "Aman" } };

const city = student.profile?.address?.city ?? "Not added";
console.log(city);

Beginner best practices

• Property names meaningful rakho.
• Known simple key ke liye dot notation, dynamic key ke liye bracket notation use karo.
• Method me this chahiye ho to arrow function blindly use mat karo.
• Nested structures ko unnecessarily deep mat banao.
• Updates me object spread readable ho sakta hai, but shallow-copy behavior samjho.
• Missing nested data ke liye optional chaining useful hai.
• Object methods ko ek clear responsibility do.

Common beginner mistakes

• student.key ko variable-based dynamic access samajhna.
• const object ki properties immutable samajhna.
• Object method ke this ko har context me same assume karna.
• Direct assignment ko object clone samajhna.
• Spread copy ko deep clone samajhna.
• Nested missing property ko direct access karke error create karna.
• Array aur object ko same access pattern se use karna.
• Later spread properties previous values overwrite karti hain ye bhoolna.

Chapter checklist

• Object literal create kar sakte ho?
• Dot aur bracket notation ka difference clear hai?
• Property add, update aur delete kar sakte ho?
• Method aur this ka beginner-level role samajh aaya?
• Nested objects aur arrays of objects read kar sakte ho?
• Destructuring, spread aur rest syntax recognize kar sakte ho?
• Object.keys/values/entries use kar sakte ho?
• Reference vs shallow copy ka difference clear hai?