Mordern JavaScript

JavaScript.js

hola

CallStack and Memory Heap

Memory Heap ==> Allocate Memory, Use memory and Release memory
CallStack ==> with this we keep track of where we are in code so with that we can run the code in order (LIFO)

Stack Overflow

Maximum Call Stack Size Exceeded

JavaScript Runtime

When Web API is ready with Response, it goes to the callback queue, and says I am the 1st person that is done, can u take my response. Event Loop is a loop that constantly checking says hey Is CallStack Empty?, Is CallStack Empty?, Is CallStack Empty? and Once CallStack is empty and entire JS file has been read then the event loop runs and put WebApi Response to CallStack.

http://latentflip.com/loupe/?code=ZnVuY3Rpb24gYWNoaWV2ZU5pcnZhbmEoKXsKICAgIGNvbnNvbGUubG9nKCJZb3UgYXJlIEdvb2QiKTsKfQoKZnVuY3Rpb24gYygpewogICAgc2V0VGltZW91dChhY2hpZXZlTmlydmFuYSwgMzAwMCk7Cn0KCmZ1bmN0aW9uIGIoKXsKICAgIGMoKTsKfQoKZnVuY3Rpb24gYSgpewogICAgYigpOwp9CgphKCk7!!!PGJ1dHRvbj5DbGljayBtZSE8L2J1dHRvbj4%3D

So what is NodeJs?
NodeJS is not a language, Its a JS Runtime

Higher Order Function

Function that returns a function is HOF example: Closure

Dynamic Objects keys

console.log(user)

Array To Object

let arr = [1,2,3,4,5]

let obj = {...arr}

console.log(obj) // {0: 1, 1: 2, 2: 3, 3: 4, 4: 5}

Regular Expression

---

---

---

---

---

---

Character Class

---

---

---

---

---

---

Anchors: string start ^ and end $

The caret ^ matches at the beginning of the text, and the dollar $ – at the end.

---

---

Multiline mode of anchors ^ $, flag "m"

The multiline mode is enabled by the flag m.

Escaping, special characters

There are other special characters as well, that have special meaning in a regexp. They are used to do more powerful searches. Here’s a full list of them: [ \ ^ $ . | ? * + ( ).

---

---

Sets and ranges [...]

For instance, [eao] means any of the 3 characters: 'a', 'e', or 'o'.

Quantifiers +, *, ? and {n}

Let’s say we have a string like +7(903)-123-45-67 and want to find all numbers in it. But unlike before, we are interested not in single digits, but full numbers: 7, 903, 123, 45, 67.

A number is a sequence of 1 or more digits \d. To mark how many we need, we can append a quantifier.

---

---

---

---

---

---

Alternation (OR) |

let res = /^(abc){3}$/g.test("abcabcabc")
console.log(res);   // true

Methods of RegExp and String

• str.match(regexp)
• str.split(regexp|substr, limit)
• str.search(regexp)
• str.replace(str|regexp, str|func)
• regexp.exec(str)
• regexp.test(str)

BigInt

let bb = 234342134343213243424534232134253n;
let pp = BigInt("45443324254342425343242534232332");
let cc = BigInt(34234325443324254342425343242534232332);
console.log(typeof bb); // BigInt

---

---

---

---

---

---

JS 2020 features

console.log(obj.name ?? "yogendra"); // ?? same as || but only takes null, undefined as false value

console.log(obj?.name?.firstName)

Promise.allSettled([p1. p2])

console.log(globalThis) == console.log(self) == console.log(window) == console.log(global)
now globalThis is common for both browser and node

Shadow DOM

Shadow DOM serves for encapsulation. It allows a component to have its very own “shadow” DOM tree, that can’t be accidentally accessed from the main document, may have local style rules, and more.

Getter and Setter in JS

What makes them special is that we don't access data as a function. We access it just like we would any old property

• You can check if new data is valid before setting a property
• You can perform an action on the data which you are getting or setting on a property.
• You can control which properties can be stored and retrieved.

var shout = {
    _message: "HELLO!",
    get message() {
      return this._message;
    },
    set message(value) {
      this._message = value.toUpperCase();
    }
  };
  shout.message = "This is sparta!";
  console.log(shout.message);  // THIS IS SPARTA!

//================================================================

  class Person{ 
    constructor(){
        this._message= "HELLO!"
    }
    get message() {
      return this._message;
    }
    set message(value) {
      this._message = value.toUpperCase()+" LOL";
    }
  }
  let p = new Person();
  p.message = "this is sparta!";
  console.log(p.message);  // THIS IS SPARTA! LOL
  

Symbol

---

---

---

---

prototypal chaining

let arr = [1,2,3,4];
let obj = {}
let fn = ()=>2;
console.log(arr.__proto__.__proto__)
console.log(obj.__proto__)
console.log(fn.__proto__.__proto__)
console.log(Function.prototype.__proto__)
console.log(Array.prototype.__proto__)
console.log(Object.prototype)

All is same

console

Proxy in JavaScript

It basically wraps our object and then pass the handler to it to override the existing method

Promise Catching at the place

let p1 = new Promise((resolve, reject) => {
    resolve("done1")
});

let p2 =  new Promise((resolve, reject) => {
    resolve("done2");
})

let p3 =  new Promise((resolve, reject) => {
    reject("reject3")
}).catch((error) => { // catching error directly here so that in Promise.all it is considered as successs
    return undefined;    
});

Promise.all([p1,p2,p3]).then(res=>{
    console.log({res});  // { res: [ 'done1', 'done2', undefined ] } 
    
}).catch((error) => {
    console.log({error});
})

what is output

var foo = 'bim'
var getFoo = function () { return foo }
foo = 'boum'
console.log(getFoo());  // boum

The answer is ‘boum’ because foo is changed to ‘boum’ on line 3, and function getFoo will return a variable foo within its scope.

Output

In the following code, I expected both a and b to be 3. However, a is undefined and b is 3. Why?

(function(){
var a = b = 3;
})();

console.log(typeof a);//"undefined"
console.log(b);//3

---

---

Actually it is

var a = 3;
b = 3

b = 3 is an assignment without a declaration. Since there is no b in the current execution context (the IIFE), JavaScript engine looks for b in the outer lexical environment. In this case, the outer environment is the global execution context.
Since b is not found in the global execution context either, and assuming non-strict mode, JavaScript implicitly creates b as a property of the global object (e.g., window.b in browsers). This makes b a global variable.

Destructuring

Prototype

class Hola{
    constructor(){
        this.name="yogendra";
        console.log(this);
    }

    static div(){
        console.log("div");
    }

    sum(){
        console.log("sum");
    }
}

const h = new Hola();

console.log(Object.getPrototypeOf(h))   // {constructor: ƒ, sum: ƒ}

console.log(h.__proto__)   // {constructor: ƒ, sum: ƒ}

console.log(Hola.prototype); // {constructor: ƒ, sum: ƒ}

Array.at()

Get the value at that position -> index passed
const arr = ["jack","yogi","abc"]
console.log(arr.at(0)) // "jack"
console.log(arr.at(-1)) // "abc"

This keyword

Akshay -> https://www.youtube.com/watch?v=9T4z98JcHR0&list=PLlasXeu85E9eWOpw9jxHOQyGMRiBZ60aX&index=9