Constructors in JavaScript

Above I have created a class named Activity that is defined but nothing is in it yet. The first thing we need to do inside a class is to create a constructor function.

A constructor is a function that constructs an instance of a class which is called an object. In the future, if we want to create a new activity the constructor function will be responsible for creating that new activity object based on this class. We will start by going inside the class and adding a constructor, which is the function, that will fire whenever we want to create a new activity object.

Now, whenever we want to create a new a new activity object, later on we can say: var running = new Activity();

Activity has a capital A. That’s how we know to look for our activity class. The new keyword does three things:

1. It creates a new empty object.
2. Sets the value of this to be the new empty object(Whenever we refer to this keyword inside the class it is the new object that this just created.)
3. It calls the constructor method(It allows us to add properties onto the object by creating this keyword which allows us to add, for example, this.location = or …

When we call the constructor we’re taking this new object that we’ve created and attaching new properties to it. What we don’t want to do is hard code it.

We don’t want to hard code because whenever a new activity of the object created is created it will have the same location and duration property. The whole idea is to create different instances of the activity object with different values for the properties. We would need to find out a way to pass in information when we create the activity into the constructor method by using arguments.

In the constructor we could say we want to receive two arguments; location and duration. There are two variables were expecting when a new activity is created. Those will be passed like so below.

When we call a new activity, we’re calling a new constructor, we’re passing two values, “Cowl’s Mountain” and 120. Inside the constructor we have access to them. Instead of hard coding we can set this.location to location and this.duration to duration as seen below.

Every time a new activity is created we are creating it with different values. Now, we have 2 activity objects with different values for the location and duration properties.

In Conclusion

When we say we want a new activity the new keyword is doing three things. It’s creating a new object then it sets the value of the keyword this inside the class equal to the new empty object so we have access to that empty object via this keyword. Then, it’s calling the constructor function inside the activity class and passing in the values into the constructor and then attaching the location property and duration property and the new object and setting it equal to the values that are passed in as arguments.

Logging those into the console. Once saved it will output on the console. The first activity has the location of Cowl’s Mountain and a duration of 120 minutes. The properties are shown below.

This way of doing this is much easier way of doing things. You’re coding less and creating two separate versions of the same kind of object.

Thanks for reading!