JavaScript: Describe one thing with an object

Content updated October 16, 2026

By the end, you can…

An object groups related values under property names instead of numeric positions.
Predict the example's result, change one part, and verify the behavior in your own script.

Before you begin

Keep and transform a collection with arrays

One idea at a time

An object is useful for describing one thing, such as a learner with a name and a completed count. An object literal uses braces. Each property pairs a key with a value using a colon, and commas separate properties. Unlike an array's positions, these keys describe what the values mean.

Read a property with dot notation when you know its identifier-like name. Use bracket notation when the key comes from a variable or contains spaces. Properties can hold strings, numbers, arrays, other objects, or functions. A function stored as a property is called a method.

What to remember first

Remember first

An object groups related values under property names instead of numeric positions.

Read the code before trying it

{ name: "Mia" }Create an object literal: name is a property key; Mia is its string value. This use of braces creates a value rather than a control-flow block.
learner.nameRead a known property: The spelling after the dot is the literal key, not another variable to look up.
learner[key]Read a chosen property: The expression inside brackets is evaluated to choose the key.
learner.completed = 2Update a property: This mutates the object. A const binding can still refer to an object whose properties change.
learner.settings.themeFollow a nested object: Read settings first, then theme on that value. Missing intermediate objects need checks before you go deeper.
learner.greet()Call a method: greet() { return ...; } inside an object is method shorthand for a function-valued property. The parentheses in learner.greet() call it; a method can return a value like any other function.

Walk through an example

javascript

const learner = {
  name: "Mia",
  completed: 2,
  settings: { theme: "light" },
  greet() {
    return "Welcome!";
  },
};
console.log(learner.name);
console.log(learner.settings.theme);
console.log(learner.greet());

The outer object has four properties. settings holds another object and greet holds a function. Each log reads a different kind of value: a simple string, a nested string, and a returned string. No array index is involved because we use descriptive property names.

See it happen: try a small change

Describe one thing with an object: try it

Predict the result, choose a version, then compare the code and output. Try the controls when the example has them. Each version starts fresh.

Code to notice

const learner = { name: "Mia", completed: 2 };
const key = "name";
console.log(learner[key]);
console.log(learner.key);

Live result

Lesson example

index.htmlPreview

What changed: Brackets use the value name and return Mia. Dot-key looks for an absent key property and returns undefined.

Look a little closer

A property that is absent usually reads as undefined. That is different from trying to read a property on null or undefined, which fails. When a nested value is optional, check it before accessing its properties. Later you will meet optional chaining, a compact way to stop a lookup at a missing value.

Assigning an object to another variable shares that object instead of cloning it. This is useful when two parts of a program intentionally work with the same data, but surprising if you expect independent copies. For now, keep track of the one object you create; the advanced lesson will draw out aliases, this, and shallow copies.

Try it in your own project

Create one book object in script.js. Log the title, the property selected by your key variable, and progress before and after its update. Call the reminder method with parentheses to see its returned text.

The interactive preview runs in its own isolated document. Its Output panel mirrors console.log messages; it is not a full DevTools console. Choosing another version or resetting starts a fresh example and does not edit your local files. Read any simulation label: storage and request demonstrations explain their offline substitutes, while the written local examples use the real browser APIs.

A common wrong turn

learner.key reads a property literally named key; learner[key] reads the key stored in the variable. Also separate JSON from JavaScript objects: an object can contain methods, while JSON is a text format with stricter rules that you will learn later.

Your turn: describe one thing with an object

Describe a book with a title, page count, and nested reading progress.

Try this in your own HTML and JavaScript files, then open the page in a browser. There is no separate checked practice for this task yet.

Create a book object and log its title with dot notation.
Store "pages" in a key variable and use brackets to read the count.
Update the current page inside progress, then log it. Add a method that returns a short fixed reading reminder.

Go to the source

MDN: Describe one thing with an object ↗

Examples are authored for Tuklas and checked with code and reference documentation. This is not a claim of independent human review. Suggest a correction.