Welcome back, welcome to another lecture, and today we're going to learn about objects, so objects
are the second data structure in JavaScript, but it can be also JavaScript type.
And this is very interesting.
So objects allows us to group values, including other objects to build more complex structures.
And there just more a little bit more advanced than arrays.
So objects are collection of properties.
Now, create new file here.
And before I just start explaining.
So creating a file collector seven link it in the index HMO.
Now what about the arrays?
So we w three schools.
So if you search for JavaScript array methods, there's a whole bunch of lists here.
So I didn't show you this page last time, but you should probably know that we three schools is a place
that you can learn a lot of things.
Now just make sure that you go through some of the methods here and practice them.
That's it.
So let's continue working E with the objects now.
Make a comment saying JavaScript objects that said, let's write our first JavaScript object in order
to understand what are what are the objects.
So var student equal to curly brackets name.
Let's put it here Toby.
Then we have age thirty three.
Then I'm going to say occupation.
Oops is going to be that that web developer.
Nice save this one.
So our object is called student in how we know its object.
Well, we have a curly brackets, and that's a very different from the arrays with arrays.
We have the other brackets.
Right.
So that is something that is very different from the arrays.
So the square brackets are different than this curly brackets.
Right.
And also in arrays, we have indexes in here.
We don't have indexes.
But what we do have here is property, name and value.
So this is called property name.
This is a value or you will read somewhere.
It's called key value pair.
And this is the key and this is the value.
So property name and holds a value of TARBY property.
Each holds a value of thirty three and occupation holds the value of that debt.
So that is the difference with the area.
We had index based structure and now we have here we have key value pairs structure.
Right.
So that is a little bit pretty much difference.
So how we can get the property from the objects is pretty much different to how we get the property
from Auris so we can access it with the name of the object with the student.
Then we need to use DOT in the name of the property.
So let's say I want to get the student name, how I can do this.
Well because of that lock.
And first let me grab the student to see what, what the object will look like if it is now we see that
its object and prototype its object.
We don't have to worry about this part at this stage.
So we have name, age, occupation.
That's pretty much it.
Now I want to access the name so I can do loops.
I can do consult that law student.
Now, in order to access the name, I will use DOT and the property name.
That's pretty much it.
Save it then I get Tommy.
Now, if you want to get the H, you do the same thing with H.
You do the same thing.
We occupation.
So this is how you are getting get the name age from student object, right?
Very good.
Now we know how to get the name, how to get the properties of the object.
Also, same as Deery, we can modify or add or remove properties from a specific object.
So let's add student I.D. here.
I want to have a student aid to this student objects how we can do this.
So student, I need to use student.
That's the name of my object.
Then I the ID and then I need to specify.
One, two, three, four, five, six.
Yep.
That's pretty much it.
Save it now.
Cancel that law student object.
Let's see if anything has changed.
Very good.
Now I have another property and a value.
So this is how I can add things inside the objects.
It's a little bit different than the race, but it's a very self explanatory.
So what do you think this will do?
So if I do student that age, but I already have H and I will set that one to twenty three.
Right.
Save it, cancel that log and say student again because I need to access to this one.
Now look what happened the ages there.
But the values change because it's already, we already have the property called H but we just set another
or we modify the value of thirty three with twenty three.
Now you know how to create a new property and how also you can modify the existing value of a property
that is pretty much it.
Now, the concept behind the data structures is very simple, and it's to keep things organized, so
objects are very good for storing data like the data we just created for this student or for users.
But it can be just for anything or just about anything that can be classified as a good example, what
objects can be.
Now, the power of objects they can is.
That they can also hold on the release of items, so let's create an array of items here and we'll be
logical here is to put these subjects.
So I'm just going to put here subjects as an array.
And inside this array, I will have a couple of strings.
Oops, sorry, so I will have calculous here.
Then I will have database's.
Then I will have C++ or Java programming, then I will have C++, then I will have cyber cyber security.
Then I will have Hoopes.
Then I have networking and that's enough.
That is pretty much cool now, even if you put a comma here at the end, it will not throw you an error.
And if you see this in your workplace or in order to Dorians online, then you should know that this
will not throw you an error, although we haven't specified anything down there.
Right.
OK, now how we can access these.
For example, I want these students to access to C++.
Well, let's go back in our browser and we will have now the subjects are.
So if I go to the student, only the subjects that will give me back the array that we just specify
before.
But I want to grab these C++ and I need to know it's what I d or its index.
Now, if you using Google Chrome, if you click on the arrow on your keyboard up arrow key and it will
bring the last executed command.
Now I need these brackets, square brackets and I need to only provide the number three or the index
in order to get the what the subject C++.
So this is how you can access the items within that.
This object are actually items within this array.
Right.
And this array belongs to the student object.
Very good.
Now let's put it back here.
So comes along and I'm going to.
Make sure that I just going to copy the same thing now, you're going to have it for your own so you
can review this one later on.
Now, here, I'm going to say get the.
Array item called C++ from.
Student object, very good.
Now, what I haven't told you last time, previous lectures is that I can also have an array.
And in that area, I can have a student object, so why I didn't tell you this?
Well, we have uncovered the objects and it was not logical to say that array can hold an object as
well.
So let me just show you how we can write that one.
So create I'm going to say var here and let's create a student array and this student array will have
three objects.
So how are we going to define an object with this curly brackets in every every student will have student
ID and every object will have a student ID and student subject count.
OK, now student ID it will be let's put them inside quotes so it will be string comma and subjects
count.
It will be what the subject count will be.
Let's put a number here.
Three.
OK, now next object.
We need to separate them by a comma because this is considered as a single item, right?
Because it's in memory.
That will be second item.
This will be the third item.
Let's put it here one.
Let's put here for let's change this one.
Add a couple of things here, and that's pretty much it.
Now, if you put a semicolon, there comes a log.
This entire area, you will see that we do have.
We do have array of length three, but we do have inside three objects and now I do see their indexes.
So how I will access these subject count for well, first I need to know the name of our array, so
I'm going to do it here again.
Right then in these square brackets, I'm going to define the index of this guy here that has four subjects.
Right, because we said that we I'm going to grab the subject come from that guy.
So, number one, it's in index one.
Now, I just want to get this subject count.
So that subject count in that is pretty much it.
Very good.
Now, let me counsel like this for you guys.
Put a semicolon there.
And this is to get whoops, get the subjects count of an object inside an array.
Nice.
So this is how we can define objects inside array.
And before that, this is how we can define array inside an object.
And it's a little bit different how we access them.
But it's pretty much self explanatory.
Right.
I also want to mention of functions that can be defined here inside an object.
Now the functions define an object.
They will be called methods so these student object can have access to its own methods.
Now let's create a method called pick and loops, and that will be a function, right?
Curly brackets.
And inside just comes a log paid.
An exclamation mark.
So that means that a student paid its own tuition fees right now, that is very good.
So student has access to its own method called paid.
And we are not going to call them functions because their methods of this student object.
So how we can access this?
Method, so student name actually the name of the student, right?
This is the student object that dot.
Eight, and because it's a function we need to use these this brackets, yeah, and if we have arguments,
we need to pass some arguments to save this one.
Go back to your browser.
And here it is.
We do have the page printed out for us.
Now, this leads us to something very interesting.
And I just want to discuss about another JavaScript that called now.
So this will be another JavaScript app that we're going to cover.
And we were not able to cover it until now, but it is called now.
So let's first talk about an empty object.
So last lecture, I show you that we can have an empty.
All right, well, let's create var.
Empty.
All right, that will be equal to.
So we just declare an initialised of the durry, but we not have any data inside.
So that is called Materi, an empty object.
And also the object can't be defined with this curly brackets.
Right.
Let's call the lock both of them now.
Empty object first.
Ordinary doesn't matter.
Let's do them in this order.
Console that.
Lock an empty object.
Oops.
Save it, go back to your and now you do have Lenkov zero and nothing inside of the object, so why
you will ask yourself what?
Why we need why we will need an empty objects or an empty array?
Well, imagine that we have a function that will take these two objects and it will fill them inside
the function.
So let's create a function called field function while you can create a better name for this one.
And inside I will say empty object that name.
So we'll give it the name to Rick.
No empty array.
Let's put push here, let's push an item inside the array and the item name will be James.
Nice.
So we need to call the function field function.
It doesn't take any parameters.
Again, we need to call the lock the both of the race.
So now they were empty before.
Now we create a function that will fill them.
So this function can do anything to them, can create can feel not just with name.
It can have like the student, like age or with the array.
We can push more items inside and we can save it.
Now we have array over one item.
Right, and its index is zero and we have an object with property name and value, Rick.
So that is how we can use these empty objects.
But now, see, sometimes we need an empty array and empty object to declare outside here.
That's why we declaring them outside.
The function, and this is called a global scope, but because we can access these objects anywhere,
even inside the function.
That's why we define them globally here.
If we define them, these two inside here to function, then we will not be able to access them outside
the field function.
Do you understand?
That's it's called that is why this is called global scope here.
Everything that we going to define globally, we can access them even inside the functions or outside
the functions, it will work.
So that is why we define them as an empty outside.
So on the other hand, this leads to a very interesting and unique JavaScript type called Now and so
let's set new object to null and.
This will be a new JavaScript app called Now and We're Here, we will say var no object and that will
be equal to now.
So we can set the object now and let's give an object and age.
So no object or just a name.
That name.
And it will be equal to Rick.
Save it and cancel that lock null object.
All right, so what do you expect to see?
They expect to see now null object feel with the value?
Well, this will throw us an error and it's a card type error.
Cannot set property name on.
No.
And why is this so now, objects returns, no value, the no value, the value now represents the intentional
absence of any object value.
It is one of the JavaScript primitive values, and it's treated as falsey for boolean operations.
And we will have use cases for this.
And it's hard to wrap your head around at this stage, but it will be OK.
We will handle this in the future.
But as you know, the value now represents the intentional absence of the object value.
So when we define something like this to be null, then we do it this intentionally, right?
OK, now we will define more we will create more meaningful examples of how we going to use.
No, don't worry about it in future.
But this is what now and this is another JavaScript type and you already see the empty one as cool.
You see that?
Let's go from top.
Now you know how to create an object with this curly bracket.
We have properties in names of the objects arrays.
We have indexes here.
We don't have it now.
We can access it by using DOT and the properties here.
Right.
Also, the students can have an array of items and we can access them.
Here like this.
And actually, that was not that was for the studio sorry, where we here it is, right.
Also, we can have a functions and the functions inside the objects are called method's.
Now, we discussed about the empty objects or empty arrays and how we can feel them inside a function.
And also we discuss about the no JavaScript type.
And that is pretty much it for this lecture.
Yeah, I'm sorry, it was super long, but I had to explain it because Java in JavaScript arrays and
objects are very, very important and you will see in future YMC very important because our next exercises
will be pretty much of with arrays and objects.
And yeah, you will see what we can do with them.
So stay safe and I will see you in the next one.
Now.