What Is an Object?

So far, each variable has held one value: a number, a piece of text or an array of similar values. In this lesson, you'll learn about objects. An object keeps together several values that describe one thing.

Imagine a pet shop that keeps records of its animals. Each animal has a name, a species and an age. You could store them in separate variables:

const petName = "Rex";
const petSpecies = "dog";
const petAge = 3;

For one animal that works, but for ten animals you would need thirty variables, and nothing in the code would say which of them belong together. You could put the values in an array instead:

const pet = ["Rex", "dog", 3];

Now they are together, but you have to remember that index 0 is the name and index 1 the species. And what does pet[2] mean? The code doesn't tell you.

An object solves both problems. It keeps the values together and gives each of them a name:

const pet = {
    name: "Rex",
    species: "dog",
    age: 3
};

An object is written in curly braces { }. Inside are its properties, separated by commas. Each property has a key (its name: name, species, age), then a colon and a value. Write keys like variable names, without quotes. A value can be anything you know: text, a number, a boolean, even an array.

A short object fits on one line; a longer one is easier to read with each property on its own line, as above. Both mean the same. When you print an object, the console shows it on one line, the way it is written in code:

const pet = { name: "Rex", species: "dog", age: 3 };
console.log(pet);

{ name: "Rex", species: "dog", age: 3 }

As with arrays, don't join an object to text with +: "Pet: " + pet turns the object into the text [object Object], which doesn't tell you much. Put a comma between them instead: console.log("Pet:", pet).

There are two typical mistakes when writing objects. If you forget the comma between two properties:

const pet = { name: "Rex" species: "dog" };

the program ends with SyntaxError: Unexpected identifier 'species': JavaScript didn't expect another key without a comma before it. And inside the curly braces, you write a colon, not =:

const pet = { name = "Rex" };

This ends with SyntaxError: Invalid shorthand property initializer. The message isn't much help, so remember it: when you see it, look for an = inside curly braces.