Mordern JavaScript

JavaScript.js

hola

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