All language subtitles for 5- Objects

So you have seen all the primitive types

in JavaScript. Now let's look at the reference types.

In the reference types category, we have objects, arrays, and

functions. In this lecture we're going to explore objects, and you will

learn about arrays and functions later in this section. So,

what is an object. An object in JavaScript and other

programming languages is like an object in real life. Think of a

person. A person has name, age, address

and so on. These are the properties of a person.

You have the same concept in JavaScript. So when we're dealing

with multiple related variables, we can put these

variables inside of an object. For example, here we

have two variables name and age, they're highly

related, they are part of the representation of a person, so instead of

declaring two variables, we can declare the person object.

And then instead of referencing these two variables we can

just reference the person object, it makes our code cleaner.

So, let's see how we can declare a person object. We start with let.

Or const if we don't want to reassign the person

object, and set it to an object

literal. So the syntax we have here use curly braces is what we call

an object literal. Now

between these curly braces we add one or more key value

pairs. So, the keys are what we call the

properties of this object. In this case we want this person

object to have two properties or keys, name and age,

so, we add name here, that's the key, then we add

a colon, and after that we set the value

so Mosh. Now, we add a comma, and

add another key value pair. Age 30

so now we have this person object with two properties or two

key value pairs name and age. And with that we

don't need these two variables. Now let's

log person on the console.log,

person. Save the changes.

So here's our person object, again note the object literal syntax

so we have curly braces, and in between them we have

one or more key value pairs, and these are the properties of the person object.

Now, there are two ways to work with these

properties. Let's say we want to change the name of this person,

so we need to access the name property. There are two ways,

the first way is what we call the .notation.

So, we add the name of our object in the name of this person,

.now you can see it's properties, age, and

name. So you can change the name of to

John. Now we can choose the .notation

to also read the value of a property, so here

on line 10, instead of logging the person object we can log

it's name property. Save the changes, and

in the console we get John. The other way to

access a property is using bracket notation.

So, bracket notation.

So instead of . we use square brackets, and

we pass a string that determined the name of the target property

so single or double quotes, but single quotes are more

common. The name of the target property is name.

So, we can change that to let's say mary. Again

when reading that we can use the dot notation or the bracket notation.

If you save the changes, now we get mary on the console.

Now you might be asking, which approach is better?

Dot notation or bracket notation? Well as you can see,

dot notation is a bit more concise. It's shorter,

so that should be your default choice. However, bracket notation

has it's own uses, sometimes, you don't know the name of the

target property until the run time. For example, in our

user interface, the user might be selecting the name of the target property.

In that case, in the time of writing code, we don't

know what property we're going to access. That is going to be selected

at run time by the user. So we might have another variable somewhere else

like selection, that determines the name of

the target property that the user is selecting, and that

can change at run time. With this,

we can access that property using the bracket notation

in a dynamic way. So, we pass

selection here, and we get the same result. Now, if this

is confusing, don't worry, we're going to see this again in the future, as you gain more

experience with JavaScript. For now, just stick to the

dot notation, because that's cleaner and easier. Next we're going to look at

arrays.