Using Constructors

Modern JavaScript Using Objects
11 minutes
Share the link to this page
Copied
  Completed
You need to have access to the item to view this lesson.
One-time Fee
$99.99
List Price:  $139.99
You save:  $40
€96.21
List Price:  €134.70
You save:  €38.49
£79.93
List Price:  £111.90
You save:  £31.97
CA$143.79
List Price:  CA$201.32
You save:  CA$57.52
A$160.48
List Price:  A$224.69
You save:  A$64.20
S$135.83
List Price:  S$190.17
You save:  S$54.33
HK$777.07
List Price:  HK$1,087.93
You save:  HK$310.86
CHF 89.45
List Price:  CHF 125.24
You save:  CHF 35.78
NOK kr1,141.95
List Price:  NOK kr1,598.78
You save:  NOK kr456.82
DKK kr717.64
List Price:  DKK kr1,004.72
You save:  DKK kr287.08
NZ$177.52
List Price:  NZ$248.53
You save:  NZ$71.01
د.إ367.25
List Price:  د.إ514.17
You save:  د.إ146.91
৳11,994.74
List Price:  ৳16,793.12
You save:  ৳4,798.37
₹8,496.63
List Price:  ₹11,895.62
You save:  ₹3,398.99
RM450.75
List Price:  RM631.07
You save:  RM180.32
₦155,628.43
List Price:  ₦217,886.03
You save:  ₦62,257.60
₨27,934.96
List Price:  ₨39,110.06
You save:  ₨11,175.10
฿3,444.45
List Price:  ฿4,822.37
You save:  ฿1,377.92
₺3,518.54
List Price:  ₺4,926.10
You save:  ₺1,407.55
B$617.53
List Price:  B$864.57
You save:  B$247.04
R1,837.80
List Price:  R2,572.99
You save:  R735.19
Лв188.31
List Price:  Лв263.64
You save:  Лв75.33
₩144,872.25
List Price:  ₩202,826.95
You save:  ₩57,954.69
₪364.89
List Price:  ₪510.86
You save:  ₪145.97
₱5,883.01
List Price:  ₱8,236.45
You save:  ₱2,353.44
¥15,672.80
List Price:  ¥21,942.55
You save:  ¥6,269.75
MX$2,028.91
List Price:  MX$2,840.56
You save:  MX$811.64
QR366.34
List Price:  QR512.89
You save:  QR146.55
P1,382.59
List Price:  P1,935.69
You save:  P553.09
KSh12,923.70
List Price:  KSh18,093.70
You save:  KSh5,170
E£5,091.27
List Price:  E£7,127.98
You save:  E£2,036.71
ብር12,764.56
List Price:  ብር17,870.89
You save:  ብር5,106.33
Kz91,790.82
List Price:  Kz128,510.82
You save:  Kz36,720
CLP$99,155.08
List Price:  CLP$138,821.08
You save:  CLP$39,666
CN¥729.81
List Price:  CN¥1,021.77
You save:  CN¥291.95
RD$6,104.52
List Price:  RD$8,546.58
You save:  RD$2,442.05
DA13,454.60
List Price:  DA18,836.98
You save:  DA5,382.37
FJ$232.11
List Price:  FJ$324.96
You save:  FJ$92.85
Q773.21
List Price:  Q1,082.52
You save:  Q309.31
GY$21,000.46
List Price:  GY$29,401.48
You save:  GY$8,401.02
ISK kr13,903.60
List Price:  ISK kr19,465.60
You save:  ISK kr5,562
DH1,007.40
List Price:  DH1,410.40
You save:  DH403
L1,841.78
List Price:  L2,578.57
You save:  L736.78
ден5,922.50
List Price:  ден8,291.74
You save:  ден2,369.23
MOP$803.42
List Price:  MOP$1,124.82
You save:  MOP$321.40
N$1,834.70
List Price:  N$2,568.66
You save:  N$733.95
C$3,694.32
List Price:  C$5,172.20
You save:  C$1,477.87
रु13,665.58
List Price:  रु19,132.35
You save:  रु5,466.77
S/374.71
List Price:  S/524.60
You save:  S/149.89
K406.86
List Price:  K569.63
You save:  K162.76
SAR375.72
List Price:  SAR526.02
You save:  SAR150.30
ZK2,777.96
List Price:  ZK3,889.25
You save:  ZK1,111.29
L478.81
List Price:  L670.35
You save:  L191.54
Kč2,418.25
List Price:  Kč3,385.65
You save:  Kč967.40
Ft39,800.47
List Price:  Ft55,722.25
You save:  Ft15,921.78
SEK kr1,103.66
List Price:  SEK kr1,545.17
You save:  SEK kr441.50
ARS$102,190.76
List Price:  ARS$143,071.15
You save:  ARS$40,880.39
Bs693.61
List Price:  Bs971.08
You save:  Bs277.47
COP$437,799.12
List Price:  COP$612,936.28
You save:  COP$175,137.16
₡50,480.33
List Price:  ₡70,674.48
You save:  ₡20,194.15
L2,548.03
List Price:  L3,567.35
You save:  L1,019.31
₲784,126.06
List Price:  ₲1,097,807.85
You save:  ₲313,681.79
$U4,460.41
List Price:  $U6,244.75
You save:  $U1,784.34
zł409.96
List Price:  zł573.96
You save:  zł164
Already have an account? Log In

Transcript

So far, you've learned about prototypal inheritance, which is a very powerful concept. However, it is quite different than inheritance that is used by many programming languages out there, and therefore it is not widely understood. And because of that attempts have been made in JavaScript to make it a bit more like those other languages. And so we have constructs that are added to the JavaScript language to do that. Function constructors happened to fall in that category. Now we've looked at constructors in the past.

For example, to create an array you can use new array or to create a JavaScript object you can use new object. The fact that new is used indicates that the following function is a constructor function. So we're going to look at user defined constructor functions. So far, we've only looked at constructors that exist within the JavaScript language, but you can create those as well. Now, the function that is used for a constructor doesn't look any different than regular functions that we've already talked about as far as the syntax is concerned. It's really the use of new when you call that function that changes things that makes it different.

Now, unlike regular function calls, when a constructor function is called, it passes a brand new object as the value of this and then you can use that function that constructor function to initialize that brand new object with certain properties. And then that function implicitly returns that object. So we don't have to use the return keyword, it automatically returns it. This all happens because we use the new keyword, not because anything is different about the function. All right, let's look at a quick, simple example. And then we'll look at a more complex one.

So I'm going to open the console. And I already have entered a simple function declaration. The keyword function car in an inside of parentheses, I have one parameter, because we're going to pass in the color. And then we use the keyword this that we introduced in this section. And this refers to that blank objects that is created when we call this function using the new keyword. And so it sets a property of that object color is equal to the color that we pass in.

Now notice something that is a bit different. And that is the name of the function, I have used an uppercase letter for the first character in that name. And that's simply a convention that's used in JavaScript. This indicates that this is a constructor function, and should be called with the new keyword. And that's an important convention. Because if this function were called without the new keyword, this would point to the global object, it would not point to the new object.

And so it would cause things to happen that you don't want to happen obviously, it would set a property which we could otherwise refer to as a variable on the global object. And so that could cause some unintended results. So therefore, we use an uppercase letter at the start of the function name. Now, remember, That's not required. It's simply a convention to remind us that this is meant to be a constructor function. So let me go ahead and press return.

And now let's create a new object from this function constructor. So I do that using I'm going to assign it to a variable. And I do that using the keyword new new car. I'm going to pass in a color and I can create another one car to new car. pass in a color. So we have two objects objects there.

And we can look at those very simple object now much to it right now. Okay, same with car two. So another way to create an object using constructor function now How do we work with the prototype of these objects? Well as simply I can add to the prototype of the car function, notice I use the uppercase, and let's just say I want all of these objects to have a property of wheels and set that equal to four. Now if we look at car one, and we look at the prototype, wills is a part of that. So with car one, we can return wills.

And with car two, we can return Will's Okay, so that's a quick example of how to use a constructor function. Basically, you're accomplishing the same thing that we've done in the previous movies. It's just syntactically different. It uses the new keyword, which those coming from other languages are more used to Alright, let's look at a more complex example. Just to help solidify this whole constructor function idea, so I'm going to open sublime. And in this example, let's say I've created a program that has questions that we're asking of students.

And I want to keep track of those questions. And so I'm going to do that with objects. That's my my idea. And so first, I've set up a what is going to be a constructor function, use the function keyword. Notice that capital Q, and its name is question, and then we're passing in three arguments. The weight of the question, that's how much the question is worth, the correct answer, and the learners answer, and then we're setting those to that blank object.

And then I'm also setting one more property based upon things I've passed in That's whether the question is correct or not. And I simply set that by checking to see if the correct answer converted to uppercase is equal to the learners answer converted to uppercase. And if it is we set correct to true otherwise correct his faults. And then I've added a method to the prototype of this. So question dot prototype, and this is to get the score. And so I define the function with a conditional if this correct.

So if that equals true, then we return this dot Wait, how much the question is worth. Otherwise we return zero. All right, so I've set those up. Now I'm going to paste in some more code to allow us to work with these this constructor function. So let me copy that. I'll walk through that code as well.

Now, I'm declaring some variables. So I've set this up. And now we want to start using this object to track questions. So I'm declaring some variables. One is an array of questions, I want to keep track of the questions in an array. It's going to be an array of objects.

And then I'm going to have a variable for final score and a variable for possible score right now they're set to zero. So here's the results of the question as the learners gone through the program. And as they've answered questions, I've pushed to the questions array, a new question object. So I use the new keyword, create a question object, pass in the weight, pass in the correct answer, pass in the learners answer. And I've done that five times. Then when they're all done answering the questions, I have these last few bits of code.

First, we use a fork loop to go through the array. Notice I let i equals zero, i less than questions dot length, and then I increment i. And as I go through the array, I access each question object. And from the question object, I use the get score function which was assigned to the prototype. And that should return the weight of the question or a zero depending on whether they got right or wrong. And I add that to the final score.

And then I do the same thing with the possible score, but this time, I simply get the weight of the object. So the possible score will be all the weights added together, the final score will only be the weights for the questions that were correct. And then I log out. One more turn here so you can see it a little bit easier. I log out what the final score is out of the possible score. And I'm doing that because of the numbers.

Text I typed in, I'm doing that with a template string literal. Which is, of course, yes, six. All right, let me save that. Let's go ahead and open this up, copy the file path and see what it returns for us. Open the console. The score was three out of five.

Now I sent this results to the console. But obviously, if you were working with a learner, you'd want to send those results to the browser. And so you would manipulate the elements on HTML page to display that, which is the type of thing we're going to be covering in the next section. Alright, so score was three out of five. So that gives you another example of how to use objects and how to use the prototype of objects. But we did it within the context this syntactical context of constructor functions.

All right, let's move on to the next topic.

Sign Up

Share

Share with friends, get 20% off
Invite your friends to LearnDesk learning marketplace. For each purchase they make, you get 20% off (upto $10) on your next purchase.