complete js behind the scenes

Author: Evavic44

08-behind-the-scenes/README.md

@@ -271,3 +271,63 @@ f(); // undefined
 ```
 
 We get undefined because `f` is not attached to any object. It is just an ordinary function and since the `this` keyword is undefined in an regular function, the result of `f` will too be undefined.
+
+# Regular Functions vs Arrow Functions
+
+There are a few pitfalls related to using the `this` keyword in regular functions and arrow functions that require mentioning.
+
+```js
+const eke = {
+  firstName: "Victor",
+  year: 1997,
+  calcAge: function () {
+    console.log(2022 - this.year);
+    console.log(this);
+  },
+
+  greet: () => console.log(`Hey, ${this.firstName}`),
+};
+
+eke.greet();
+```
+
+In the code example above, the result of calling the greet method —which is an arrow function is undefined. Because remember an arrow functions does not get it's own `this` keyword, it will then use the `this` keyword from the global scope. In this scenario, `firstName` is not in the global scope therefore, the result will be `undefined`.
+
+This can be quite dangerous in a situation `var` is used to create variables because variables declared with `var` creates properties on the global object.
+
+```js
+var firstName = "Matilda"; // Result of eke.greet will now be Hey, matilda
+```
+
+The reason this happens is because `this` keyword points to the window object in the `greet` method, and since `firstName` was declared as Matilda using the `var` keyword, `this.firstName` will now produce Hey, Matilda.
+
+This is another good reason to not use the `var` keyword to declare a variable. From this example, the big takeaway is to not use an arrow function as a method but normal functions. Just following this rule will prevent the bug we illustrated in the example above.
+
+Another final example of one of the pitfalls of using the `this` keyword is when we have a function inside a method.
+
+# Primitive vs Objects (Primitive vs Reference Types)
+
+Primitive values inclues:
+
+- Number
+- String
+- Boolean
+- Undefined
+- Null
+- Symbol
+- BigInt
+
+Objects
+Everyting else are basically objects
+
+- Object literal
+- Arrays
+- Functions
+  and many more..
+
+For the sake of memory management, we refer to primitive as primitive types and objects as refrence types.
+Primitive types are stored in the `Call stack` while refrence types are stored in the `Heap`.
+
+It's a misconceptionn that all variables declared with the `const` keyword are immutable. However this is only true for primitive values but not for refrence values.
+
+# Primitive vs Objects in Practice

08-behind-the-scenes/script.js

@@ -1,5 +1,5 @@
 "use strict";
-
+/*
 console.log(this);
 
 const calcAge = function (birthYear) {
@@ -31,4 +31,108 @@ matilda.calcAge = eke.calcAge;
 matilda.calcAge();
 
 const f = eke.calcAge;
-// f();
+f() */ // Regular functions vs Arrow functions
+var firstName = "Matilda";
+
+/* const eke = {
+  firstName: "Victor",
+  year: 1997,
+  calcAge: function () {
+    // console.log(this);
+    console.log(2022 - this.year);
+
+    // Solution 1
+    // const self = this; // self or that
+    // const isMillenial = function () {
+    //   console.log(self);
+    //   // console.log(this.year >= 1981 && this.year <= 1996);
+    //   console.log(self.year >= 1981 && self.year <= 1996);
+    // };
+    // isMillenial();
+
+    // Solution 2
+    const isMillenial = () => {
+      console.log(self);
+      // console.log(this.year >= 1981 && this.year <= 1996);
+      console.log(self.year >= 1981 && self.year <= 1996);
+    };
+    isMillenial();
+  },
+
+  greet: () => console.log(`Hey ${this.firstName}`),
+};
+
+eke.greet();
+eke.calcAge();
+
+// Arguments keyword
+const addExpr = function (a, b) {
+  console.log(arguments);
+  return a + b;
+};
+
+addExpr(2, 5);
+addExpr(2, 5, 8, 12);
+
+var addArrow = (a, b) => {
+  console.log(arguments);
+  return a + b;
+};
+addArrow(2, 4, 6); 
+*/
+
+// Primitives vs Objects
+
+let age = 30;
+let oldAge = age;
+age = 31;
+console.log(age);
+console.log(oldAge);
+
+const me = {
+  name: "Victor",
+  age: 30,
+};
+
+const friend = me;
+friend.age = 27;
+console.log(friend);
+console.log("Me", me);
+
+// Primitive Types - Call Stack
+let lastName = "Williams";
+let oldName = lastName;
+lastName = "Davis";
+console.log(lastName, oldName);
+
+// Refrence Types - Heap
+const jessica = {
+  firstName: "Jessica",
+  lastName: "Williams",
+  age: "27",
+};
+
+const marriedJessica = jessica;
+marriedJessica.lastName = "Davis";
+console.log("Before Marraige", jessica);
+console.log("After Marraige", marriedJessica);
+
+// marriedJessica = {};
+
+// Copying Objects
+const jessica2 = {
+  firstName: "Jessica",
+  lastName: "Williams",
+  age: "27",
+
+  family: ["Alice", "Bob"],
+};
+
+const jessicaCopy = Object.assign({}, jessica2);
+jessicaCopy.lastName = "Davis";
+
+jessicaCopy.family.push("Mary");
+jessicaCopy.family.push("John");
+
+console.log("Before Marraige", jessica2);
+console.log("After Marraige", jessicaCopy);