>> Hello. My name is
Nitya Narasimhan and I'm a Senior Cloud Advocate at Microsoft.
Today I want to talk to you about JavaScript objects.
In fact, I have just six things to tell you.
Let's get started. First, what are objects?
You encounter a lot of objects in the real world.
You have books that are in libraries,
you have songs that live in playlists.
Each one of these has two different things that
make them useful to us.
First, they have attributes,
data that describe them.
So a book has a title, an author,
and maybe if it's in a library,
it has a status that tells you whether it's available or not.
Similarly, they have actions you can take on them.
You can check in or check out a book from the library.
JavaScript objects are a way for you to
represent these real-world objects in code.
Rather than attributes, we refer to them
as JavaScript object properties.
Properties are effectively those attributes
that describe that object.
In this case, in green,
this particular object called book has three properties.
It has a title, an author,
and a flag; a status flag that tells you if it's available.
Objects also have methods similar to the actions we talked about.
In this case, in red,
you see that this object has two methods,
check-in and check-out, which effectively
manipulate the value associated with the availability status.
The one thing you can take away from objects looking at
this definition is that
properties are simply variables associated with the object,
and methods are simply functions associated with that object.
Next, let's think about the object syntax and its creation.
In the example I've been using so far, this form,
where we've created an object by simply using
the curly braces and enclosing
a series of name value pairs separated by commas,
that particular form is known as an object literal
because you're creating and
defining it at the same time, in the same statement.
But what exactly is an object?
An object is nothing more than
an unordered collection of name value pairs.
In this case, those name value pairs
consists of the properties of the object,
as well as the methods,
properties in green when you saw them before and methods in red.
The object literal, which you see
here is the easiest way for you to create an object.
Simply open the curly braces,
list out all the properties and methods of your object,
close curly braces, and you've declared yourself a new object.
The other way you can create objects is by using what's
called constructors and the new keyword.
An object constructor is,
you can think of it almost as
a template or a blueprint for an object.
It tells you what that should look like.
But that's just a definition.
In order for you to actually create an instance of that template,
you use the keyword new,
which effectively stamps out one example and fills it with data.
In this particular case,
we're using the base template called object.
You can create yourself an instance of
any object by basically saying,
in this case, book equals new object.
Now you've stamped yourself an instance of that vanilla object,
and you can now associate it with
your custom properties and
methods exactly as shown in the example here.
One thing you need to take away from this is
we've had two different ways for you to create objects,
but once created they're going to behave exactly the same.
So pick your path.
When starting out, you might find literals very easy to use.
But as you scale up,
constructors have a lot of great properties that are going to make
it easier for you to do things like inheritance.
We're not going to cover things like function constructors
and prototypes in this particular module,
but if you're curious, go check those up.
Great. We've created this object,
but chances are you want to use those properties,
or invoke those methods.
How do we do that? Let's start first by talking about properties.
Properties are basically the attributes of the object,
if you will, they have immutable names and mutable values.
What that means is once you've assigned properties to an object,
you can't change the name.
You can remove the property,
but you can't go and alter the existing property name.
However, you can alter its values.
You can do that using one of two different notations.
You can access and modify them.
To access a property,
approach number 1 is to use what's called the dot notation.
If you're familiar with namespaces,
this format is actually likely familiar to you.
It's object.name. In this particular case,
if I say book.title,
I'm effectively going to get back the value
associated with that property, which is 1984.
I can also say book.title
equals and give it a new value if I want to,
which would effectively change the title of that book.
The second notation, which
sometimes is harder for people to wrap their heads around,
is known as the bracket notation.
It's easier to remember if you think of the fact that
properties are effectively like hashmaps,
they are a key and a value.
With the bracket notation using object, name,
brackets, property name as
the key which in turn will go and fetch back the value.
In this case, I can say book, square brackets, title,
and note that the title is in quotes, [inaudible] 1984.
Makes sense? Hopefully. Remember we also talked about methods.
Methods are simply special properties
whose type happens to be that of functions,
in other words, a method is
simply a function definition associated with that object.
If you look at the two examples here in red,
check in and check out, because methods are special properties,
you can access the method definition exactly
the same way using
either the documentation or the bracket notation.
So book.checkIn will return you the function object.
Book, square brackets check-in will also
return you the function object
associated with the definition of check in.
That's about getting access to
the function definition or object itself.
What if you want to use it?
Well, you invoke it just like
any other function using regular standard parentheses.
In this case, book.checkIn, open brackets,
close brackets will actually execute the code inside
that function setting that is available property to true.
Note that I can use either one of those notations.
I can actually use the bracket notation as well.
Simply use the same way to access the function or method,
and then curl brackets on it to invoke it. Sounds easy?
I hope so. Last but not least,
this is actually one of the most
complex at the same time most powerful concepts that you'll learn.
If you remember looking at those method definitions,
you might have seen an interesting keyword called this.
I've replicated part of that function definition
here and changed it slightly so we can talk about it.
In the function check in,
I don't see is available equals true,
I see this.is available equals true. What is this?
This is really a keyword that
sets the runtime context for the function.
It's a way for the function to be able to get access to
other data or functions in its runtime scope.
When we're thinking of methods which are
functions associated with an object,
a method might want to look at other peer property values.
If you think of standalone functions,
a standalone function might want to prefer
some global context data that's available in that runtime,
this keyword lets you do that.
The interesting thing is this is bound to
a different object at runtime based on context.
If you are using a method,
this by default is bound to
the object that represents the owner of that method.
In this case, if I use this, it'll return book.
But if I'm looking at a standalone function,
it maps towards something called the global object,
it's an object that represents the global runtime.
We'll talk about that in just a second.
There are some caveats though,
if you apply strict mode,
that unless you've explicitly set the value of this,
it'll turn out to be undefined.
More importantly, we're not going to cover it in this module,
but there are ways for you to actually specifically
or explicitly tell the function what
this object is by using methods or by using functions like apply.
Look those up if you're interested.
But I'm going to stop with
just one final thing about the global object.
Remember I told you that if you are a stand-alone function,
this will refer to a global object.
Well, it turns out that if you're using JavaScript in the browser,
that global object is the window.
But if you using it in node,
it references an object literally called Global,
that represents the global runtime.
It allows you to associate properties or methods with
a global object and have them be accessed by
other functions in that scope.
Because the global object refers to different things,
whether you're in the browser or in node,
there is actually a convenience,
a keyword called globalThis that you can use in your code that
automatically maps to the right global object
without having you have to change your code.
Hope that was useful. With that,
that was our superfast introduction to JavaScript objects.
Six things that you hopefully learnt: What are objects?
What is the syntax of an object?
How do you create them either as literals or from constructors?
What are properties and how do you access them?
What are methods and how do you invoke them?
Finally, what is "this"?
Hope you had fun. See you at the next module.