This Keyword - Functions

Question 1

What is the value of ‘this’ and why?:

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

Answer 1

GLOBAL/WINDOW

Because:
1. This is a STANDARD function.
2. The value of ‘this’ is set when the function is INVOKED..
3. The value of ‘this’ is set to the same value of ‘this’ defined in the lexical scope that it was invoked in.
4. In this case the lexical scope is the GLOBAL/WINDOW object.

Question 2

What is the value of ‘this’ and why?:

function testMe() {
((a, b) => {
console.log(this);
})(2, 3);
}
testMe();

Answer 2

GLOBAL/WINDOW

Because:
1. The outer function is a STANDARD function..
2. The value of ‘this’ is set when the function is INVOKED.
3. The value of ‘this’ is set to the same value of ‘this’ defined in the lexical scope that it was invoked in. In this case the lexical scope is the GLOBAL/WINDOW object.
4. The inner ARROW function inherits the value of ‘this’ from the execution context that it was DEFINED in.
5. The execution context (after invocation) of the outer function is GLOBAL/WINDOW therefore the value of ‘this’ inside the arrow function is GLOBAL/WINDOW.

Question 3

What is the value of ‘this’ and why?:

let me = function () {
console.log(this);
};
function testMe() {
me();
}
testMe();

Answer 3

GLOBAL/WINDOW

Because:
1. The outer function is a STANDARD function..
2. The value of ‘this’ is set when the function is INVOKED.
3. The value of ‘this’ is set to the same value of ‘this’ defined in the lexical scope that it was invoked in. In this case the lexical scope is the GLOBAL/WINDOW object.
4. The inner standard function inherits the value of ‘this’ from the execution context that it was invoked in.
5. The fact that it was defined outside in the global space makes no difference.
6. The value of ‘this’ is set to the same value of ‘this’ defined in the lexical scope that it was invoked in.
7. In this case the lexical scope is the GLOBAL/WINDOW object.

Question 4

What is the value of ‘this’ and why?:

function TestMe() {
this.arrow = “Yes”;
return () => {
console.log(this);
};
}
let newItem = new TestMe();
newItem();

Answer 4

TestMe

Because:
1. The outer function has a NEW constructor which creates user-defined object type AND sets the value of ‘this’ to the object.
2. The value of ‘this’ is set to the object.
3. The inner ARROW function inherits the value of ‘this’ from the execution context that it was DEFINED in.
4. Even though the arrow function is finally invoked on the window/global it was DEFINED in the TestMe object
5. Therefore the value of ‘this’ is the TestMe function/object

Question 5

What is the value of ‘this’ and why?:

function testMe() {
return function () {
console.log(this);
};
}
let newItem = new testMe();
newItem();

Answer 5

GLOBAL/WINDOW

Because:
1. The outer function has a NEW constructor which creates user-defined object type AND sets the value of ‘this’ to the object
2. The value of ‘this’ is set to the object.
3. The inner standard function inherits the value of ‘this’ from the execution context that it was INVOKED in.
4. The function is INVOKED in the GLOBAL/WINDOW
5. Therefore the value of ‘this’ is the TestMe GLOBAL/WINDOW

Question 6

What is the value of ‘this’ and why?:

function TestMe() {
this.arrow = “Yes”;
setTimeout(function () {
console.log(this);
}, 1000);
}
new TestMe(); // constructor

Answer 6

GLOBAL/WINDOW

Because:
1. The outer function has a NEW constructor which creates user-defined object type.
2. The value of ‘this’ is set to the object.
3. However the inner callback is a standard function.
4. The setTimeout function has a GLOBAL/WINDOW execution context.
4. The function will be INVOKED in the the setTimeout execution context and inherits the value of this which is GLOBAL/WINDOW

Question 7

What is the value of ‘this’ and why?:

function TestMe() {
this.arrow = “Yes”;
setTimeout(() => {
console.log(this);
}, 1000);
}
new TestMe(); // constructor

Answer 7

TestMe

1. The outer function has a NEW constructor which creates user-defined object type.
2. The value of ‘this’ is set to the object.
3. However the inner callback is an ARROW function.
4. The inner ARROW function inherits the value of ‘this’ from the execution context that it was DEFINED in.
5. Therefore the value of ‘this’ is the TestMe function/object

Question 8

What is the output and why?:

function User() {
this.name = “John Doe”;

this.sayUser = function () {
  console.log(this.name);

  function innerFunction() {
    console.log(this.name);
  }

  innerFunction();
}; } let name = new User(); name.sayUser();

Answer 8

John Doe
Undefined

1. The outer function has a NEW constructor which creates user-defined object type
2. The value of ‘this’ is set to the object.
3. The function is INVOKED on the User object (labelled name)
4. The value of this is the object and the name is a property on that object
5. Therefore John Doe is logged.
6. The inner function is NOT attached to the object, and is a global function.
7. The inner function is INVOKED and the this is set to the WINDOW/GLOBAL object
8. The global object does not have a name property therefore is UNDEFINED.

Question 9

What is the output and why?:

function User() {
this.name = “John Doe”;

this.sayUser = function () {
  console.log(this.name);

  let innerFunction = () => {
    console.log(this.name);
  };

  innerFunction();
}; } let name = new User(); name.sayUser();

Answer 9

John Doe
John Doe

1. The outer function has a NEW constructor which creates user-defined object type
2. The value of ‘this’ is set to the object.
3. The function is INVOKED on the User object (labelled name)
4. The value of this is the object and the name is a property on that object.
5. Therefore John Doe is logged.
6. The inner function is an ARROW function
7. The arrow function inherits the value of this from the containing object
8. this.name is defined inside the arrow function and therefore we get a second John Doe

Question 10

Set timeout without wrapper function.

Question 11

Where do arrow functions get the value of this?

Answer 11

From the enclosing lexical context. 

Question 12

const myObject = {
myMethod(items) {
console.log(this);
const callback = () => {
console.log(this);
};
items.forEach(callback);
}
};

myObject.myMethod([1, 2, 3]);