Object Introduction

By the end of this lesson, you will be able to create and read JavaScript objects as collections of key-value pairs for modelling real-world things.

What it is

A JavaScript object is a collection of properties. Each property has a key, also called a property name, and a value. Think of an object as a small form with labelled fields: name holds a person's name, age holds their age, and so on. The value can be a string, number, boolean, another object, or a function. Related terms include object literal, property, key, value, dot notation, and bracket notation.

Why it matters

• It groups related data instead of using many separate variables.
• It models real things, such as users, products, books, or settings.
• It lets you pass many values to a function as one argument.
• It is the basic shape of many JSON responses and configuration files.
• It supports adding or changing properties as your program grows.

Syntax or steps

The smallest useful pattern is an object literal:

const thing = {
  key1: value1,
  key2: value2
};

1. Use const to create a variable that points to the object.
2. Use curly braces {} to write an object literal.
3. Write a key, then a colon, then a value.
4. Separate multiple properties with commas.
5. Read a property with thing.key1 or thing["key1"].

Example

const user = {
  name: "Ada",
  age: 36,
  isAdmin: false
};

console.log(user.name);
console.log(user["age"]);

user.city = "London";
console.log(user);

Part by part:

• const user = { ... } creates an object and stores it in the variable user.
• name: "Ada" is a property whose key is name and whose value is a string.
• age: 36 stores a number.
• isAdmin: false stores a boolean.
• user.name uses dot notation to read the name property.
• user["age"] uses bracket notation to read the age property.
• user.city = "London" adds a new property called city.

Common mistakes

• Forgetting commas between properties. JavaScript will report a syntax error. Add a comma after each property except the last one.
• Using a variable as a key without square brackets. Writing { name: userName } creates a key called name, not the value of name. Use { [name]: userName } when you need a computed key.
• Thinking const freezes the object. const prevents reassigning the variable, but you can still change properties. Use Object.freeze(user) if you need to prevent property changes.
• Assuming every property exists. Reading a missing property returns undefined. Check the value before using it.

When to use it

Objects are best for simple records with named fields. Compare them with arrays and maps:

Use an object when you want to model a thing with labels. Use an array when you want a list. Use a Map when you need more flexible key handling.

Practice

Guided exercise: Create an object called book with the properties title, author, and pages. Then log the title.

const book = {
  title: "The Enchanted Loom",
  author: "A. Weaver",
  pages: 240
};

console.log(book.title);

Expected output: The Enchanted Loom

Challenge: Add a rating property to book and log the whole object. Hint: use book.rating = 4.5; before console.log(book);.

Quick check

Question: What does user["name"] return if user is { name: "Ada", age: 36 }?

Answer: It returns the string "Ada".

Summary

JavaScript objects are labelled collections of key-value pairs. They let you group related data and model real-world things in a readable way. Once you can create, read, and update properties, you have the foundation for working with configuration, API data, and larger programs.