- To create this object in the previous movie we had to explicitly define every property and method for that one object. This is not very effective if you want several objects. Now, you may remember in the beginning of the course I retrieved the current date and time using the date object. And I did so by assigning a new date object to a variable like this. (typing) What I'm actually doing here is creating a new instance of a date objects that holds the current date and time at the moment I called it.
Wouldn't it be great if we could do the same with the course? So I'll say something like var course o two, equals new course and then define that course instead of building the entire object like this. Well, we can thanks to Object Constructors. Object Constructors are templates for creating objects that we define once and then we can use those templates again and again. In this movie I want to show you how to create an object constructor for the course objects; we can create multiple different course objects without having to define them in this very verbose way.
To make a constructor for any object we start with function, then we give our function a name and here we capitalize the first letter to signify this is an object. In this case we're making a course. The arguments for the object constructor are the properties of the object and we'll use those objects to populate the properties later. So, here I'm going to list out each of the properties we want inside our object; those are title, instructor, level, published, and views.
Then, inside the core block we use the this keyword to refer to the current object. Cause we're making new objects and we don't know the name of the objects yet. And then we assign each of the properties inside the object to the matching argument. So, for example, reset this, which is the current object, title equals and then the argument we want to pass in which is title; and with a semicolon, and do it again, this instructor equals instructor.
This level equals level, this published equals published, and this views equals views. Properties are set up the exact same way. This update views equals, so here we have that anonymous function again from the previous movie, and I just want to return plus plus this dot views.
Now we can use this object constructor to create new instances of the course object, so let's say, for example, I want to create an object for JavaScript Essential Training, I set up a new variable, call it course o one, set it equal to new course, and then I just set up each o' the arguments in this order. So, first the title, JavaScript Essential Training, then the instructor, which is Morten Rand-Hendriksen, then the level, which is one, publish status, which is true, and number of years, which is currently zero.
To check that everything works I can console log out course o one. Save and we got the object over here just like we did before. The cool thing is, I can now set up multiple different courses using the same object constructor. So let's say I want to create another course object for the ECMAScript six course, I would say new course, give it a title, Up and Running with ECMAScript six, then we need the author name, Eve Porcello.
The level, which is one, publish status, which is true, and the number of years, which I'm going to guess at around one, two, three, four, five, six. Save that, and then we can console log out both courses. (typing) And over here, in the console, we now have both of these courses as separate objects. Using this constructor we can now do something more advanced like populate an array with course objects.
So if I change this mark-up a little bit, I'll say var courses, this'll be the array that holds older courses. And then, inside the courses, I grab each o' these calls to new course and just paste 'em in and separate them with a comma. This is just a standard array. (clicking) (typing) And just have to make sure I don't end the last one with a semicolon. This gives us an array of course objects and now I can console log out all of the courses and the entire array by just calling it.
This gives us the array over here on the console and here you see we have both of the courses as independent entities inside the array. And I can call on any property within any of these course objects using array index. So, if I want the instructor for object number two, which has index one, I simply say course one dot instructor. Save, and that gives me Eve Porcello. And if I want to run the method inside that object, I simply call the method.
Update views. (typing) Save again, and the views are updated by one. I think you get the idea now. Objects are powerful and object constructors allow us to quickly create objects based on a template which makes working with objects that much easier.
Updated
4/1/2019Released
5/17/2017Through practical examples and mini-projects, this course helps you build your understanding of JavaScript piece by piece, from core principles like variables, data types, conditionals, and functions through advanced topics including loops, closures, and DOM scripting. Along the way, you will also be introduced to some ES6 and the basics of JavaScript libraries.
- What is JavaScript?
- Working with data
- Using functions and objects
- Working with JavaScript and the DOM
- Changing DOM elements
- Handling events
- Working with loops
- Making images responsive using markup
- Troubleshooting code
- Validating functionality
- Minifying JavaScript
Share this video
Embed this video
Video: Object constructors