Module 06 // Core JavaScript

Object Literals & Property Access

Module Objective

Dot vs bracket notation, computed properties, shorthand syntax

Mental Model Realtime Simulation

INTERACTIVE_CANVAS
Editor_Pane
Loading...
Console_Output
Waiting for output...

Practical Code Examples

// Example 1
// 1. Dynamic Property Access
const obj = { apple: 5, banana: 10 };
const fruit = "apple";

console.log(obj.fruit); // undefined (Looks for key named "fruit")
console.log(obj[fruit]); // 5 (Looks for value of fruit variable)
💡 Use bracket notation `[]` when the property name is stored in a variable or contains special characters/spaces.
// Example 2
// 2. Computed Property Names
const key = "status";
const task = {
  id: 1,
  [key]: "pending" // Sets task.status
};

console.log(task.status); // "pending"
💡 ES6 allows you to use square brackets inside the object literal to set a key dynamically.
// Example 3
// 3. Destructuring
const person = { name: "Bob", age: 25 };
const { name, age } = person;

console.log(name, age); // "Bob", 25
💡 Destructuring is a clean way to extract multiple properties from an object into variables.

Engine & Memory Architecture

Objects in Memory

1. Heap Storage:

  • Objects are always stored in the Heap.
  • Because objects can grow (add properties) or shrink (delete properties), they need the unstructured space of the Heap.

2. References:

  • The variable doesn't hold the object; it holds a memory address (pointer).
  • Two variables can point to the same object in the Heap.

3. Hidden Classes (V8 Optimization):

  • Modern JS engines (like Chrome's V8) create "hidden classes" internally to optimize property lookups.
  • Performance Tip: Try to initialize all object properties in the constructor or literal so the "shape" of the object doesn't change frequently.
PREVIOUS_MODULEFunction FundamentalsNEXT_MODULE Arrays & Essential Methods