JavaScript Objects & Prototypes

Step 1: What are Objects?

In JavaScript, an object is a collection of key-value pairs. Each pair is called a property. When a property's value is a function, it is called a method.

Objects are the most fundamental data structure in JavaScript — arrays, functions, dates, and even regular expressions are all objects under the hood.

Object Literal: person

Key

Value

name

"Alice" (string)

age

30 (number)

greet

function() (method)

Key terms:

Property — a key-value pair stored in an object
Key — the name (always a string or Symbol) that identifies a property
Value — the data stored under a key (any type: string, number, array, object, function, etc.)
Method — a property whose value is a function
Dot notation — person.name — the most common way to access properties
Bracket notation — person["name"] — required when keys have spaces or are dynamic

// Creating an object with an object literal
const person = {
    name: "Alice",
    age: 30,
    greet: function() {
        return "Hi, I'm " + this.name;
    }
};

// Accessing properties
person.name;          // "Alice"       (dot notation)
person["age"];        // 30            (bracket notation)
person.greet();       // "Hi, I'm Alice"

Step 2: Creating & Accessing Properties

Use the property inspector below to explore an object. You can add, modify, and delete properties in real time and see the corresponding JavaScript code.

Object: myObj

Key	Value	Type	Delete

Key

Value

Type

Access Notation:

// Object literal
const myObj = {
    name: "Alice",
    age: 30,
    city: "NYC"
};

// Dot notation
myObj.name;    // "Alice"
myObj.age;     // 30
myObj.city;    // "NYC"

// Bracket notation
myObj["name"];    // "Alice"
myObj["age"];     // 30
myObj["city"];    // "NYC"

Step 3: Methods & `this`

A method is a function stored as an object property. Inside a method, the this keyword refers to the object that called the method. But be careful — this can change depending on how the function is invoked.

Code Editor — try editing and running:

Output:

Click "Run Code" to see output...

How this works:

car.describe()

this = car object

const fn = car.describe; fn()

this = undefined (strict) or window

fn.call(car)

this = car (explicitly set)

fn.bind(car)()

this = car (permanently bound)

Step 4: Prototype Chain

Every JavaScript object has an internal link to another object called its prototype. When you access a property, JavaScript first looks on the object itself, then walks up the prototype chain until it finds the property or reaches null.

null

__proto__

Object.prototype

toString(), hasOwnProperty(), valueOf()

__proto__

animal (prototype)

type: "Animal", speak()

__proto__

dog (our object)

name: "Rex", breed: "Labrador"

Property Lookup — type a property name to trace the chain:

Type a property name above and click "Look Up" to trace the prototype chain.

// Creating a prototype chain with Object.create
const animal = {
    type: "Animal",
    speak: function() { return this.name + " makes a sound."; }
};

const dog = Object.create(animal);
dog.name = "Rex";
dog.breed = "Labrador";

dog.name;       // "Rex"       (own property)
dog.type;       // "Animal"    (inherited from animal)
dog.toString(); // "[object Object]" (inherited from Object.prototype)

Step 5: Classes & Constructors

Before ES6, JavaScript used constructor functions to create objects with shared methods. ES6 introduced the class syntax — a cleaner way to write the same thing. Both use prototypes under the hood.

Constructor Function (ES5)

function Person(name, age) {
    this.name = name;
    this.age = age;
}

Person.prototype.greet =
  function() {
    return "Hi, I'm " +
      this.name;
  };

var p = new Person(
    "Alice", 30
);

Class Syntax (ES6)

class Person {
    constructor(name, age) {
        this.name = name;
        this.age = age;
    }

    greet() {
        return "Hi, I'm " +
          this.name;
    }
}

const p = new Person(
    "Alice", 30
);

Class Builder

Class Name

Extends

Properties (comma-separated)

Method Name

Method Body (return expression)

Generated Code:

// Click "Generate Class" to see the code

Instance Inspector:

Generate a class, then click "Create Instance" to inspect it.

Step 6: Knowledge Check

1. What does Object.create(proto) do?

Creates a deep copy of proto Creates a new object with proto as its prototype Merges two objects into one

2. Inside a method, what does this refer to?

The global window object (always) The function itself The object that called the method

3. What is at the top of every prototype chain?

Object.prototype (whose __proto__ is null) window Function.prototype

JavaScript Objects & Prototypes

Step 1: What are Objects?

Step 2: Creating & Accessing Properties

Step 3: Methods & `this`

Step 4: Prototype Chain

Step 5: Classes & Constructors

Step 6: Knowledge Check

About This Lab

How It Works

More Labs in Programming

JavaScript Promises & Async

Python Basics

Array Methods in JavaScript