Execution Context

Question 1

What is the global object?

Answer 1

JavaScript creates a global object when it starts running. It serves as theimplicit execution contextfor function invocations. In Node.js, the global object is the object namedglobal; in the browser, it’s thewindowobject. Global values such asInfinityandNaN, and global functions, such asisNaNandparseInt are properties of the global object.

Question 2

What happens if you don’t use var, const, or let?

Answer 2

whenever you assign a value to a variable without using thelet,const, orvarkeywords (we’ll discussvarlater), the variable gets added to the global object as a property.

foo = ‘bar’;
global.foo; // => ‘bar’ (in Node)
window.foo; // => ‘bar’ (in a browser)

Question 3

what happens if you don’t use var, const, or let in strict mode?

Answer 3

you get a reference error when assigning to the variable since it does not exist

Question 4

What is execution context? How is it determined?

Answer 4

The execution context is a concept that refers to theenvironmentin which a function executes. In JavaScript, it most commonly refers to the current value of thethiskeyword. The only factor that determines the context is how you call the function or method.

Question 5

What is the implicit execution context of a regular function call?

Answer 5

• Within a regular function call (e.g.,foo()), JavaScript sets the binding forthisto the global object.
  
  • (Remember: in Node, the global object is calledglobal; in a browser, it iswindow.)

Question 6

what is the implicit execution context of a regular function call in strict mode?

Answer 6

when strict mode is enabled, the implicitthisis assigned toundefinedinstead of the global object

Question 7

What is the implicit exception context if you invoke a function with parentheses?

Answer 7

when you invoke a function with parentheses, JavaScript uses the global object as the implicit context

Question 8

What is the implicit context when you call a function with ‘new’?

Answer 8

When you call a function withnew, its implicit context is the new object

Question 9

What is the implicit context for methods?

Answer 9

when you call a method that belongs to an object, the execution context inside that method call is the object used to call the method

Question 10

how do we supply an explicit execution context

Answer 10

With .call() or .apply()

Question 11

How do you use .call()?

Answer 11

function logNum() {
console.log(this.num);
}

let obj = {
num: 42
};

logNum.call(obj); // logs 42

Question 12

how do you use .call() on a method?

Answer 12

let obj1 = {
logNum() {
console.log(this.num);
}
};

let obj2 = {
num: 42
};

obj1.logNum.call(obj2); // logs 42

Question 13

how do you use call on a method that takes arguments?

Answer 13

someObject.someMethod.call(context, arg1, arg2, arg3, …)

Question 14

Whats the difference between call and apply?

Answer 14

The only difference is thatapplyuses an array to pass any arguments to the function:

someObject.someMethod.apply(context, [arg1, arg2, arg3, …])

Question 15

How do you hard bind a context to a function?

Answer 15

using .bind():
function sumNum(num1) {
return this.num + num1;
}

let obj = {
num: 42
};

let sumNum2 = sumNum.bind(obj);
sumNum2(5); // => 47

Question 16

What does bind return?

Answer 16

bindreturns a new function. The new function ispermanentlybound to the object passed asbind’s first argument.

Question 17

How do we end up loosing context? 3 ways

Answer 17

There are 3 main ways:
1. Method copied from an object. when you take a method out of an object and execute it as a function or as a method on another object, the function’s context is no longer the original object.

2. Inner Function Not Using the Surrounding Context.
   let obj = {
   a: ‘hello’,
   b: ‘world’,
   foo: function() {
   function bar() {
   console.log(this.a + ‘ ‘ + this.b);
   }bar();
   },
   };

obj.foo(); // => undefined undefined

3. Function as Argument Losing Surrounding Context.
   Passing a function as an argument to another function strips it of its execution context, which means the function argument gets invoked with the context set to the global object.

let obj = {
a: ‘hello’,
b: ‘world’,
foo: function() {
[1, 2, 3].forEach(function(number) {
console.log(String(number) + ‘ ‘ + this.a + ‘ ‘ + this.b);
});
},
};

obj.foo();

// => 1 undefined undefined
// => 2 undefined undefined
// => 3 undefined undefined

Question 18

What happens if you use call or apply on a function returned from .bind()?

Answer 18

nothing. the execution context is still the context provided by bind.

Question 19

How do we preserve context if we copy a method from an object?

let john = {
firstName: ‘John’,
lastName: ‘Doe’,
greetings() {
console.log(‘hello, ‘ + this.firstName + ‘ ‘ + this.lastName);
},
};

john.greetings(); // context is john
let foo = john.greetings; // Strips context
foo(); // context is now the global object

Answer 19

We can:
1. pass a separate context object to our function:
function repeatThreeTimes(func, context) {
func.call(context);
func.call(context);
func.call(context);
}

function foo() {
let john = {
firstName: ‘John’,
lastName: ‘Doe’,
greetings: function() {
console.log(‘hello, ‘ + this.firstName + ‘ ‘ + this.lastName);
},
};

repeatThreeTimes(john.greetings, john);
}

foo();

// hello, John Doe
// hello, John Doe
// hello, John Doe

2. We can hard bind the function:
   function repeatThreeTimes(func) {
   func();
   func();
   func();
   }

function foo() {
let john = {
firstName: ‘John’,
lastName: ‘Doe’,
greetings: function() {
console.log(‘hello, ‘ + this.firstName + ‘ ‘ + this.lastName);
},
};

repeatThreeTimes(john.greetings.bind(john));
}

foo();

// => hello, John Doe
// => hello, John Doe
// => hello, John Doe

Question 20

How do we preserve context if an inner function is not using the surrounding context?

let obj = {
a: ‘hello’,
b: ‘world’,
foo: function() {
function bar() {
console.log(this.a + ‘ ‘ + this.b);
}

bar();   }, };

obj.foo(); // => undefined undefined

Answer 20

We can:
1. Preserve Context with a Variable in Outer Scope:
ie let self = this
self.property

2. Call the inner function with explicit context:
   foo: function() {
   function bar() {
   console.log(this.a + ‘ ‘ + this.b);
   }bar.call(this);
   },
3. Use bind():
   foo: function() {
   let bar = function() {
   console.log(this.a + ‘ ‘ + this.b);
   }.bind(this);// some code
   bar();
   }
4. Using an Arrow Function
   foo: function() {
   let bar = () => {
   console.log(this.a + ‘ ‘ + this.b);
   }// some code
   bar();
   }

Question 21

How do we prevent context loss when using a function as an argument?

foo: function() {
[1, 2, 3].forEach(function(number) {
console.log(String(number) + ‘ ‘ + this.a + ‘ ‘ + this.b);
});
},
// => 1 undefined undefined
// => 2 undefined undefined
// => 3 undefined undefined

Answer 21

1. Preserve the Context with a Variable in Outer Scope:
   let self = this;
   [1, 2, 3].forEach(function(number) {
   console.log(String(number) + ‘ ‘ + self.a + ‘ ‘ + self.b);
   });
2. Use Bind()
   foo: function() {
   [1, 2, 3].forEach(function(number) {
   console.log(String(number) + ‘ ‘ + this.a + ‘ ‘ + this.b);
   }.bind(this));
   },
3. Use an arrow function:
   foo: function() {
   [1, 2, 3].forEach(number => {
   console.log(String(number) + ‘ ‘ + this.a + ‘ ‘ + this.b);
   });
   },
4. Use the optional thisArg argument:
   foo: function() {
   [1, 2, 3].forEach(function(number) {
   console.log(String(number) + ‘ ‘ + this.a + ‘ ‘ + this.b);
   }, this);
   },

Question 22

What does it mean that JavaScript has first-class functions?

Answer 22

• first-class functions that have the following characteristics:
  
  • You can add them to objects and execute them in the respective object’s context.
  • You can remove them from their objects, pass them around, and execute them in entirely different contexts.
  • They’re initially unbound but dynamically bound to a context object at execution time.

Question 23

What is the binding of arrow functions?

Answer 23

Arrow functions are always bound to the execution context of the enclosing function invocation. When defined at the top level, the context of an arrow function is the global object.