Start learning free

LESSON 179 OF 344 · OBJECT-ORIENTED PROGRAMMING

Class Fields in JavaScript: Object Properties

Lesson Read the full explanation

TL ; DR:

A property is a piece of data attached to an object. In JavaScript you don't declare them in the class — you just assign them with the dot operator:
```
let dog = new Dog();
dog.name = "Rex";
dog.age = 4;
```
Each object has its own properties, so two dogs can have different names without interfering.

Full lesson:

Right now your Dog class is just an empty shell — every Dog object you create is identical. We need a way to attach data to each object.

In JavaScript, the data attached to an object is called a property. (Other languages call them fields or attributes — same idea.)

Setting properties

JavaScript is a dynamic language: you don't have to declare a property up front. Just assign to it with the dot operator:

let dog = new Dog();
dog.name = "Rex";
dog.age = 4;

After this, dog has a name property equal to "Rex" and an age property equal to 4.

Reading properties

console.log(dog.name);   // Rex
console.log(dog.age);    // 4

You read properties the same way you set them — with the dot operator.

Each object has its own properties

let rex = new Dog();
let luna = new Dog();
rex.name = "Rex";
luna.name = "Luna";
// rex.name is "Rex", luna.name is "Luna" — they don't interfere.

Your task

The Dog class is already defined for you. Below it, set dog.name to "Rex" and dog.age to 4. The pre-filled console.log will then show:

Rex is 4 years old

STEP 1 OF 1

Guided

Ctrl + Enter to check

JAVASCRIPT · OBJECT-ORIENTED PROGRAMMING

Class Fields in JavaScript, explained

Properties: data attached to an object

An empty Dog class produces objects that are all identical, so there is nothing to tell one dog from another. To make them differ you attach data to each object. In JavaScript that data is called a property. Other languages call the same idea a field or an attribute, which is why this lesson is called "class fields".

Setting properties

JavaScript objects are dynamic: you don't have to declare a property before using it. Assigning to it with the dot operator creates it:

class Dog {
}

let dog = new Dog();
dog.name = "Rex";
dog.age = 4;

After these two assignments, dog has a name property equal to "Rex" and an age property equal to 4. The class itself stayed empty. The properties belong to the one object, not to the class.

Reading properties

You read a property with the same dot operator:

console.log(dog.name);   // Rex
console.log(dog.age);    // 4

Reading a property that was never set doesn't throw an error. It gives undefined:

let other = new Dog();
console.log(other.name);   // undefined

This is the source of the most common property bug, covered below.

Each object has its own properties

Two objects made from the same class keep separate properties:

let rex = new Dog();
let luna = new Dog();
rex.name = "Rex";
luna.name = "Luna";

console.log(rex.name);    // Rex
console.log(luna.name);   // Luna

Setting rex.name never touches luna.name. Because each object has its own data, a program can hold many dogs at once.

Changing and storing values

A property is not fixed once set. Assigning again replaces the old value, so dog.age = 5 turns a four-year-old dog into a five-year-old one. A property can also hold any kind of value: a number, a string, a boolean, an array, or even another object, as in dog.tricks = ["sit", "roll"].

Other ways to work with properties

Square brackets. dog["name"] is the same as dog.name. Use brackets when the property name is stored in a variable.
Checking existence. "name" in dog is true once the property has been set, and Object.keys(dog) returns the list of property names: ["name", "age"].
Removing. delete dog.age removes the property, and dog.age is undefined afterwards.
Field declarations. Modern JavaScript also lets you declare fields with default values in the class body, as in class Dog { name = "unknown"; age = 0; }. Every new Dog starts with those values. Setting properties by assignment, as in this lesson, works with or without such a declaration.

The exercise, step by step

The starter code creates the dog and prints a sentence, but the two lines in between are empty:

let dog = new Dog();


console.log(dog.name + " is " + dog.age + " years old");

Without them, dog.name and dog.age are both undefined, and the output is undefined is undefined years old. The only step is to fill the gap: set dog.name to "Rex" and dog.age to 4. Strings need quotes and numbers don't.

The solution in JavaScript

class Dog {
}

let dog = new Dog();
dog.name = "Rex";
dog.age = 4;
console.log(dog.name + " is " + dog.age + " years old");

The output is:

Rex is 4 years old

Common mistakes

Typos create new properties. Because assignment creates a property when it is missing, dog.nmae = "Rex" raises no error. It adds a property called nmae, and dog.name stays undefined. When output shows undefined, check the spelling of the property on both the writing side and the reading side.
Setting properties on the class instead of the object. Dog.name = "Rex" does not give any dog a name. Properties are set on the object created with new, here dog.
Setting the property before the object exists. dog.name = "Rex" placed above let dog = new Dog(); fails with a ReferenceError, because the variable can't be used before its declaration.
Forgetting quotes around text. dog.name = Rex looks for a variable called Rex and fails with ReferenceError: Rex is not defined.
Repeating assignments for every object. Setting the same properties line by line after each new is easy to get wrong. The next lesson shows constructors, which set them as the object is created.

Key takeaways

A property is data stored on one object, written object.property.
Assigning to a property that doesn't exist creates it; reading one that doesn't exist gives undefined.
Each object has its own properties, even when they come from the same class.
A misspelled property name silently creates a new property, so undefined in the output usually points to a typo.

Keep going with JavaScriptAbout 340 step-by-step lessons, from your first line of code to coding interviews. Free to start.

Start learning free