So, recently while exploring JS concepts I came across this this keyword and it was a bouncer!

Disclaimer :- We are doing everything in non-strict mode

Let's dive deep into it:-

• GLOBAL EXECUTION CONTEXT :

this refers to the window object while in the global execution context.

  console.log(this);  // Window {0: global, window: Window,.........}

• FUNCTION CONTEXT :

  function sample ( ) {
        console.log(this);  
  }
  sample();     // Window {0: global, window: Window,.........}
  sample === window.sample;     // true
  

  As soon as you create the function sample() this is created for the function sample. Now the value of this depends on how that particular function is called. Here we are calling sample() function which is attached to window object therefore this refers to the window object.

Let's create our own object :-

const myObject={
count : 1,
sample : function(){
        console.log(this.count)
    }
}
myObject.sample();   //  1

Woah! We are able to access count's value inside a function where we didn't even declare it!!! No, it's not because of closures . It is because of our very own this. Here, this refers to myObject and when we do this.count it is exactly same as myObject.count.

This is it! Why did you waste our time for this small thing 😑😑😣! The fun begins now!

const myObject={
count : 1,
sample : () => {
        console.log(this.count)
    }
}
myObject.sample();

Output must be 1 ? Right? No, that's not the case here. sample has been changed to an Arrow function and arrow functions don't have their own this and this keyword represents the object that owns the function and not the one that calls it. But, where's the output!!???? Enough of ranting, give us the output.

Output will be :- undefined. Why?? Because this here refers to window object that doesn't contain any key named "count" , so it creates it and gives it a placeholder "undefined" as value.

Let's do some complex problems :- Abhi maza aayega na bhidu 🤣

I will write the explanation along with the execution, basically I will be the debugger;(iykyk) for you. ( SECRET-1)

const myObject={
count : 1,
sample :function() {
        return ()=>{
        console.log(this.count) // this here refers to the object that owns this arrow fn. and i.e. myObject 
    }}
}
myObject.sample()();  // SECRET-2

const myObject={
count : 1,
sample :function() {
        return ()=>{
             return ()=>{
                   return ()=>{
        console.log(this.count) // this will refer to the myObject no matter how many times you return using arrow fns. 
    }}}}
}
myObject.sample()()()();  // SECRET-3

const myObject={
count : 1,
sample :function() {
        return function(){
             return ()=>{
           console.log(this.count)  // Watch Carefully! Here, when first function is returned it is not an arrow fn. so when it executes ***this*** will point to the global object again.
    }}}
}
myObject.sample()()();  // SECRET-4

Secrets :-

1. Those who don't know you can write debugger; in console to direct yourself to the linewise execution steps for your code in the chrome's browser console. 😎
2. OUTPUT - 1
3. OUTPUT - 1
4. OUTPUT - UNDEFINED
5. Always remember how the function(not an arrow function) is being called to get the value of this.

That's it folks! Hope you would have understood this well. Do let me know if I can improve my blog by adding some more interesting examples. Until next time. 👋👋👋