Object Intro

The most common way to create an object is an object literal: a pair of curly braces containing key: value pairs, separated by commas.

// Real-Life Comparison

In real life, a car is an object. Every car has the same kinds of properties (name, model, weight, color) and the same methods (start, drive, brake, stop). The property values differ from car to car, and the methods are performed at different times:

JavaScript objects work the same way: properties are named values stored as key: value pairs, and methods are functions stored the same way.

// Object Literal Syntax

const book = {
  title: "Dune",
  author: "Frank Herbert",
  pages: 412,
  available: true
};

1. Curly braces { } start and end the object
2. Each property is a key, a colon, then a value
3. Properties are separated by commas
4. A comma after the last property is allowed and common (it makes adding lines easier)

// Reading Values

console.log(book.title);      // "Dune"
console.log(book["pages"]);   // 412
console.log(book.price);      // undefined  (no such property)

Dot notation is the usual choice. Bracket notation is covered fully in the next lesson.

// Values Can Be Anything

A property can hold any type: strings, numbers, booleans, arrays, other objects, even functions:

const player = {
  name: "Kai",
  level: 7,
  online: false,
  inventory: ["sword", "potion", "map"],
  position: { x: 120, y: 45 },
  greet() { return "Ready!"; }
};

console.log(player.inventory[1]);   // "potion"
console.log(player.position.x);    // 120
console.log(player.greet());       // "Ready!"

Chaining dots and brackets like player.position.x lets you reach into objects inside objects.

// Starting Empty

You can create an empty object and fill it in as you go:

const settings = {};

settings.theme = "dark";
settings.fontSize = 18;

console.log(settings);

// const Objects Can Still Change

Recall from the Const lesson: const locks which object the variable points to, not the object's contents.

const user = { name: "Ada" };

user.name = "Grace";      // fine: changing a property
user.age  = 36;           // fine: adding a property

user = { name: "Alan" };  // TypeError: cannot point user at a new object

// Key Naming

Keys follow the same rules as variable names. If a key needs a space, a hyphen, or starts with a digit, wrap it in quotes:

const item = {
  name: "Lamp",
  "shipping-cost": 4.99,
  "2day": true
};

console.log(item["shipping-cost"]);   // 4.99  (must use brackets)

// Objects Are Compared by Identity

Two objects with identical contents are still two different objects:

const a = { x: 1 };
const b = { x: 1 };
const c = a;

console.log(a === b);   // false  (different objects)
console.log(a === c);   // true   (same object, two names)

c.x = 99;
console.log(a.x);       // 99  (a and c are the same object)

// Objects vs Arrays

// Array: an ordered list of similar things, accessed by position
const scores = [88, 92, 75];

// Object: one thing with named details, accessed by key
const test = { subject: "Math", score: 88, date: "2026-10-02" };

// Often combined: a list of objects
const tests = [
  { subject: "Math",    score: 88 },
  { subject: "Science", score: 92 }
];
console.log(tests[1].subject);   // "Science"

// Avoid new Object()

You may see objects created with the new keyword:

const person = new Object({ firstName: "John", age: 50 });

It works, but there is no reason to use it. The object literal { } does the same thing and is shorter, clearer, and faster. Declare objects with const and a literal.

// Objects Are King

If you understand objects, you understand JavaScript, because almost everything in it is an object: arrays, dates, functions, maps, sets, regular expressions, errors, and Math. All values except primitives are objects. There are 7 primitive types, each holding a single simple value:

Together with Object, that makes the 8 data types from JS Types.

// Quick Check

const pet = { name: "Rex", toys: ["ball", "rope"] };
console.log(pet.toys[1]);

const a = { n: 1 };
const b = a;
b.n = 5;
console.log(a.n);

// Try It

▶ Open Playground

1. Click Open Playground. Finish the movie object with a title, year, rating, and an array of actors
2. Print the second actor using dots and brackets together
3. Start with an empty object and add three properties one line at a time
4. Make two identical objects, compare them with ===, and explain the result