this keyword with arrow function

Author: rohan-paul

Javascript/arrow-function/arrow-function-and-this-keyword.md

@@ -0,0 +1,25 @@
+Unlike regular functions, arrow functions do not have their own **this**.
+
+```js
+let user = {
+  name: "GFG",
+  gfg1: () => {
+    console.log("hello " + **this**.name) // no '**this**' binding here
+  },
+  gfg2() {
+    console.log("Welcome to " + **this**.name) // '**this**' binding works here
+  },
+}
+user.gfg1() // => undefined
+user.gfg2() // 'Welcome to GFG'
+```
+
+You cannot rebind **this**. in an arrow function. It will always be defined as the context in which it was defined. If you require \***\*this\*\*** to be meaningful you should use a normal function.
+
+From the ECMAScript 2015 Spec:
+
+Any reference to arguments, super, **this**, or new.target within an ArrowFunction must resolve to a binding in a lexically enclosing environment. Typically **this** will be the Function Environment of an immediately enclosing function.
+
+**this** inside an arrow function always 'inherits' the **this** from the enclosing scope. That is a feature of arrow functions. But you can still bind all other parameters of an arrow function. Just not **this**
+
+You cannot bind a value since the **this** is already binded.

Javascript/arrow-function/arrow-vs-regular-functions.md

@@ -0,0 +1,39 @@
+### Arguments objects are not available in arrow functions, but are available in regular functions.
+
+```js
+let user = {
+  show() {
+    console.log(arguments)
+  },
+}
+user.show(1, 2, 3) // => [Arguments] { '0': 1, '1': 2, '2': 3 }
+```
+
+But the below will print some strange output
+
+```js
+let user = {
+  show_ar: () => {
+    console.log(...arguments)
+  },
+}
+
+user.show_ar(1, 2, 3)
+```
+
+### Can NOT Use new keyword with arrow function
+
+Regular functions created using function declarations or expressions are ‘constructible’ and ‘callable’. Since regular functions are constructible, they can be called using the ‘new’ keyword. However, the arrow functions are only ‘callable’ and not constructible. Thus, we will get a run-time error on trying to construct a non-constructible arrow functions using the new keyword.
+
+```js
+let x = function() {
+  console.log(arguments)
+}
+new x(1, 2, 3) // => [Arguments] { '0': 1, '1': 2, '2': 3 }
+// The above will compile properly
+
+let x = () => {
+  console.log(arguments)
+}
+new x(1, 2, 3) // => TypeError: x is not a constructor
+```

Javascript/arrow-function/when-not-to-use-arrow-function.md

@@ -1,59 +1,53 @@
-# Arrow functions are cool in ES6. When should you NOT use arrow functions. Name three or more cases.
+### Arrow functions are cool in ES6. When should you NOT use arrow functions. Name three or more cases.
 
-Arrow functions are neat but are not suitable for all use cases. For those who are ready to get rid of `function` and move on to arrow functions, it's time to examine a simple scenario where the arrow function would complicate your logic.
-
-## 1. Event Handlers
+### 1. Event Handlers
 
 Let's look at this example, we have a link on our page with an id of `myLink`. Every time you hover over this link, a CSS class `highlight` is toggled and the text is highlighted.
 
 ```js
-var myLink = document.getElementById('myLink');
-myLink.addEventListener('mouseenter', function(){
-  this.classList.toggle('highlight');
-   console.log(this.classList);
-});
+var myLink = document.getElementById("myLink")
+myLink.addEventListener("mouseenter", function() {
+  this.classList.toggle("highlight")
+  console.log(this.classList)
+})
 ```
+
 This logs `highlight`.
 
 Using ES6 syntax, this works as expected. Now let's try that in ES6 using arrow functions:
 
 ```js
-const myLink = document.getElementById('myLink');
-myLink.addEventListener('mouseenter', () => {
-  this.classList.toggle('hightlight');
-   console.log(this.classList);
-});
+const myLink = document.getElementById("myLink")
+myLink.addEventListener("mouseenter", () => {
+  this.classList.toggle("hightlight")
+  console.log(this.classList)
+})
 ```
-This logs `TypeError: Cannot read property 'classList' of undefined`.
-
-If you use an arrow function, the keyword ``this`` is not bound to that element. If we use a regular function, the keyword this will be bound to the element we clicked!
-
-
-
-If you're not sure whether an arrow function is appropriate, [Kyle Simpson](https://github.com/getify/You-Dont-Know-JS/blob/master/es6%20%26%20beyond/ch2.md) provides us with this awesome chart:
 
-![Arrow Functions Visual Aid](https://github.com/getify/You-Dont-Know-JS/raw/master/es6%20%26%20beyond/fig1.png)
+This logs `TypeError: Cannot read property 'classList' of undefined`.
 
+When using an arrow function `this` is not bound to anything and it just inherits it from the parent scope which may be window. If we use a regular function, the keyword 'this' will be bound to the element we clicked. Remember,
 
 ## 2: Object Methods
 
 ```js
 const person = {
-    points: 23,
-    score: () => {
-        return this.points++;
-    }
+  points: 23,
+  score: () => {
+    return this.points++
+  },
 }
 
-person.score();
+person.score()
 
-console.log(person.points)  // it ouputs 23 irrepective of howmany times i run the above block of code
+console.log(person.points) // it outputs 23 irrespective of how many times i run the above block of code instead of getting incremented by earlier call of person.score().
 ```
+
 We have our method called score, and whenever we call person.score, it should add one to our points, which is currently 23.
 
 If we run person.score(); a few times, we should be at 26 or something.
 
-But if I call person, points is still at 23. Why?
+But if I call person.points is still at 23. Why?
 
 Because it’s trying to add points to the window! Remember, when using an arrow function this is not bound to anything and it just inherits it from the parent scope which in this case is the window.
 
@@ -71,4 +65,5 @@ person.score();
 
 console.log(person.points)
 ```
-And now, first output is 24 and then 25 and so on..
+
+And now, first output is 24 and then 25 and so on..

Javascript/call-apply-bind/call-function-basics-1.md

@@ -0,0 +1,43 @@
+[From w3school](https://www.w3schools.com/js/js_function_call.asp)
+
+In JavaScript all functions are object methods.
+
+If a function is not a method of a JavaScript object, it is a function of the global object (see previous chapter).
+
+```js
+var person = {
+  firstName: "John",
+  lastName: "Doe",
+  fullName: function() {
+    return this.firstName + " " + this.lastName
+  },
+}
+person.fullName()
+```
+
+In a function definition, this refers to the "owner" of the function.
+
+In the example above, this is the person object that "owns" the fullName function.
+
+In other words, this.firstName means the firstName property of this object.
+
+The call() method can be used to invoke (call) a method with an owner object as an argument (parameter).
+
+With call(), an object can use a method belonging to another object.
+
+```js
+var person = {
+  fullName: function() {
+    return this.firstName + " " + this.lastName
+  },
+}
+var person1 = {
+  firstName: "John",
+  lastName: "Doe",
+}
+var person2 = {
+  firstName: "Mary",
+  lastName: "Doe",
+}
+person.fullName.call(person1) // Will return "John Doe"
+```

Javascript/call-apply-bind/call-function.md renamed to Javascript/call-apply-bind/call-function-basics-2.md

@@ -26,9 +26,31 @@ f() // => 10
 f.call(o) // => 15
 ```
 
+### Very Importantly note, the call() method as above will NOT work in arrow function. And this.x will produce undefined. Because, Unlike regular functions, arrow functions do not have their own 'this'
+
+```js
+global.x = 10
+
+const obj = {
+  x: 15,
+  func: () => console.log(this.x),
+  func2: function() {
+    console.log(this.x)
+  },
+}
+
+const func = () => console.log(this.x)
+
+func() // => undefined
+func.call(obj) // => undefined
+obj.func.call(obj) // => undefined
+// But the following will work as expected
+obj.func2.call(obj) // => 15, accessing the
+```
+
 The first invocation of f() will display the value of 10, because this references the global object. The second invocation (via the call method) however, will display the value 15. 15 is the value of the x property inside object o.
 
-### The call() method invokes the function and uses its first parameter as the this pointer inside the body of the function. In other words - we've told the runtime what object to reference as this while executing inside of function f().
+### The call() method invokes the function and uses its first parameter as the this pointer inside the body of the function. In other words - we've told the runtime what object to reference as 'this' while executing inside of function f().
 
 ### The apply() method is identical to call(), except apply() requires an array as the second parameter. The array represents the arguments for the target method.
 

Javascript/curried-function.md

@@ -1,3 +1,7 @@
+#### Is a technique for converting function calls with N arguments into chains of N function calls with a single argument for each function call?
+
+#### Currying always returns another function with only one argument until all of the arguments have been applied. So, we just keep calling the returned function until we’ve exhausted all the arguments and the final value gets returned.
+
 Example
 
 ```js

Javascript/js-basics/this-keyword.js

@@ -3,68 +3,68 @@
 
 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.
+Case-1 - WITHOUT STRICT MODE - If a function is not in strict mode, and if the value of this is not set by the call, this will default to the global object, which is window in a browser.
 
-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.
+Case-2 - In strict mode, however, the value of this remains at whatever it was set to when entering the execution context, 'this' will default to undefined. So, in strict mode, if this was not defined by the execution context, it remains undefined.
 
 */
 
 // 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;
+  return this
 }
 
 // In a browser:
-f1() === window; // true
+f1() === window // true
 
 // In Node:
-f1() === global; // true
+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.
 
 function f2() {
-  "use strict"; // see strict mode
-  return this;
+  "use strict"
+  return this
 }
 
-f2() === undefined; // true
+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" };
+var obj = { a: "Custom" }
 
 // This property is set on the global object
-var a = "Global";
+var a = "Global"
 
 function whatsThis() {
-  return this.a; // The value of this is dependent on how the function is called
+  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'
+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;
+  return this.a + this.b + c + d
 }
 
-var o = { a: 1, b: 3 };
+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
+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
+add.apply(o, [10, 20]) // 34
 
 // *********************** EXPLANATION - 2 **************************************//
 /* MORE TEST CASE - Case-1
@@ -76,23 +76,23 @@ B) By default the execution context for an execution is global which means that
 “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;
+global.a = 2
 
 function foo() {
-  return this.a;
+  return this.a
 }
 
-console.log(foo()); // => 2
+console.log(foo()) // => 2
 
 // SECOND TEST CASE
 
-var b = 2;
+var b = 2
 
 function foo1() {
-  console.log(this.b);
+  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
 
@@ -101,24 +101,24 @@ When an Object’s method is invoked then “this” refers to the object which
 
 var obj = {
   c: 3,
-  foo3: foo3
-};
+  foo3: foo3,
+}
 
 function foo3() {
-  console.log(this.c);
+  console.log(this.c)
 }
-obj.foo3(); // => 3
+obj.foo3() // => 3
 
 // FOURTH TEST CASE
 function foo4() {
-  console.log(this === global);
+  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";
-  console.log(this === global);
+  "use strict"
+  console.log(this === global)
 }
-foo5(); // => false
+foo5() // => false