Objects - Intro to Programming Tutorial

Quick Summary

Objects store labeled properties accessed by key. They're perfect for representing real-world entities like users, products, or settings. Together with arrays, objects let you model complex data structures.

What is an Object?

An object is a collection of key-value pairs. Keys are strings (or Symbols), values can be anything.

const user = {
  name: "Alice",     // key: "name", value: "Alice"
  age: 30,           // key: "age", value: 30
  isActive: true     // key: "isActive", value: true
};

Creating Objects

// Object literal (most common)
const car = {
  brand: "Toyota",
  year: 2024
};

// Empty object
const empty = {};

// Nested objects
const company = {
  name: "TechCorp",
  address: {
    street: "123 Main St",
    city: "San Francisco"
  }
};

Accessing Properties

Dot notation (preferred when key is known):

user.name;    // "Alice"
user.age;     // 30

Bracket notation (for dynamic keys):

user["name"];       // "Alice"
const key = "age";
user[key];          // 30

Modifying Objects

const user = { name: "Alice" };

// Add property
user.age = 30;

// Update property
user.name = "Alicia";

// Delete property
delete user.age;

Object Methods

const user = { name: "Alice", age: 30 };

Object.keys(user);    // ["name", "age"]
Object.values(user);  // ["Alice", 30]
Object.entries(user); // [["name", "Alice"], ["age", 30]]

Shorthand Syntax (ES6+)

const name = "Alice";
const age = 30;

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

// Shorthand (when key matches variable name)
const user = { name, age };

Methods in Objects

const calculator = {
  add(a, b) {
    return a + b;
  },
  subtract(a, b) {
    return a - b;
  }
};

calculator.add(5, 3); // 8

Try It Yourself

Here's a practical example you can try. Copy this code and run it in your browser's console (press F12 to open developer tools) or in the Code Playground.

// Creating objects
const user = {
  name: "Alice",
  age: 30,
  email: "alice@example.com",
  isActive: true
};

// Accessing properties
console.log(user.name);     // "Alice" (dot notation)
console.log(user["email"]); // "alice@example.com" (bracket notation)

// Modifying objects
user.age = 31;              // Update existing
user.role = "admin";        // Add new property
delete user.isActive;       // Remove property

// Nested objects
const product = {
  name: "Laptop",
  price: 999,
  specs: {
    cpu: "M2",
    ram: "16GB",
    storage: "512GB"
  }
};
console.log(product.specs.cpu); // "M2"

// Object with methods
const calculator = {
  value: 0,
  add(n) {
    this.value += n;
    return this;
  },
  subtract(n) {
    this.value -= n;
    return this;
  },
  getResult() {
    return this.value;
  }
};

calculator.add(10).subtract(3);
console.log(calculator.getResult()); // 7

// Getting keys, values, entries
console.log(Object.keys(user));   // ["name", "age", "email", "role"]
console.log(Object.values(user)); // ["Alice", 31, "alice@example.com", "admin"]

Key Takeaways

✓Group related data into structured records with named properties.
✓Practice with real code examples to solidify your understanding
✓This concept builds the foundation for more advanced topics