JS 'this' keyword

Hello there folks and learners.

As you can see nowadays the world of web development and their community, expand rapidly. This phenomenon brings us closer,with
web technologies/programming languages that help us develop
real time web/native applications to make our lives simplier

Touroum - Touroum and i am ready to present you the world of JAVASCRIPT.
Okay, to be honest i will speak for something specific of it, that might
confuse the kick starters as well the intermediate developers even the oldest.The 'this' keyword.
If you already came across in conditions, that 'this' keyword may exist or you are maintenance someone's else code this post is for you.

So back to grill,let's roast our knowledge.!

JavaScript engine works in and out of the browser.
Let's stand in the browser for the beginning and have a better estimate about how this procedure works.

Before we will say where 'this' keyword refers to.
Lets see the procedure.
When we open a tab in a browser no matter which one,javascript engine create's excecution context.
Imagine it is like a wrapper that contains all the main states/functionalities that browser needs to run properly and give us back the data we would like to see with the human eye.

Excecution context its exactly what is sounds. It is a field like this one which i am writing the article and contains couple valuable things.Lets focus to the most important's of them.

So lets say we have a big box(Excecution Context) and inside of it
we have smaller boxes.
By name we can call them
1)Global Object

2)this;(Global.variable)

3)Outer Environment

4)And finally your code.

As you already know or if you don't, JavaScript is object oriented language and everything is created as an object (key/name-value) pairs

So if we say,

const Person = { name: 'Dimitris } ;

We have an object called Person with the

key = name 

and

value = Dimitris

, simple?

Yes all the JavaScript is based on this model above.

So the execution's context while is rendering(open new tab) for instance is creating the most important object the Global Object by the side of the browser this is the window object. If you run JavaScript out of browser as like Node.js(Runtime Env.) the Global object is another one but is still the first in the tree hierarchy.

If you open your dev tools in the browser and go to the console and just type window you will see a bunch of information all the object modules and methods that window object contains.

The call stack of JavaScript it has two ways of instances, the private(this is whatever is within a function such as variables the function scope if you prefer and the global scope.
To make it more clear see this two example below to take an idea. Let's say!
--Function(Function Scope)--

function Person(person) {
let person = this.person;
}

--Variable(Global Scope)--

let example = this;

Lets describe what we saw above. When we are using the 'this' keyword
inside in a function scope this refers to the owner of the function in our case is the Person it is exactly the same in methods and in more multi complex statements. Just keep in mind when you see 'this' inside in a function is pointing to the owner.
Above we created a variable with the name of example and we passed the keyword 'this' as a value.
So if you try in your console and type

window == example;

or even without the wrapped variable you can try both

window == this;

you will see that is true.
The Boolean comparison returns true value, because when we are use 'this' outside of the function scope we refer to the global object and in our case is the window object as we are talking about the browsers.

So keep in mind
-This keyword inside of a private scope(Functions/Methods/etc.) is
referring to the owner of it.
-This keyword outside of a private scope(Global Scope) is referring
to the global object(for browsers window object)

Try your Self
Press f12 -> console -> and type ->

this==window;

See the result!
Clear the console and try the next this.person==window
See the result!

Have a nice workday guys, in case for further explanation do not hesitate to contact me or find me in github or linkedin.
GitHub : https://github.com/feco2019
Linkedin : https://www.linkedin.com/in/dimitris-chitas-930285191/