Docs
Module-10-Objects
Module 10: Objects in JavaScript
📖 Overview
Objects are the foundation of JavaScript. Almost everything in JavaScript is an object, from arrays to functions to the DOM. Understanding objects deeply is essential for mastering JavaScript.
┌─────────────────────────────────────────────────────────────────────────────┐
│ OBJECTS IN JAVASCRIPT │
├─────────────────────────────────────────────────────────────────────────────┤
│ │
│ ┌─────────────────────────────────────────────────────────────────────┐ │
│ │ EVERYTHING IS AN OBJECT* │ │
│ │ │ │
│ │ Arrays → Object with numeric keys + special methods │ │
│ │ Functions → Object with [[Call]] internal method │ │
│ │ RegExp → Object representing patterns │ │
│ │ Date → Object wrapping timestamps │ │
│ │ Error → Object with stack trace │ │
│ │ DOM nodes → Objects representing HTML elements │ │
│ │ │ │
│ │ *Primitives (string, number, boolean, null, undefined, symbol, │ │
│ │ bigint) are NOT objects, but have object wrappers │ │
│ └─────────────────────────────────────────────────────────────────────┘ │
│ │
│ OBJECT ANATOMY: │
│ │
│ const person = { ┌──────────────────────────────────────────┐ │
│ name: "Alice", │ KEY VALUE │ │
│ age: 30, │ ────────────────────────────────────────│ │
│ greet() { │ "name" → "Alice" │ │
│ return "Hi!"; │ "age" → 30 │ │
│ } │ "greet" → function() {...} │ │
│ }; └──────────────────────────────────────────┘ │
│ │
│ [[Prototype]] ──▶ Object.prototype ──▶ null │
│ │
└─────────────────────────────────────────────────────────────────────────────┘
🎯 Why Objects Matter
| Concept | Real-World Use |
|---|---|
| Object Basics | Store and organize data |
Methods & this | Create behaviors attached to data |
| Property Descriptors | Control property behavior (immutability, visibility) |
| Prototypes | Inheritance, sharing methods efficiently |
| Object Patterns | Build reusable, maintainable code |
📚 Module Contents
┌─────────────────────────────────────────────────────────────────────────────┐
│ MODULE 10: OBJECTS │
├─────────────────────────────────────────────────────────────────────────────┤
│ │
│ ┌─────────────────────────────────────────────────────────────────────┐ │
│ │ 10.1 OBJECT BASICS │ │
│ │ ────────────────── │ │
│ │ • Object literal syntax { key: value } │ │
│ │ • Properties vs methods │ │
│ │ • Dot notation vs bracket notation │ │
│ │ • Computed property names [expression]: value │ │
│ │ • Shorthand property/method syntax │ │
│ │ • Property existence checking (in, hasOwnProperty) │ │
│ └─────────────────────────────────────────────────────────────────────┘ │
│ │ │
│ ▼ │
│ ┌─────────────────────────────────────────────────────────────────────┐ │
│ │ 10.2 OBJECT METHODS & THIS │ │
│ │ ────────────────────────── │ │
│ │ • Methods defined in objects │ │
│ │ • How `this` is determined (call site, not definition) │ │
│ │ • Implicit vs explicit binding (call, apply, bind) │ │
│ │ • Arrow functions and lexical `this` │ │
│ │ • Method borrowing │ │
│ │ • Common `this` pitfalls │ │
│ └─────────────────────────────────────────────────────────────────────┘ │
│ │ │
│ ▼ │
│ ┌─────────────────────────────────────────────────────────────────────┐ │
│ │ 10.3 PROPERTY DESCRIPTORS │ │
│ │ ───────────────────────── │ │
│ │ • Data properties vs accessor properties │ │
│ │ • Attributes: writable, enumerable, configurable │ │
│ │ • Object.defineProperty() / defineProperties() │ │
│ │ • Object.getOwnPropertyDescriptor() │ │
│ │ • Getters and setters │ │
│ │ • Making properties read-only or hidden │ │
│ └─────────────────────────────────────────────────────────────────────┘ │
│ │ │
│ ▼ │
│ ┌─────────────────────────────────────────────────────────────────────┐ │
│ │ 10.4 OBJECT STATIC METHODS │ │
│ │ ────────────────────────── │ │
│ │ • Object.keys(), values(), entries() │ │
│ │ • Object.assign() and spread operator │ │
│ │ • Object.freeze(), seal(), preventExtensions() │ │
│ │ • Object.fromEntries() │ │
│ │ • Shallow vs deep cloning │ │
│ │ • structuredClone() for deep clones │ │
│ └─────────────────────────────────────────────────────────────────────┘ │
│ │ │
│ ▼ │
│ ┌─────────────────────────────────────────────────────────────────────┐ │
│ │ 10.5 PROTOTYPES │ │
│ │ ─────────────── │ │
│ │ • [[Prototype]] internal slot │ │
│ │ • __proto__ accessor (deprecated but useful for learning) │ │
│ │ • Object.create() - create with specific prototype │ │
│ │ • Object.getPrototypeOf() / setPrototypeOf() │ │
│ │ • Prototype chain and property lookup │ │
│ │ • Shadowing properties │ │
│ └─────────────────────────────────────────────────────────────────────┘ │
│ │ │
│ ▼ │
│ ┌─────────────────────────────────────────────────────────────────────┐ │
│ │ 10.6 OBJECT PATTERNS │ │
│ │ ──────────────────── │ │
│ │ • Factory functions (return new objects) │ │
│ │ • Constructor functions (use with new) │ │
│ │ • Object composition over inheritance │ │
│ │ • Mixins for sharing behavior │ │
│ │ • Module pattern with closures │ │
│ └─────────────────────────────────────────────────────────────────────┘ │
│ │ │
│ ▼ │
│ ┌─────────────────────────────────────────────────────────────────────┐ │
│ │ 10.7 ADVANCED: Object.fromEntries & Transformations │ │
│ │ ─────────────────────────────────────────────────────── │ │
│ │ • Converting between objects and arrays │ │
│ │ • Object transformation pipelines │ │
│ │ • Object filtering, mapping operations │ │
│ └─────────────────────────────────────────────────────────────────────┘ │
│ │
└─────────────────────────────────────────────────────────────────────────────┘
🔍 Key Concepts Preview
The this Keyword
┌─────────────────────────────────────────────────────────────────────────────┐
│ THIS BINDING RULES │
├─────────────────────────────────────────────────────────────────────────────┤
│ │
│ `this` is determined by HOW a function is CALLED, not where defined │
│ │
│ ┌──────────────────┬──────────────────────────────────────────────────┐ │
│ │ Call Type │ What `this` equals │ │
│ ├──────────────────┼──────────────────────────────────────────────────┤ │
│ │ obj.method() │ obj (implicit binding) │ │
│ │ func.call(x) │ x (explicit binding) │ │
│ │ func.apply(x) │ x (explicit binding) │ │
│ │ func.bind(x)() │ x (hard binding) │ │
│ │ new Func() │ new object being created │ │
│ │ func() │ undefined (strict) / window (non-strict) │ │
│ │ () => {} │ lexical (inherits from outer scope) │ │
│ └──────────────────┴──────────────────────────────────────────────────┘ │
│ │
│ PRIORITY: new > call/apply/bind > obj.method > default │
│ │
└─────────────────────────────────────────────────────────────────────────────┘
Prototype Chain
┌─────────────────────────────────────────────────────────────────────────────┐
│ PROTOTYPE CHAIN │
├─────────────────────────────────────────────────────────────────────────────┤
│ │
│ const animal = { eats: true }; │
│ const dog = Object.create(animal); │
│ dog.barks = true; │
│ │
│ ┌──────────────┐ ┌──────────────┐ ┌───────────────────┐ │
│ │ dog │ │ animal │ │ Object.prototype │ │
│ │ ────────── │ │ ────────── │ │ ───────────────── │ │
│ │ barks:true │────▶│ eats: true │────▶│ toString() │───▶ null │
│ │ │ │ │ │ hasOwnProperty() │ │
│ └──────────────┘ └──────────────┘ │ valueOf() │ │
│ [[Prototype]] [[Prototype]] └───────────────────┘ │
│ │
│ dog.eats; // true (found in animal) │
│ dog.barks; // true (found in dog) │
│ dog.toString(); // "[object Object]" (found in Object.prototype) │
│ dog.fly; // undefined (not found anywhere) │
│ │
└─────────────────────────────────────────────────────────────────────────────┘
Object Immutability
┌─────────────────────────────────────────────────────────────────────────────┐
│ OBJECT IMMUTABILITY LEVELS │
├─────────────────────────────────────────────────────────────────────────────┤
│ │
│ ┌─────────────────────────────────────────────────────────────────────┐ │
│ │ LEAST ◄──────────────────────────────────▶ MOST │ │
│ │ │ │
│ │ preventExtensions() seal() freeze() │ │
│ │ ───────────────── ────── ──────── │ │
│ │ Can't add new props Can't add/delete Can't add/delete │ │
│ │ CAN delete props CAN modify values CAN'T modify values │ │
│ │ CAN modify values Configurable=false Writable=false │ │
│ │ │ │
│ │ ┌──────────────────┬───────────┬──────────┬───────────────────┐ │ │
│ │ │ Action │ Prevent │ Seal │ Freeze │ │ │
│ │ ├──────────────────┼───────────┼──────────┼───────────────────┤ │ │
│ │ │ Add property │ ❌ │ ❌ │ ❌ │ │ │
│ │ │ Delete property │ ✅ │ ❌ │ ❌ │ │ │
│ │ │ Modify value │ ✅ │ ✅ │ ❌ │ │ │
│ │ │ Reconfigure │ ✅ │ ❌ │ ❌ │ │ │
│ │ └──────────────────┴───────────┴──────────┴───────────────────┘ │ │
│ │ │ │
│ │ ⚠️ All are SHALLOW - nested objects are NOT frozen! │ │
│ └─────────────────────────────────────────────────────────────────────┘ │
│ │
└─────────────────────────────────────────────────────────────────────────────┘
📋 Prerequisites
Before starting this module:
- •✅ Module 5: Functions (especially closures)
- •✅ Module 12: Execution Context (for
thisbinding)
🎓 Learning Path
┌─────────────────────────────────────────────────────────────────────────────┐
│ RECOMMENDED ORDER │
├─────────────────────────────────────────────────────────────────────────────┤
│ │
│ FUNDAMENTALS (Start Here) │
│ ├── 10.1 Object Basics │
│ └── 10.2 Object Methods & this │
│ │
│ PROPERTIES (Control & Inspect) │
│ ├── 10.3 Property Descriptors │
│ └── 10.4 Object Static Methods │
│ │
│ INHERITANCE (Deep Understanding) │
│ ├── 10.5 Prototypes │
│ └── 10.6 Object Patterns │
│ │
│ ADVANCED │
│ └── 10.7 Object.fromEntries & Advanced │
│ │
│ ESTIMATED TIME: 5-7 hours │
│ │
└─────────────────────────────────────────────────────────────────────────────┘
✅ Key Takeaways
After completing this module, you will:
| Skill | Description |
|---|---|
| Create Objects | Use literals, factories, constructors |
| Control Properties | Use descriptors for immutability |
Master this | Predict binding in any context |
| Use Prototypes | Implement inheritance patterns |
| Apply Patterns | Choose right pattern for the task |
📚 Related Modules
- •Module 5: Functions - Closures used in object patterns
- •Module 11: Classes - ES6 class syntax (prototype sugar)
- •Module 12: Execution Context - Deep
thisunderstanding - •Module 22: Design Patterns - Advanced object patterns