Objects

Easy

Objects are collections of key-value pairs. They're the most important data structure in JavaScript - even arrays and functions are objects! Learn to create, access, and manipulate objects.

Interactive Visualization

Code
1let a = 5
2let b = a
3b = 10
4console.log(a, b)
5 
6let obj1 = { name: "Alice" }
7let obj2 = obj1
8obj2.name = "Bob"
9console.log(obj1.name)
Stack
(empty)
Heap
(empty)
Output
(no output)
Step 1/9Script starts. Stack and heap are empty.
Key Insight:Primitives are copied by VALUE (independent). Objects are copied by REFERENCE (shared)!

Key Points

  • Objects store data as key-value pairs (properties)
  • Keys are strings (or Symbols), values can be anything
  • Dot notation: obj.key vs Bracket notation: obj["key"]
  • Objects are passed by reference, not copied
  • Object.keys(), Object.values(), Object.entries() for iteration

Code Examples

Creating Objects

// Object literal (most common)
const person = {
  name: "Alice",
  age: 25,
  isStudent: true
};

// Empty object
const empty = {};

// Shorthand property names
const name = "Bob";
const age = 30;
const bob = { name, age };
// Same as { name: name, age: age }

Object literals {} are the standard way to create objects

Accessing Properties

const person = { name: "Alice", age: 25 };

// Dot notation (preferred)
person.name      // "Alice"
person.age       // 25

// Bracket notation (for dynamic keys)
person["name"]   // "Alice"
const key = "age";
person[key]      // 25

// Missing properties return undefined
person.job       // undefined (no error!)

Use dot notation when you know the key, brackets for dynamic keys

Modifying Objects

const person = { name: "Alice" };

// Add properties
person.age = 25;
person["job"] = "Developer";

// Update properties
person.name = "Alicia";

// Delete properties
delete person.job;

// Object is: { name: "Alicia", age: 25 }

Objects are mutable - you can add/change/delete properties

Object Methods

const person = { name: "Alice", age: 25 };

// Get all keys
Object.keys(person);    // ["name", "age"]

// Get all values
Object.values(person);  // ["Alice", 25]

// Get key-value pairs
Object.entries(person); // [["name", "Alice"], ["age", 25]]

// Check if key exists
"name" in person;       // true
person.hasOwnProperty("name"); // true

Object static methods help iterate and inspect objects

Destructuring

const person = { name: "Alice", age: 25, city: "NYC" };

// Extract properties into variables
const { name, age } = person;
console.log(name); // "Alice"

// Rename while destructuring
const { name: userName } = person;
console.log(userName); // "Alice"

// Default values
const { job = "Unknown" } = person;
console.log(job); // "Unknown"

Destructuring extracts properties into variables

Common Mistakes

  • Using dot notation with variables (use brackets)
  • Forgetting objects are passed by reference
  • Not checking if a property exists before using it

Interview Tips

  • Know dot vs bracket notation differences
  • Explain object reference behavior with an example
  • Be comfortable with destructuring syntax

Related Concepts

Arrays

Lists of values and array methods

Prototypes

JavaScript inheritance mechanism

The "this" Keyword

Context binding rules