Basic query on passing this to a function

Question

I am trying to understand JavaScript this better.

function foo() {
    console.log(this);
}
// normal function call
foo(); // `this` will refer to `window`


        

Answer 1

this refers to the current context of execution in Javascript. This context is something that Javascript keeps to itself and it is readonly. You can only read the variables available in that context. You cannot override it. When you do something like this:

function foo(this){
    console.log(this);
}
foo();

with the parameter this in the function, you are trying to overwrite the current context which is not allowed and hence you get the error.

And, when you run this code:

var that = this;
function foo(that){
    console.log(that):
}
foo();

you are not passing any parameter while calling the foo function and hence the value of that is undefined. Note that the earlier assignment of this to that is overwritten in this foo function context.

Refer this link and this to know more about execution context.

Answer 2

this context in JavaScript depends on how the function is being called. See What does "this" mean?.

1. this will refer to window

   function foo() {
       console.log(this);
   }
   foo();
   

   Here, foo is globally defined function and the call to foo() is like window.foo(), Thus this inside foo() refers to the window object.

2. Uncaught SyntaxError: Unexpected token this(…) on chrome console.

   function foo(this) {
       console.log(this);
   }
   foo();
   

   this is reserved keyword and cannot be used as identifier name. Also note that no parameter is passed to foo() when invoking the function.

3. undefined is logged in below code

   var that = this; // Global that
   
   function foo(that) { // Parameter `that`
       console.log(that); // <-- Use semicolon here
   }
   foo(); // `that` is not passed.
   

   because that passed as parameter overshadows the global that. And as nothing is passed to foo(), undefined is logged.

Answer 3

 var that = this;
 function foo(that){
   console.log(that):
 }
 foo();

foo() parameter is missing.

so function foo(that) will be undefined.

To make it work

 foo(that)

Answer 4

function foo(this) {
    console.log(this);
}
foo(); //Uncaught SyntaxError: Unexpected token this(…) on chrome console.

In this case, the value of this is not set by the call. Since the code is not in strict mode, the value of this must always be an object so it defaults to the global object.

function foo(this) {
    console.log(this);
}
foo(); //Uncaught SyntaxError: Unexpected token this(…) on chrome console.

In this case, define a foo function with parameters and then call this without any value. Inside the function, the value of this is not set by the call. Since the code is not in strict mode, the value of this must always be an object so it defaults to the global object.

var that = this;
function foo(that){
    console.log(that); //<-here is semicolon ';'
}
foo();  // undefined chrome console.

If you understand two cases mentioned above may understand what happens here. For more information Please take a look: mdn-js-this