In this lecture, we're going to talk about how to create objects in kind of a different way, you already
know a simple way, how to create an object.
I mean, to create them using either little notation or construct notation.
But when you deal with lots of similar objects or when you're JavaScript code or refers to object oriented
part, then you need something different.
You need to make your code more organized and sophisticated.
All right, let's open brackets.
The simple way to create objects is the following.
So create a couple of objects using literal notation, great variable person one which equals to an
empty object.
And now let's add some properties.
Person one that first name equals the John.
And then for someone, that last name equals to Smith.
Then copy this object and change slightly, change the name of object as person to and also the values
of properties.
First name and last name, right, Neek.
And that dough.
OK, so we have created two different but similar objects, because both of them represent persons and
they have the exact same properties with different values.
Now, let's suppose that we need to create tens of other similar objects like these persons.
Then using this way of creating object is really messy and hard, right, when it's something else.
One of the ways to solve this problem is to create a function which will be like a general model or
pattern and help us to create similar objects with similar properties and methods.
Let's see what I'm talking about.
Create function.
And call it creative person, then copy one of the objects, let's say the first one.
And inside function.
Instead of person one, I'm going to call it as a new person, because we're going to create a new object.
And also do it for the properties, right, new person instead of person one, and also change the values
of first name and last name, right.
As a first name, Bob, and then as last name, writes Brown.
Then after that, in order to get new object, we need to return a new person so.
Right, return a new person.
OK.
So we have created a new object using a regular function, and the only thing we have to do is to invoke
this function.
So right here, a variable person three.
And then call this function, so assign it as a value create person.
Then let's look at those objects in council, right, that look person one.
Then duplicated twice and changed person one into person two and three.
Reload the page, so you see that in Castle, we have the similar but different objects with the same
properties, first name and last name.
OK, using a function, we have just created a new object.
Nothing special happened.
Right?
So, no, I'm going to transform this function in a different way that will allow us to create multiple
similar objects dynamically on the flight so that we have to pass as parameters the properties first
name and last name and then instead the color Brice's we have to assign them instead of the particular
values.
So right inside the parentheses.
First name and last name.
Then, instead of the values, Bob and Brown write first name and last name.
Then below, where we call the function, we have just a pass as arguments the values for first name
and last name properties.
So right, Bob.
And Broon.
Let's add one more object here, create a variable person for.
And then again, call the function with different arguments.
For example, right, Mary?
And as a last name, right, James, and also look it in council as well, right?
Hello.
Council dialogue person for.
Reload and here we go, we have four similar objects with the same properties and with different values,
but the key point is that creating objects became much more easier.
We have a regular function as a general pattern, and it allows us to create as many objects as we want,
but in a simpler and more dynamic way.
I hope that it makes sense for you.
OK, now I'm going to talk about another way of creating objects dynamically, which is more sophisticated,
and also it needs less typing.
Let's consider what function constructor is.
The function constructor is used to create a function object, it allows us to construct objects dynamically.
OK, let's go back to our example.
At first, I'm just going to transform our function as a function constructor syntactically, and then
I will explain what exactly happens here at first.
Let's copy it and paste.
Then comments this regular function out.
Now, let's set the function name as person.
There is a special convention regarding the names of function constructors.
They are written with a capital letter and I will talk about it later.
Let's change the names below as well.
Right.
Person instead of tradespersons.
Also, let's get rid of these two lines.
And change new person into the special keyword, this.
And the last thing to do is to pass here before the function names new operator.
Which I hope you remember from the previous lectures.
All right.
So here we have a function constructor, and as it was in previous case, this function constructor
using new operator allows us to create new objects as well.
So if we reload the page, we will get objects first.
Two objects are created using literal notation and the rest of the objects are created using function
constructor.
And because of that, we see here before the objects, the word person.
All right, let's consider what a new operator actually does.
So the new operator creates brand new Apte object.
And in order to assign to it properties and methods, we use this keyword, which is actually variable
because of a new operator.
This variable represents new empty object.
If we miss the new operator, then this variable will represent global window object.
So if we remove new and then reload.
You see that we got undefined for the third person object, it's because without new operating, this
function works as a regular function and we get the undefined because we don't return any value inside
function.
That's right.
And cancel this.
So here we have a window object, if we drop down it, we will see that first name and also below last
name are attached to the global window object as properties.
And it's because that without new operator, this variable represents global window object.
All right, so if we compare this function constructed to previous regular function and the first case,
we have created new empty objects and then we have returned it.
But in this case, I mean, in case of a function constructor, you can imagine that JavaScript engine
using this new operator creates for you this variable as a new empty object.
And then.
Returns it.
Actually, literally, it doesn't happen in this way, but I think that it's a good reference in order
to imagine how function constructs actually works, make sense.
I hope that everything is clear for you, OK?
As you see the name or function constructor is represented with capital letters.
This is a special convention, for example.
It's used in order to prevent missing the new operator if we missed it.
And then when we would look at the code, the capital letter will remind that it is a function constructor.
OK.
This function constructor is created manually, but in JavaScript, we have built in function constructors
and some of them you already know, for example, new object, new date, new array.
And we also have new string and new number, all of these function constructors create new objects.
We know that strings and numbers are primitives, but regardless of that, using new string, our new
number function constructors, they can be transformed into string and no objects.
Let's go back to Brackett's and create string object using new string function constructor.
So write variable string object equals new string and instead the parentheses.
Let's pass hello and then check the value of string object variable and type of this variable as well.
Right to cancel that string object.
Then duplicate and pass here the type of operator.
Reload and you see that we have hello.
It looks like string, but it's actually an object.
So the primitive string value is created as an object and because of that, it's an object.
We are able to use multiple string methods like, for example, index of which we have used previously.
But as I remember when we have used the index of we did not transform string into object, in that case
went JavaScript engine found that primitive string value was followed by index of method.
It automatically transformed string into object on the fly.
Makes sense.
OK, I'm not going to waste time on that in the same way if we use new no function constructor with
numbers that will be created as no objects.
All right, I hope it makes sense, but anyway, if you have any trouble with function, construct a
concept or something is not clear.
I recommend to watch the video.
Let's go ahead.