Objects. They are really powerful data structures.
And as you can see it's the second data structure that we're going to learn in Javascript.
And as a matter of fact they are also a javascript type. Objects are collections of property. Well what
does that mean?
Let's take a look by trying to write an object.
So to write an object I can have something like a user and curly brackets and within this we can say
name equals "John".
I can say H is "34".
Hobby is "soccer".
And maybe we can even put "is married"
to false and the comma at
the end here I can leave it off or add it,
it works both ways.
But now if I save this and refresh - let's see if we have the user object. Yep.
Looks like we have "name: John age: 34 hobby: soccer is married: false".
And you see over here that we have an object and it looks a little bit different from an array doesn't it?
Because if we remember an array looked like this, "apple", "banana", "orange".
So - an array if we refresh we have 'user' that looks like this and a 'list' that looks like this.
If I open this up we see that we have a bit of a difference because an object is more dynamic
I can have properties and value.
So property 'name', value "John", property, 'age', value "34". With an array we had an index '0' which held "apple"
and an index '1' which held "banana".
Hmm interesting.
OK.
But how do I grab properties because with an array I could do 'list', grab the second element with '1'
and I got a "banana". What with objects what you can do is you can say 'user.name',
John. 'User.age', 34. 'User.hobby', soccer. And 'user.isMarried', false. OK.
Now with an array we had methods like 'pop' or 'push' to change the array.
We even had 'concat'.
How can we add properties to an object? Well it's very simple.
All we have to do is say something like 'user.favoriteFood' and I'll do equals and I'll do spinach.
Now if I look at the user object I have favorite food,
spinach.
So we've just expanded the user object.
What about this -
Can I change to 'isMarried' to "true" to say our friend John over here just got married.
Well, now if I go to user I have 'isMarried' to "true".
Very cool.
So you see the difference there between an array and an object.
Now one question you might be having is, "Why isn't 'array' a javascript type but 'object' is? Well because
in simplified terms technically an array is just something like this.
We even saw it when we looked at the list that we have "0" goes to Apple.
"1" equals to banana and "2" equals to orange. And you see what the power of data structures are
in javascript.
That idea of a desk drawer and in that drawer you don't want to have a mess you don't want to just put
one thing, you want to have multiple things but you want them organized. So maybe you want the pens all
organized in a section and the files organized in a different section.
And as I mentioned data structures help us organize things better.
So for example an array is really really good at maybe containing a shopping list or a To Do list.
But an object might be really really good at containing something like user information.
So if you think of a game - let's say you're building a game where you're controlling this wizard.
Well this wizard - how tall the wizard is, how powerful it is, how many experience points it has.
Well that would be really really good to put in an object because that wizard is an object.
We need properties and values but maybe the spells that could be a list because we can just have a string
of all the spells that the wizard would know.
So does it mean that we can have arrays inside of objects?
Yeah if the user was a wizard I can put 'spell' or 'spells' and I can do an array of all the spells
"abracadabra" or "Shazam" or I can do "boo".
So now I have an array inside a user.
OK what about the other way around.
Can I have a user inside of an array?
Well, yeah you can.
Let's say we wanted to have a list of users over an app for our website. We can have a list of objects
where we have 'username'
"Andy" who has 'password', "secret" and we can have
'username', "Jess" that has the 'password' "123". Let's see this in action.
I'm going to refresh and say 'list' and look at that. Within this list I have the first item with the
username and password.
And the second item username and password. So lists are really really good at
well, making lists and those are arrays. And objects are really really good at containing objects. But
how do we access them now?
Well let's look at the user first.
If I wanted to access a spell well I could do 'user.spells' and I'll get an array back but if I wanted
to - let's say access "Shahzam"
Well I would just do 'user.spells' and then because it's an array
I get the second item by using '[1]' - "Shahzam". The other way around for the list I can say 'list' - the first
item which is "Andy" and I want to get his password.
Well I'll do 'password'.
And now I get - well Andy misspelled his password, it's supposed to say "secret".
But we get "secre".
So that's how you access things.
OK.
One other question that I have.
What if I wanted to say that this user John who's a wizard also can 'shout'. Maybe it can do some sort
of an action.
Can we add a function to an object?
Yeah we can, all we have to do is do 'function'
And you see the color changed, means we're doing something right.
I can say 'function console.log'
Shouting "Ah" let's save that and let's see that in action.
'User' - make sure that we have the shout there yeah
And look it has the "F" for 'function'.
And now if I go 'user.shout' and remember I have to call the function.
I get "AHHHHH!". Very cool. So I can have functions inside objects.
And one thing you might notice is - hold on a second, I thought functions were supposed to say something
like, you know, alert.
But this one we have 'user.shout'.
So this is a little bit different than what we've seen before and this is actually called a method and
this is another terminology that we're going to learn.
But a function inside an object is a 'method'.
So I can say that 'shout' is a 'method' of 'user'.
Just like with an array like lists and if I do 'pop' - well 'pop' is a 'method' of 'list'.
And another thing that you might have realize is 'console.log'.
What do you think
'log' is that we've been doing all this time? Well, 'console' as it turns out is just an object.
Do you see that? 'console' has all these looks like method on it.
So this entire time we've just been doing console.log.
But I can also do - let's do 'info'. If I do console.info and I'll say "hello".
I get "hello"
Nothing changes.
But what if we do something like 'error'.
Well I can do 'console.error' and now - look at that, I get the error.
So that's what methods are. They're functions inside an object.
OK I have one last cool thing to show you and that is, "Can I do something like this?
Can a user be an empty object?" Yep it works.
So if I get 'user2' I just get the empty object and there's nothing really in it.
OK.
What about arrays?
Can I do a list that is empty?
Yep I can do a list that is empty.
But as you can see I can't really use any properties in 'user2' because it has no properties.
And I can't really access 'list[0]' or 'list2[0]', which is the empty one,
Well because there's nothing in it right now.
So this reminds us of when we don't declare a variable we get "undefined" but with an object and a list
we can have something empty and it's not undefined. But there is one thing I want to show you.
There can be an empty object.
So if I do 'var' empty object, well it's an empty object but there is something called 'null'.
And that is our sixth datatype and 'null' is a special type that just says that an object is null.
So let's see what that means.
If I look at empty object I get an empty object.
If I get a 'null' object it returns null.
So this is a special character that we'll get into later on in the lessons but it just means that there
is nothing in this object.
If I go 'null0bj.name = Andy'
I can't set property name of null.
But if I do that for an empty object which is just an empty object, well I can say the name
equals Andy
And look I have Andy.
So that's what a 'null' object is
It is empty, completely empty and well right now it kind of looks useless like we don't need it.
But I'll show you cases where this is important for us.
OK that was a whole lot of stuff.
But you've actually learnt so much in javascript.
This is pretty much I would say 80 percent of what you need to know in javascript to work professionally
and it sounds like we didn't cover that much or maybe to some it may feel like we covered a lot.
But in terms of syntax just looking at this we've only learned a few words and a few ways of doing things.
With this newfound power I'm going to show you how we can build a simple Facebook with what we just
learned.
I'll see you in the next video. Bye-bye