Start learning free

LESSON 176 OF 344 · OBJECT-ORIENTED PROGRAMMING

Defining a Class in JavaScript: The class Keyword

Lesson Read the full explanation

TL ; DR:

A class is a blueprint for creating objects. It groups together related data and behavior under a single name.
In JavaScript, you define a class with the class keyword, followed by the class name and a pair of curly braces:
```
class Dog {

}
```
The body of the class can be empty — that's still a valid class. We'll add data and behavior to it in the next lessons.

Full lesson:

So far, you've worked with built-in types like number, string, and arrays. But what if you want to model something the language doesn't have a type for — like a Dog, a BankAccount, or a Game?

That's what classes are for. A class lets you define your own type by listing what data it holds and what actions it can perform.

Why classes?

Imagine you're writing a program about dogs. Each dog has a name, an age, and can bark. Without classes, you'd have to track each dog's name in one variable, age in another, and write a separate bark() function for each. That gets messy fast.

With a class, you bundle all of that into one neat package called Dog:

class Dog {
    // We'll add fields and methods in upcoming lessons.
}

The syntax

Defining an empty class in JavaScript looks like this:

class ClassName {
}

Three things to notice:

The keyword class tells JavaScript you're defining a new type.
ClassName is the name you choose. By convention, JavaScript class names use PascalCase — capitalized words with no underscores: Dog, BankAccount, HighScore.
The curly braces { } hold the body of the class. They can be empty for now.

Your task

Define an empty class called Dog. The pre-filled code below will create an instance of your class and print a confirmation message. If you define the class correctly, the program will run and print:

Defined the Dog class!

STEP 1 OF 1

Guided

Ctrl + Enter to check

JAVASCRIPT · OBJECT-ORIENTED PROGRAMMING

Defining A Class in JavaScript, explained

What a class is

JavaScript has built-in types such as numbers, strings and arrays. A class lets you add your own: a blueprint that describes what a kind of object holds and what it can do. A Dog class, a BankAccount class or a Game class each group related data and behavior under one name, instead of leaving them as loose variables and functions.

The class itself is not a dog. It is the plan from which dogs are built. Building one from the plan is a separate step, done with new, and this lesson only covers the first part: writing the blueprint.

The syntax

An empty class takes three pieces:

class ClassName {
}

The class keyword tells JavaScript that a new type is being defined.
The name comes next. By convention class names use PascalCase: every word starts with a capital letter and there are no underscores, as in Dog, BankAccount or HighScore. The language does not force this, but nearly all JavaScript code follows it, and it lets a reader tell a class from a variable at a glance.
The curly braces hold the class body. Fields and methods will go here in later lessons. An empty body is valid, so class Dog { } is already a complete, working class.

There is no semicolon after the closing brace. A class declaration is a statement of its own, like a function declaration.

What an empty class already gives you

Even with nothing in the body, the class exists as a value you can use. It has a name, and you can create objects from it:

class Dog {
}

let dog = new Dog();
console.log(typeof Dog);          // function
console.log(dog instanceof Dog);  // true
console.log(dog.constructor.name); // Dog

Under the hood a JavaScript class is a special kind of function, which is why typeof Dog prints function. The instanceof operator asks whether an object was built from a given class.

The exercise, step by step

The starter code already uses the class that you have not written yet:

let dog = new Dog();
console.log("Defined the Dog class!");

Run as it is, this stops with an error, because JavaScript does not know what Dog is. The lesson has a single step: declare an empty class named Dog at the top of the file. Write the keyword, the PascalCase name and a pair of braces.

The solution in JavaScript

class Dog {
}

let dog = new Dog();
console.log("Defined the Dog class!");

With the class in place, new Dog() works and the program prints:

Defined the Dog class!

Common mistakes

Using the class before declaring it. Class declarations are not usable before the line that defines them. Running new Dog() above the class body fails with ReferenceError: Cannot access 'Dog' before initialization. That is why the class goes at the top of the file, above the code that creates objects.
Forgetting the name's capital letter. class dog { } works, but then new Dog() fails with ReferenceError: Dog is not defined, because JavaScript names are case-sensitive: dog and Dog are different identifiers.
Calling the class like a function. Dog() without new throws TypeError: Class constructor Dog cannot be invoked without 'new'. A class is meant to be instantiated, not called.
Adding parentheses to the declaration. The header is class Dog, not class Dog(). Parentheses belong to the new Dog() call, not to the definition.
Using the function keyword by habit. Older JavaScript built objects with plain functions and prototypes. The class syntax is the modern, clearer way and is what this chapter uses.

Key takeaways

A class is a blueprint that groups data and behavior under one name.
Define one with class Name { }, using PascalCase for the name.
An empty body is a valid class; later lessons fill it with a constructor, properties and methods.
Declare the class before the code that creates objects from it.
Objects are created from a class with new, which the next lesson covers.

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

Start learning free