Start learning free

LESSON 177 OF 344 · OBJECT-ORIENTED PROGRAMMING

Creating Objects in JavaScript: new and Class Instances

Lesson Read the full explanation

TL ; DR:

  • An object is an instance of a class — a real, usable copy made from the blueprint.


  • You create one with the new keyword:

    let rex = new Dog();
    

  • Each call to new creates a separate object, even if they all come from the same class.



Full lesson:

In the previous lesson you defined the Dog class — the blueprint. But a blueprint isn't a dog. To get an actual dog you can interact with, you need to create an instance of the class. An instance is also called an object.


The new keyword

To create a new object in JavaScript, use the new keyword followed by the class name and parentheses:

let rex = new Dog();

What this line does:

  • new Dog() creates a fresh Dog object.

  • let rex declares a variable named rex that holds the new object.

  • The = connects the two — rex now refers to the freshly-created dog.


Many objects from one class

You can call new Dog() as many times as you want, and each call gives you a brand-new, independent object:

let rex   = new Dog();
let buddy = new Dog();
let luna  = new Dog();

rex, buddy, and luna are all Dog objects, but they're different objects. Changing one won't affect the others — they share the blueprint but live their own lives.


Your task

The Dog class is already defined for you. Below it, create three separate Dog objects named rex, buddy, and luna. The pre-filled console.log will confirm:

Created 3 Dog objects
STEP 1 OF 3
    Ctrl + Enter to check

    JAVASCRIPT · OBJECT-ORIENTED PROGRAMMING

    Creating Objects in JavaScript, explained

    Classes and objects

    A class is a blueprint, and a blueprint is not something you can interact with. A house plan has no rooms to walk through until someone builds the house. In the same way, the Dog class describes dogs without being one. To get an actual dog you create an instance of the class. An instance is also called an object, and the two words mean the same thing here.

    The new keyword

    You create an object by writing new, then the class name, then parentheses:

    let rex = new Dog();
    

    The line does three things:

    • new Dog() builds a fresh Dog object. If the class has a constructor, new runs it, and the expression evaluates to the finished object.
    • let rex declares a variable named rex.
    • The = stores the new object in that variable, so rex now refers to it.

    The parentheses are required in practice, because they are where the constructor's arguments go. Later lessons pass values there, as in new Dog("Rex", 4).

    Many objects from one class

    You can call new Dog() as often as you like. Every call returns a brand-new object that is independent of all the others:

    let rex   = new Dog();
    let buddy = new Dog();
    let luna  = new Dog();
    

    All three are Dog objects, and rex instanceof Dog is true, yet they are three different objects. They share the blueprint but have separate lives, so changing one does not change the others:

    class Dog {
    }
    
    let rex = new Dog();
    let buddy = new Dog();
    rex.name = "Rex";
    
    console.log(rex.name);    // Rex
    console.log(buddy.name);  // undefined
    console.log(rex === buddy); // false
    

    The === comparison on objects asks whether both sides are the very same object, not whether they look alike. Two dogs made by two separate new calls are never ===, even when both are empty.

    Variables hold references

    A variable that holds an object really holds a reference to it. Copying the variable copies the reference, not the object:

    let rex = new Dog();
    let alias = rex;
    alias.name = "Rex";
    
    console.log(rex.name);       // Rex
    console.log(rex === alias);  // true
    

    Here there is still one dog with two names for it. Only new makes another one.

    The exercise, step by step

    The Dog class is already written. The checks at the bottom of the starter code read the variables rex, buddy and luna, so each must exist:

    1. Create the first dog. Below the class, write let rex = new Dog();. The new keyword runs the class constructor and returns the freshly built object.
    2. Create the second dog. On the next line, store another new Dog() in buddy. It is a different object from rex.
    3. Create the third dog and store it in luna. One class can produce any number of objects.
    class Dog {
    }
    
    let rex = new Dog();
    let buddy = new Dog();
    let luna = new Dog();
    
    if (rex != null) console.log("rex exists");
    if (buddy != null) console.log("buddy exists");
    if (luna != null) console.log("luna exists");
    

    It prints:

    rex exists
    buddy exists
    luna exists
    

    The check rex != null is true for any value that is neither null nor undefined, so it is true for a real object. If a variable was never declared, the check does not print anything: JavaScript stops with a ReferenceError instead.

    Common mistakes

    • Forgetting new. let rex = Dog(); throws TypeError: Class constructor Dog cannot be invoked without 'new'. A class must be instantiated with new.
    • Reusing a variable name. Declaring let rex twice in the same scope is a SyntaxError. Give each dog its own name, or use an array when the number of dogs is not fixed.
    • Expecting one new to make several objects. let a = new Dog(); let b = a; creates one dog. Every new object needs its own new.
    • Using const and then reassigning. const is a good choice for a variable that always holds the same object. Properties of that object can still change, but rex = new Dog() on a const throws TypeError: Assignment to constant variable. This lesson uses let to match its exercise.

    Key takeaways

    • An object is an instance of a class, created with new ClassName().
    • Each new call builds a separate, independent object.
    • A variable holds a reference to its object, and === on two objects is true only for the same object.
    • Calling a class without new is an error.
    Keep going with JavaScriptAbout 340 step-by-step lessons, from your first line of code to coding interviews. Free to start.
    Start learning free