Transcript of the tutorial.
TOP
So then we have this log blocks method right here.
And inside this method we want to log these different blocks to the console.
Now, in order to do that, we need to be able to inside this function, access this block property.
So how do we do that?
Well, we don't just simply say blocks.
That's not going to work.
In fact, it will cause an error.
So if I console dot log blocks and then invoke this by saying user dot log blocks like so save it and
preview, then we see blocks is not defined.
So this won't work.
So we need a way to access the blocks right here.
So how do we do that then?
Well, in order to do that, we need to use what's known as the this keyword.
So if we use this right here, it refers to this user object.
So now we can say this dot blocks like that to get the blocks.
Now what is the this keyword, the this keyword is a context object and it represents the context in
which the current code is executing.
So depending on where and how we use it, its value is going to be different.
If we use this inside the root of the document, then it's going to refer to the global context which
is called the window object.
Let me demo that one second, comment this out and then I'm going to console dot log this.
So this is the global context right here.
And the global object in JavaScript is known as the window object.
So that's what we get right here.
This window object.
Now if we console dot, log this inside this function right here, then we're going to get something
different.
So let me call this method again.
User dot log blocks.
And we see now this refers to the user object right here.
Okay, So what's happening here?
Well, when we call a method like this, JavaScript sets the value of the this keyword to be the object
the method was used on.
So in this case, the user object.
So inside this method now this would represent the user object.
So now we can access this dot blocks.
So let's save that and view it and we can see this dot blocks right here.
So now we have access to those.
What we could do is cycle through those blocks and output each one.
So I'm going to just comment this thing out.
And then beneath that I'm going to say console dot log.
And first of all, this user has written the following blocks and then underneath that I'm going to
use this dot blocks dot for each.
We can do that because this dot blocks is an array and for each is a method we can use on arrays.
And inside this method we need to pass a callback function and inside that callback function we take
the block as a parameter.
So this is an arrow function.
Remember one parameter.
So we don't need the parentheses and inside the curly braces we're just going to console dot log the
individual blog.
Okay.
So now if I call user dot log blogs, then this should work.
So we can see this user has written the following blogs and then we get those two right there.
Cool.
Now notice that I've used a regular function right here to define this function.
I've not used an arrow function and that was intentional because arrow functions work differently with
the this keyword.
So if this was an arrow function, then it wouldn't work.
When we use a normal function as a method and invoke that method, JavaScript sets the value of the
this keyword to the object that the method was used on.
Now inside the function, therefore we can use the this keyword to refer to the object itself when we
use an arrow function here instead to create the method.
And in fact I'll just change this to be an arrow function.
So parentheses, then arrow, then the code block JavaScript now will not set the value of the this
keyword to be the object when this is an arrow function.
When we use arrow functions, the value of this does not change from the value.
It was at the point in the code that the arrow function was invoked right here.
Now, in this case it was called a point when the value of this is the global window object.
So if we try to use this inside here, when it's an arrow function, it will be the same value, the
global window object.
And obviously we can't use a blogs property on the window object.
So let me just comment that out and console dot log this right here inside and this is now going to
be the window object because we used an arrow function and when we use an arrow function, JavaScript
does not change the value of this when.
When we use it on an object, it just takes what it currently is in the current context, which is the
window and passes that into the function.
So if we save this, we're going to see that this is the window in both cases now.
So in order to use this inside a method to refer to the actual object that the method is on, we need
to use a regular function and not an arrow function.
So let's change this back to a regular function and then this will work again.
So let me just uncomment all of this and save it.
And we can see now that this works again.
So this is fine.
And there is actually an easier way to write these functions as regular functions inside methods, and
that's just to take away the function keyword and take away the colon and just have our parentheses
directly after the property name.
And we can do that in each case like this.
And these are still regular functions.
They're not arrow functions, they're regular functions.
So we can still use this in them.
So going forward would make methods on an object.
I'm going to be using this kind of syntax regular functions, but a shorthand version and therefore
I can use this inside it.