JavaScript Notes

JavaScript Objects - Complete Guide to Object Basics with Examples

Master JavaScript objects from scratch. Learn object creation, key-value pairs, dot vs bracket notation, nested objects, and real-world use cases with clear examples.

What is an Object?

An object in JavaScript is a collection of key-value pairs stored together under one name. Instead of creating ten separate variables for ten related pieces of data, you bundle them into one object.

Think of an object like an ID card: one card holds your name, age, city, and occupation — all under a single identity.

Memory Diagram — How Objects Live in Memory

Example

Stack Memory Heap Memory ┌──────────────┐ ┌─────────────────────────┐ │ student │─────────▶│ { name: "Riya", │ │ (reference) │ │ age: 20, │ └──────────────┘ │ grade: "A", │ │ city: "Delhi" } │ └─────────────────────────┘ ⚡ Primitive values (numbers, strings) live DIRECTLY on the stack. ⚡ Objects live on the HEAP — the variable only holds a REFERENCE (address).

This is why two variables pointing to the same object both "see" the same data.

Creating an Object

1. Object Literal (Most Common)

js example

const car = {
  brand: "Toyota",
  model: "Corolla",
  year: 2023,
  isElectric: false
};
console.log(car);

Output

{ brand: 'Toyota', model: 'Corolla', year: 2023, isElectric: false }

2. new Object() Syntax

js example

const laptop = new Object();
laptop.brand = "Dell";
laptop.ram = "16GB";
console.log(laptop);

Output

{ brand: 'Dell', ram: '16GB' }

💡 Always prefer object literal {} — it's shorter and more readable.

Accessing Properties

Dot Notation

js example

const user = { name: "Aman", age: 25, city: "Mumbai" };

console.log(user.name);
console.log(user.age);

Output

Aman
25

Bracket Notation

Example

const user = { name: "Aman", age: 25, "home city": "Mumbai" }; console.log(user["name"]); console.log(user["home city"]); // spaces in key → must use brackets

Output

Aman
Mumbai

When to use which notation?

Situation	Use
Simple key (no spaces)	`user.name` — dot notation
Key has spaces or special characters	`user["home city"]` — bracket notation
Key is stored in a variable	`user[keyVar]` — bracket notation
Computed key at runtime	`user[someExpression]` — bracket notation

Modifying an Object

Even const objects can have their properties changed — const only prevents reassignment of the variable, not mutation of the object.

js example

const profile = { name: "Neha", role: "student" };

// Change existing property
profile.role = "developer";

// Add new property
profile.company = "TechCorp";

// Delete a property
delete profile.name;

console.log(profile);

Output

{ role: 'developer', company: 'TechCorp' }

Nested Objects

Objects can contain other objects — this is called nesting.

Example

const employee = { name: "Rahul", address: { city: "Bangalore", state: "Karnataka", pincode: 560001 }, skills: ["JS", "React", "Node"] }; console.log(employee.address.city); console.log(employee.skills[0]);

Output

Bangalore
JS

Checking if a Property Exists

js example

const product = { id: 101, name: "Phone", price: 15000 };

// Method 1: in operator
console.log("price" in product);    // true
console.log("discount" in product); // false

// Method 2: undefined check
console.log(product.stock !== undefined); // false — stock doesn't exist

// Method 3: hasOwnProperty
console.log(product.hasOwnProperty("name")); // true

Output

true
false
false
true

Looping Over an Object

Example

const scores = { maths: 95, science: 88, english: 92 }; for (let subject in scores) { console.log(`${subject}: ${scores[subject]}`); }

Output

maths: 95
science: 88
english: 92

Object Shorthand (ES6)

When the variable name matches the key name, you can use shorthand:

js example

const name = "Priya";
const age = 22;
const city = "Pune";

// Old way
const oldUser = { name: name, age: age, city: city };

// ES6 Shorthand
const user = { name, age, city };

console.log(user);

Output

{ name: 'Priya', age: 22, city: 'Pune' }

Reference vs Value — The Trap!

js example

const a = { score: 10 };
const b = a;           // b points to SAME object in heap

b.score = 99;

console.log(a.score);  // 99 — a is affected too!
console.log(b.score);  // 99

Output

99
99

Example

Stack Heap ┌───────┐ ┌──────────────┐ │ a ──┼──────────────▶│ { score: 99 }│ │ b ──┼──────────────▶│ │ └───────┘ └──────────────┘ Both a and b point to the SAME heap object.

To copy without sharing: use spread operator { ...a } (shallow copy).

Common Mistakes ❌

1. Accessing a non-existent property

js example

// ❌ Wrong — accessing undefined key
const user = { name: "Tara" };
console.log(user.email.toLowerCase()); // TypeError: Cannot read properties of undefined

js example

// ✅ Correct — optional chaining
console.log(user.email?.toLowerCase()); // undefined (no error)

2. Confusing const with immutability

js example

// ❌ Misconception
const config = { debug: true };
// "It's const so I can't change it"

// ✅ Reality — properties ARE mutable
config.debug = false;   // Works fine!
config.version = "2.0"; // Works fine!
console.log(config);

Output

{ debug: false, version: '2.0' }

3. Using reserved words as keys without quotes

js example

// ❌ Wrong
const obj = { class: "A" }; // 'class' is fine in modern JS but avoid confusion

// ✅ Safer with quotes for reserved/special keys
const obj2 = { "class": "A", "for": "loop" };

Interview Questions 🎯

Q1. What is an object in JavaScript? > An object is a collection of key-value pairs stored in the heap memory. The variable holds a reference (address) to the object, not the object itself.

Q2. What is the difference between dot notation and bracket notation? > Dot notation (obj.key) works for simple identifiers. Bracket notation (obj["key"]) is required when keys contain spaces, special characters, or when the key is stored in a variable.

Q3. Can you modify a const object? > Yes. const prevents reassignment of the variable, but the object's properties can still be changed. To make properties truly immutable, use Object.freeze().

Q4. What is the difference between a primitive and an object in memory? > Primitives (numbers, strings, booleans) are stored directly on the stack. Objects are stored on the heap, and the variable holds a reference (pointer) to the heap address.

Q5. What happens when you assign one object to another variable? > Both variables point to the same heap object. Mutating one affects the other. To avoid this, create a shallow copy using the spread operator { ...obj }.

Q6. How do you check if a property exists in an object? > Three ways: "key" in obj, obj.hasOwnProperty("key"), or obj.key !== undefined. The in operator also checks the prototype chain; hasOwnProperty does not.

Q7. What is Object.freeze()? > It makes an object immutable — no properties can be added, removed, or changed. Useful for constants like config objects.

Q8. What is the difference between null and undefined for an object property? > undefined means the property was never set. null means the property was explicitly set to "no value." Both are falsy but serve different semantic purposes.

Key Takeaways 🏁

Objects store related data as key-value pairs using {} syntax
Objects live in heap memory — variables hold references, not values
Use dot notation for simple keys, bracket notation for dynamic/special keys
const doesn't make objects immutable — only prevents variable reassignment
Assigning one object to another copies the reference, not the data
Use { ...obj } (spread) for a shallow copy
Use Object.freeze() to prevent all mutations

Practice Challenges 💻

Create an object representing a book (title, author, pages, isAvailable)
Add a publisher property after creation and delete the isAvailable property
Create two objects that share a reference and prove that mutating one affects the other
Write a loop that prints all key-value pairs of a student object
Use Object.freeze() and try to modify a property — observe what happens

Exam Focus

Revise definitions, diagrams, examples, and short-answer points for JavaScript Objects - Complete Guide to Object Basics with Examples.

Interview Use

Prepare one clear explanation, one practical example, and one common mistake for this JavaScript Master Course topic.

Search Terms

javascript-complete-guide, javascript master course, javascript, complete, guide, objects, object, basics

Continue learning this concept

ObjectsJavaScript Object Methods - Built-in Methods & Custom Methods Complete GuideLearn JavaScript object methods: Object.keys, Object.assign, Object.create, custom methods, method shorthand ES6, and built-in static methods with real examples.ObjectsJavaScript Object Programs - Practice Problems with SolutionsSolve JavaScript object programs: CRUD operations, merge, filter, transform, group by, frequency counter, nested access, and common coding interview problems with solutions.ObjectsJavaScript Object Properties - Keys, Values, Descriptors & Dynamic PropertiesDeep dive into JavaScript object properties: enumerable, configurable, writable descriptors, computed keys, Object.keys/values/entries, and property iteration patterns.ObjectsJavaScript Object Destructuring - Complete Guide with ExamplesMaster JavaScript object destructuring: rename variables, default values, nested destructuring, function parameter destructuring, and array destructuring with real-world examples.ObjectsJavaScript Rest Operator (...) - Parameters, Destructuring & Complete GuideMaster the JavaScript rest operator: rest parameters in functions, object/array rest in destructuring, rest vs spread, variadic functions, and real-world patterns.ObjectsJavaScript Spread Operator (...) - Complete Guide with ExamplesMaster the JavaScript spread operator (...): copy arrays/objects, merge data, pass arguments, shallow vs deep copy, and real-world patterns with clear examples.

PreviousJavaScript Object Destructuring - Complete Guide with Examples NextJavaScript Object Methods - Built-in Methods & Custom Methods Complete Guide