Hello and welcome back to learn more
JavaScript on the ServiceNow platform. Today we're going to be tackling a concept that often perplexes
new JavaScript developers. The “this” keyword! Understanding “this” is crucial
as it plays a pivotal role in the context of functions and objects. Let's unravel the mystery together. Remember all the lessons,
all the scripts that you're seeing can be found at devlink.sn/sn-js. Or in the description body,there's a link. All right,
so talking about “this”, “this” refers to the context
in which a function is executed. It's all about where the function lives,
not where it's called from. Let's kind of let's clear up something. Let's clear up the confusion
with some examples. Okay. So let's walk through this script
right here. So here I have an object
is being declared with a few properties. One of the properties is a string
called “Hello ServiceNow” and then the showValue property
is actually an entire function which is just displaying
the value of “this”. And so if I were to call that method
on the object, so myObject.showValue(), what we can see happens is hello, service
now gets printed. So let's walk through backwards
a little bit. showValue() is a method that is declared inside of this object and it is trying to display “this” value
and “this” is pertaining to itself. This whatever object
that it's in, the function that it's in. And so that function that it's in, that object
that it's in right now is myObject. It's saying, hey,
if there is a value property somewhere in this function or this object
that I'm in, that's what I'm going to use. And that's why it went back
and found a value within this object and printed out “Hello ServiceNow” okay. Now let's complicate just a little bit. Just just
so that you could see the differences when you're calling “this”, when it's no longer in the function’s
context, what will happen? this case,
instead of calling the method via the object that is already declared, I'm
instead creating a new variable and trying to assign that function that
exists in that object to my new variable. You'll see, here's my new variable,
and instead of calling my object show value, I'm actually storing this section of the object inside my new variable. Now, if I call my new function
that I just created and run the script,
it results in undefined. It doesn't know what
it was supposed to display. Now, let's let's walk back
a little bit and see why it's resulting in undefined over here. I created outside function
and set the function of this object to my new variable. But what if I were to just do this
and write it out and show you what's happening
when I set that new function, it kind of looks like this. So if this is the new object function
that I'm creating and it has no understanding
of the previous object, “this” no longer has a value property,
so it doesn't know it's a return. If I were to go in here and add maybe a property that's called value
and then it would work. But now it has no idea what this means
because within this new context there is no value property
and so it returns undefined. Really simple lesson,
but it's important to understand and learn a little bit about what
“this” means because you'll be seeing “this” appear
in a lot of different places inside ServiceNow, particularly inside
Script Includes, because Script Includes have a lot of functions
and they have a lot of nested functions. and you will be running into the keyword
“this” quite often, actually. And so now you know. Cool, see you soon.