This lesson, we are going to be looking at JavaScript objects and how objects work within JavaScript
and they're very much like arrays, they give us the ability to hold multiple pieces of information.
There's an example over at the Mozilla developer network where they've got an object as a person and
then they build out the person's properties.
So person has a name, age, gender, interests, and then also with JavaScript objects.
And this is one that big difference between JSON and JavaScript objects within the JavaScript objects
we can run functions, but within JSON it's a strictly for data.
So we are going to be focusing on the data part of the JavaScript objects.
So let's open up the ED and we're going to construct our own JavaScript object.
So this is going to be a person and a person will have multiple properties.
They can have their first name and they can also have a last name.
So in order to construct an object, you use the colon to assign a value to the property.
So this is going to be the property.
And then each property can have a value with JavaScript objects.
You can also quote around the property and name and you don't have to within JSON.
You do need to use the double quotes around the property name.
So with there is also, again, that slight difference between the JavaScript objects and JSON where
you don't have to code around the property name, but you can also use property names that have spaces.
And in this case, you do need to code around it because with JavaScript it doesn't handle spaces for
the property names.
So whether you're creating a property name and if you are using one with spaces, then don't forget
to code around it.
And it's always good practice.
If you want to keep and work with JSON, then to construct your JavaScript object just as it would be
a valid adjacent item.
So let's set up a first name for this person and also it can have multiple values so it can also have
a last name for the person.
So set up a last name and you could do this for yourself as well.
So I'm just doing, as an example, setting up my name.
So first name, last name.
And then also we can see here within the example at the Mozilla developer network that there are interests.
So this is an array and this allows us to have a combination of an object with an array and then make
use of them together.
So let's go ahead and we're going to select also one called interests and arrays as well as objects
are are valid properties, values.
So you can have an array and an object within an object, an array within an object, an object within
an array.
And so word sofort and we are going to have multiple examples coming up.
So some of my interests might include JavaScript, of course, and I also might be interested in HTML.
So let me add in another item in there.
So HTML and then also let's go ahead and add in CSR for cascading style sheets.
So this constructs the object person and in order to see that within the console and the console is
a really nice way to output object information as well as array information so that you can really see
it output really nice and neatly.
I'm going to move the doc at the bottom and then let's open up the console and it's giving me an error
because it's not running the index files.
So let's stop the live server and then we'll open with the live server.
So it looked like the live server had stopped.
So now when I run the live server, the index file is running and we see the object information here
is being presented within the console.
So there's the first name.
There's the last name in the interests and the interests, just as we saw on the last lesson, because
this is an array, it can hold multiple pieces of information and then we can see them listed out.
And arrays always have the same properties.
So you can always get the length of the items contained within the array.
So we go ahead and create your own object.
So create first name, last name, some interests and you can include other property names.
You can possibly do here, do it at the end of the lesson, so a few other things before we conclude
this lesson about objects and that's assigning and returning back values are contained within the object.
So this particular object, the object name is person, and we're already liking it out into the console.
But if we want to get information that's contained within the person, we use the property names.
So if we want to get the first name, we could specify the first name.
And that's going to return back the associated value for first time with objects.
You can either use the DOT notation.
So that's the one that we're most familiar with doing with the person and dot first name.
And you can also use the bracket notation.
Now, oftentimes, if you are using more of a JSON type format, you might prefer to use the bracket
notation because it does provide Fleck's more flexibility within the property name.
So in this case, when we list out person, I can't say person space first name as this won't return
back anything that's going to return back an error.
So it is the property name, but because there's a space, it's throwing an error.
So if I do want to return back, I would use the bracket notation and then within the bracket notation
I can specify the property name of first name and then we get the right value being returned back.
Now, common practice is not to include the spaces, but this is just something that you can be aware
of.
And in addition to that, there's also what the bracket notation, you can make the values more flexible.
So let's say, for instance, we have a value of X one and I'll just equal X one to.
The word one and then X two will equal to the word two, so because we are using the bracket notation,
this provides us a more dynamic ability to interact with the values that are contained in there.
So let's set a value for X and set it at one and output into the console using the bracket notation.
So person and then bracket notation, we're going to output the value of X one and also making this
more dynamic, we're going to use the string value of X and then we're going to concatenate whatever
our current value of access.
So what do you think is going to be output here within the console log?
Let's refresh it and we'll check it out so it gets returned back the value of one.
So this what the bracket notation, it provides us some more dynamic capability of outputting content
that is contained within the object property names.
So even if we do something like X one plus plus.
So that's going to increment it by one.
And the current value of X here is going to be two.
So X string value plus X number value of two is going to return back X to and that's where we're able
to see X plus the value of X is going to be equal to that right property name.
So try it out and we are going to be looping through and making more complex objects in the upcoming
lesson challenge for this lesson, create an object, add some values into the object, use the bracket
notation as well as the dot notation to return back to the values of the object, add an array within
the object and return back to the values that are contained within the array.
Before you move on to the next lesson.