this keyword further use-case

Author: rohan-paul

Javascript/Prototypal-Inheritence/ES6-Function-definition-With-Class.js

@@ -32,3 +32,7 @@ var w1 = new Worker("Paul");
 
 p1.hello(); // => Hello Rohan you are a person
 w1.hello(); // => Hello Paul you are a Developer
+
+/*
+In line 19, the super keyword is used as a “function” which calls the parent class Person with the parameters passed to Worker. This is a key step to be carried out in order to make sure that Worker is an instance of Person.
+*/

Javascript/js-basics/call-apply-bind-this-keyword.js

@@ -1,12 +1,37 @@
-let obj1 = { name: "Rohan" }
+// ***********************EXAMPLE - 1 **************************************//
+/* First note the definition of 'this' - By the official doc (https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/this) - 'this' is just The JavaScript context object in which the current code is executing. In the global execution context (outside of any function), this refers to the global object whether in strict mode or not.
 
-const greeting = function (a, b) {
-  return `welcome ${this.name} to ${a}, ${b}`
+In the global execution context (outside of any function), this refers to the global object whether in strict mode or not.
+ */
+
+/* Where a function uses the this keyword in its body, its value can be bound to a particular object in the call using the call() or apply() methods which all functions inherit from Function.prototype. */
+
+function add(c, d) {
+  return this.a + this.b + c + d;
 }
 
+var o = { a: 1, b: 3 };
+
+// The first parameter is the object to use as
+// 'this', subsequent parameters are passed as
+// arguments in the function call
+add.call(o, 5, 7); // 16
+
+// The first parameter is the object to use as
+// 'this', the second is an array whose
+// members are used as the arguments in the function call
+add.apply(o, [10, 20]); // 34
+// ***********************EXAMPLE - 2 **************************************//
+
+let obj1 = { name: "Rohan" };
+
+const greeting = function(a, b) {
+  return `welcome ${this.name} to ${a}, ${b}`;
+};
+
 // console.log(greeting.call(obj1, "Hitech City", "Hyd"));
 
-let obj2 = { name: "Steve" }
+let obj2 = { name: "Steve" };
 
 // console.log(greeting.call(obj2, "Hitech City", "Hyd"));
 
@@ -21,18 +46,18 @@ D> When it is inside of an object’s method — the function’s owner is t
 
 */
 
-// ***********************EXAMPLE - 2**************************************//
+// ***********************EXAMPLE - 3 **************************************//
 
 var car = {
-  regNo : 'GA123',
-  brand: 'Ford',
+  regNo: "GA123",
+  brand: "Ford",
 
-  displayDetails: function (ownerName) {
+  displayDetails: function(ownerName) {
     console.log(`${ownerName}, this is your car : ${this.regNo} ${this.brand}`);
   }
-}
+};
 // Now invoking the function normally will result
-car.displayDetails("Rohan")
+car.displayDetails("Rohan");
 
 /* Again in the above, I can not use arrow function, as this.regNo will refer to the global 'this' where it does not have  a regNo. See this - https://github.com/babel/babel/issues/1742
 
@@ -44,16 +69,12 @@ When inside an object literal, every functions 'this' is scoped to the object, a
 
 // Coming back to displayDetails() function - But what if we want to borrow a method, like below. Or What if we would like to pass a parameter to the displayDetails function? -
 
-var myCarDetails1 =  car.displayDetails;
+var myCarDetails1 = car.displayDetails;
 // myCarDetails1();
 
 /* Well, this won’t work as the “this” will be now assigned to the global context which doesn’t have neither the regNo or the brand property. So, to do that, I have to user bind. */
 
-var myCarDetails2 = car.displayDetails.bind(car, 'Steve');
+var myCarDetails2 = car.displayDetails.bind(car, "Steve");
 myCarDetails2();
 
 // The bind() method creates a new function where “this” refers to the first argument or parameter in the parenthesis in the above case “car”.
-
-
-
-

Javascript/js-basics/closure-setTimeout.js

@@ -22,26 +22,21 @@ C) Explanation why the time interval is taking 1 second for consoling out the la
 /* SOLUTION -
 To print the successive values of i with an interval of 1 second, we need to pass into setTimeout() the actual value of i at the moment of each loop execution in the for statement.  */
 
-funcToExecute = (x) => {
-    return () => {
-        console.log((x));
-    }
-}
+funcToExecute = x => {
+  return () => {
+    console.log(x);
+  };
+};
 
 for (var i = 1; i <= 5; i++) {
-
-    setTimeout(funcToExecute(i), i * 500)
-
-
-
+  setTimeout(funcToExecute(i), i * 500);
 }
 
-
 /* More Explanation on why the delay is happening in the correct solution and not in the original solution -
 
 In JavaScript you only have 2 ways of passing an argument....pass by value or pass by reference.
 
 In the incorrect solution above in the loop, i is being passed by reference. So the loop is done by the time first console.log runs and and i is already at 6. To pass by reference in JavaScript, the argument has to be object.property. However in the loop case above, this is a exception where a variable is being passed as a reference to the value instead of the value itself.
 
 Now, other than the loop exception.... if you pass a variable as a arg into a function(x).... you are passing by value. Thus, passing the variable i in the function(x) passes by value.
-*/
+*/

Javascript/js-basics/this-keyword.js

@@ -1,9 +1,72 @@
-/* FIRST TEST CASE -
+/* By the official doc (https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/this) - 'this' is just The JavaScript context object in which the current code is executing. In the global execution context (outside of any function), this refers to the global object whether in strict mode or not.
+
+In the global execution context (outside of any function), this refers to the global object whether in strict mode or not.
+ */
+// Inside a function, the value of this depends on how the function is called.
+// Case-1 - WITHOUT STRICT MODE - Since the following code is not in strict mode, and because the value of this is not set by the call, this will default to the global object, which is window in a browser.
+function f1() {
+  return this;
+}
+
+// In a browser:
+f1() === window; // true
+
+// In Node:
+f1() === global; // true
+
+// Case-2 - In strict mode, however, the value of this remains at whatever it was set to when entering the execution context, so, in the following case, this will default to undefined. So, in strict mode, if this was not defined by the execution context, it remains undefined. So, in strict mode, if this was not defined by the execution context, it remains undefined.
+
+function f2() {
+  "use strict"; // see strict mode
+  return this;
+}
+
+f2() === undefined; // true
+
+// In the Case-2 above, `this` was returned to be undefined, because f2 was called directly and not as a method or property of an object (e.g. window.f2()).
+
+// To pass the value of this from one context to another, use call(), or apply():
+
+// An object can be passed as the first argument to call or apply and this will be bound to it.
+var obj = { a: "Custom" };
+
+// This property is set on the global object
+var a = "Global";
+
+function whatsThis() {
+  return this.a; // The value of this is dependent on how the function is called
+}
+
+whatsThis(); // 'Global'
+whatsThis.call(obj); // 'Custom'
+whatsThis.apply(obj); // 'Custom'
+
+/* Where a function uses the 'this' keyword in its body, its value can be bound to a particular object in the call using the call() or apply() methods which all functions inherit from Function.prototype. */
+
+function add(c, d) {
+  return this.a + this.b + c + d;
+}
+
+var o = { a: 1, b: 3 };
+
+// The first parameter is the object to use as
+// 'this', subsequent parameters are passed as
+// arguments in the function call
+add.call(o, 5, 7); // 16
+
+// The first parameter is the object to use as
+// 'this', the second is an array whose
+// members are used as the arguments in the function call
+add.apply(o, [10, 20]); // 34
+
+// *************************************************************
+/* MORE TEST CASE - Case-1
  A) Inside a function, the value of this depends on how the function is called.
 Since the following code is not in strict mode, and because the value of this is not set by the call, this will default to the global object, which is window in a browser. And global in node
 https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/this
 
-B) By default the execution context for an execution is global which means that if a code is being executed as part of a simple function call then “this” refers to global object. “window” object is the global object in case of browser and in Node.JS environment, a special object “global” will be the value of “this”.
+B) By default the execution context for an execution is global which means that if a code is being executed as part of a simple function call then “this” refers to global object.
+“window” object is the global object in case of browser and in Node.JS environment, a special object “global” will be the value of “this”.
 */
 
 global.a = 2;
@@ -12,7 +75,7 @@ function foo() {
   return this.a;
 }
 
-console.log(foo());  // => 2
+console.log(foo()); // => 2
 
 // SECOND TEST CASE
 
@@ -22,32 +85,33 @@ function foo1() {
   console.log(this.b);
 }
 
-foo1();  // => 'undefined'
+foo1(); // => 'undefined'
 
+// Explanation of the above - I got 'undefined' because in VS-Code here, I am in node environment so just declaring var b = 2 will not attach the variable to the 'global' environment of vs-code
 
-// THIRD TEST CASE - “this” refers to invoker object (parent object). When an Object’s method is invoked then “this” refers to the object which contains the method being invoked.
+/* THIRD TEST CASE - “this” refers to invoker object (parent object).
+When an Object’s method is invoked then “this” refers to the object which contains the method being invoked. */
 
 var obj = {
-  c : 3,
+  c: 3,
   foo3: foo3
-}
+};
 
-function foo3 () {
+function foo3() {
   console.log(this.c);
 }
-obj.foo3()  // => 3
+obj.foo3(); // => 3
 
 // FOURTH TEST CASE
-function foo4 () {
+function foo4() {
   console.log(this === global);
 }
-foo4()  // => true
-
+foo4(); // => true
 
 // FIFTH TEST CASE - If strict mode is enabled for any function then the value of “this” will be “undefined” as in strict mode, global object refers to undefined in place of windows object.
 
-function foo5 () {
-  'use strict'
+function foo5() {
+  "use strict";
   console.log(this === global);
 }
-foo5()  // => false
+foo5(); // => false