Jonas: Welcome back.
In this lecture I will give you an introduction to objects,
which is the single most important feature
of the JavaScript language.
So let's get started.
So, the arrays that we've been learning about
are very useful, and are, of course,
very much used in JavaScript programming.
But imagine that you wanted to access an element
of the array, not by its index, but by a specific name.
So, basically naming each of the values.
And with arrays, of course, you cannot do that,
but you can with objects.
So in objects, we define key value pairs,
which means that each value has a name
which is called the key.
So, in simple terms,
we can use objects to group together different variables
that belong together and that have no particular order.
Just like, for example, the properties of John
that we've been talking about in all these past lectures.
So, one fundamental difference between arrays and objects
is that in arrays, the order matters a lot,
while in objects it does not matter at all.
Okay, so let me actually show it to you,
how we can create an object.
So we start again by defining a variable.
And now the easiest way of creating a new object
is with the so called object literal,
which is basically just like a container
that we can fill with variables,
which are called properties.
So the object literal, we write it like this.
So, just curly braces.
Just like with arrays we have the brackets,
in objects you have the curly braces.
Okay?
And so now we can start defining, or key value pairs.
So, name, for example, it now John.
Or we can also say firstName,
just like we've been doing all this time,
so that we keep our naming consistent here.
So, here in this example, firstName is now a key,
and john is the value.
And so we call all of this here a key value pair.
We also say that firstName is a property of the john object.
Okay?
But a bit more on that later.
So for now, let's keep defining
a couple of key value pairs here,
so that I can show you then how we can access them
and also mutate them, just like I showed you in arrays.
Let's also define the last name.
So, Smith, and then just like in arrays,
as you've seen here,
we have to separate these different lines,
so these different key value pairs with a comma.
Okay?
So birthYear, and again 1990.
And you see that we can put all kinds
of different data types in here just like before.
We can even out arrays in here, so why not?
Let's define a family property,
and now we can put an array
in here saying the family members.
So let's say that some family members of John
are Jane, Mark, Bob, and Emily.
So, as you see inside the object
we can actually have other elements like these,
so we could even have an array.
We could even actually put another object
inside of the object, all right?
And actually the same is true for arrays,
so we didn't talk about that in the arrays lecture,
but as an array element, you can actually also have
an object or another array or really whatever you want.
All right?
And of course, you will see examples of all that
throughout the course, so don't worry.
This is really just the intersection.
We're gonna use all of this stuff a bit later.
So we can define a job.
And now also let's define
the married state just like before.
So we say false.
Okay?
And the last one has no comma or semicolon,
and that's it.
So that is our john object.
We can now, just to take a look at how it looks
in the console, just log it.
Okay, and so here we go.
So this is our object.
We can open it up and take a look
at the different properties.
So as I mentioned,
these are all the properties of the john object.
And so maybe now you are wondering
how we can actually access them.
And that's a good question.
And it's very easy.
All we have to do is to use the dot notation.
So, dot firstName, for example.
And the text editor already suggests
what name we can write here.
And so, let's try it out and here we go, John.
So all we have to do in order to read the value
of the key of firstName, is to use the dot.
Okay?
And so firstName is a property of john,
and we read it by using the dot notation.
All right?
So that's one of the ways in which we can do it,
but there's actually another one.
So, one is the dot notation,
and so let me now show you another one,
which is using the brackets.
So, just like retrieving an element from an array,
we can also use the brackets to retrieve
an element from the object,
but instead of using a number we use the key name.
Okay, and so let's say that we want the last name now.
And we didn't have to actually put it in quotes.
So basically we have to put a string here.
So, lastName.
And so now let's check it out.
And here we go with Smith.
Okay?
So this is here a string, remember.
And so actually, we can do even better,
not exactly better, but there's one thing that we can do,
for example, is that we can declare a variable.
And let's just call it x here for simplicity's sake,
and then let's call it the birthYear.
Okay, and so now in here, and this has to be
a string of course,
and now in here we can use that variable.
So we can say john x, and this x will then be birthYear.
And john birthYear will be 1990.
All right?
So let's try that.
And indeed it worked.
Okay?
And this small trick here can be useful sometimes,
and so that's why I showed it to you.
Okay, so keep that in mind.
Sometimes this might come in handy.
So this is how you retrieve data from an object.
And now we also want to mutate object,
so just like we did with arrays,
and it actually works in the exact same way.
All right, so what we can do now
is to say john.job, for example, and we can set it
to driver, or to designer actually.
Why not?
So all we have to do is to say john.job,
and then we can mutate the data, okay?
And then, of course, we can also do it the other way around.
So with the brackets notation, okay?
So then our quotes and is married.
And so let's set it to true now, okay?
So if you now log into the console,
then you will see that it should be different.
Here we go, and so well, here we go,
so John is now a designer and is married is now true, okay?
And so we can use the dot notation not only to access it
like we did before, like here,
but we can also do it to change the data,
to mutate some of these properties.
Okay, and the same here with the brackets notation.
All right, and now just to finish,
we had two different ways
of initializing a new array, right?
So to create a new array,
and the same happens with object.
So we can do an object for Jane.
And just like before, we can say, new object.
So in the array lecture we said new array,
and now we can say new object
in order to create a new empty object.
And now we can just fill it up with some data here:
jane.name,
jane.birthYear,
and just one more.
So Jane, and this time I'm going to use the brackets again,
and so we can say now lastName also.
Okay, this one let's call firstName.
And now we can log into the console.
Okay, so just so you see
that it's going to work in the exact same name.
And here we have an error,
so you see lastName is not defined,
and that's because it's not a string, which it should be.
So let's try that again.
And so, it looks exact same way as before.
So again, it works just like the object literal.
Let's actually write that down here.
So object literal is a way of defining objects
using this syntax here, so just with the curly braces.
And then down here we have the new object syntax.
Okay, so that's the very basics of objects and properties.
So, in this lecture we talked about properties,
and the next one, we are going to talk about methods,
which is also something very important related to objects.
So stay tuned for that one.