Welcome back.
So in the last few videos we've been talking about javascript arrays which are the first data structure
that we've talked about in the next few videos.
We're going to introduce a nother data structure called the object.
So we have two main objectives just like we did with arrays.
We first want to understand what objects are why we use them.
How do they compare to an array.
And then the second objective is how do we write some code using javascript objects.
Let's go ahead and get started.
So here's a hypothetical situation.
Suppose that I wanted to model a single person in javascript's.
Each person has a name and age and a city.
So there's a lot of ways I could do that I could have three different variables name age and city but
then they're not related to one another.
They're totally separate.
So if I wanted to connect them I could use an array like I'm doing here var person is equal to array
where the first item is name Cindy.
The second item is age 32 and the last item is Missoula or the city.
This is not really a great use of an array because this data is not really a list.
Yes we can force it into an array but it doesn't lend itself to the format of an array where we have
lists that often have a logical order.
There really isn't a logical order here to access the city out of this array.
I would need to write person bracket too.
And that requires me to know that the city is at index too.
So if I accidentally reverse the order and I had Traviss the name upfront index 0 but then I mix these
two up.
So I had at index 1 city an age at index 2.
Then if I tried to access person to bracket 2 I would get age instead of city.
So this is all just to show that an array is not the perfect solution for every situation.
There is much better data structure for us to use here which is the javascript object.
You can see an example down here of how we would take the person array with name age and city and turn
it into a javascript object.
The first thing you should notice is that we have curly braces rather than square brackets for an array
.
The next important piece is that every item in this object is a key value pair.
So we have a property Colan value name is.
Age is 32 city is Missoula.
This slide shows the exact same thing.
We have a different person object var person equals curly braces and inside that we're setting name
to be Travis age to be 21 in-city to be L.A. down here we have a simple diagram of what this data structure
looks like.
We have three different slots in this object and it's really important to note that objects don't have
any built in order unlike an array where there's a first item and a second item and a third item.
Think of the items instead of a given object as just floating around inside if there there isn't an
order.
No property comes first or second it doesn't matter how I declared them in what order they're all treated
the same.
So this diagram shows them in an order but that's just because I had to pick an order.
So you can see Travis is stored under the key name.
21 is stored under the key age.
And L.A. is stored under the key city to retrieve data out of an object.
We have two choices.
We can either use the name of the object person square brackets and then the name of the key.
So in this case I'm getting Travis out of the person object.
So I right person square brackets name in quotes.
So that's very similar to arrays.
The only difference is that this is not a number.
This is a string.
The other option is to use dot notation dot notation is a little bit shorter and simpler.
Right Person dot name and name has to match obviously the name of the key and that will also give us
Travis.
I'm going to go ahead and demonstrate that in the con..
I'm going to make a new object called dog and my dog is going to have a property name as always.
Rusty He is the best dog and half breed.
He's a mutt Lassally age and he is three.
So that gives me my object dog.
And if we look at it in the console you can see it tells me it's an object.
Your name is resti breed as mud ages 3.
So if I want to access his age out of the dog object I can do the first intact dog and then in quotes
age they get three or I can do dog dot age and I also get three.
It's up to you to use either one.
I prefer to use dog dog age because it's shorter.
You don't have to use the quotes.
You don't need double brackets on either side.
You just need it.
But there are a few differences on this slide.
I demonstrate three of the main differences.
So you can not use dot notation if the property starts with a number.
So you can see that here some object at DOT one blah is not valid.
But if I had a property called One blah I would have to use square brackets and put it in quotes and
that's just the way that it's set up in javascript.
I'm going to jump down to the third example here which is that you can't use dot notation if your property
name has a space in it like fav color.
Obviously this it doesn't work.
Javascript thinks that we're accessing dot fav So if we want a property with the space which is not
really a good practice anyway but if we did we would need to use quotes.
Fav.
Space color using square bracket notation.
And then the middle example shows that you can look up things using a variable.
If you use bracket notation.
So if I have a variable here called string or as TR And it's equal to name in quotes if I try and do
some object as TR It will just look for the property as TR But if I do some object square bracket as
TR It's going to evaluate as TR which gives us name in quotes.
So this will then look up the name property in some object.
So this is something we actually will see occasionally.
So it's worth knowing the difference here.
You can use square bracket notation using a variable name to look up a property.
The next thing that we want to do is be able to update data inside of an object.
So it's very similar to arrays where we access the data and then reassign it with an equal sign.
So here you can see we have our same person object name as Travis age is 21 city is L.A. If I want to
add one to Traviss age it's his birthday.
All I need to do is access person age.
I can use square brackets or the dot notation and then re-assigning.
So person age plus equals 1.
So that will add one person that age is now 22 or I can use person dot city and reassign that to be
London.
So person up city equals London will now set person to have city of London.
So just to demonstrate that.
Let's go back to our dog object which has name as Rusty breeders mutt.
Age is three.
Rusty just had a birthday so I'm going to change his age dog.
Age equals and I could either do this equals four which is just going to make it four no matter what
and I can look at dog.
Or I could do dog.
Age plus equals one which will just add one to the existing age and that gives us five.
I'll also demonstrate doing that with the square bracket notation.
Let's say that I want to change Rusty's name to be his nickname Tater.
I would write dog square bracket name and that just gives me resti and then I'll reassign it to be Tator
.
And if you look at dog we now have named Tator freed at age 5.
There are a few different ways of initialising objects just like we saw with a race so we can either
make an empty object first like we have here.
Var person equals empty curly braces and then we can add the data after the fact.
One piece at a time.
Person name is Travis person that age 21 person that city is L.A. we can do it all at once which is
what we've seen so far is called object literal notation.
So far person equals and then inside the curly braces I just write my property's name Travis age call
and 21 city Colan L.A. and the last way which you won't see very often until much later in javascript
.
He said I can use the new object which is a function just like a new array that will make us a new object
and return it to us as an empty object.
And then I can add person name person not age in person city.
So you'll definitely see this syntax and this syntax much more often for now.
Another point I'd like to make about objects is that just like arrays they can hold any sort of data
.
So our data can be numbers or strings or booleans an array even another object as you can see here.
Just like arrays we can mix and match as much as we'd like.
So we're going to stop here for now in the next video we're going to do a comparison between objects
and erase syntax