Learn Js with Ut

New Features in es2020

June 11, 2020

1. Optional chaining => symbol => ?.

This is use to access long chain properties and methods of an object.

For example:

const Obj = {
  db: {
    user: {
      name: undefined,
      sayHii(name) {
        console.log(`Hii ${name}`)
      },
    },
  },
}

console.log(Obj?.db?.user?.name || "username not found");
// username not found
//Because in above obj name is undefined

// We can also call methods of the object by ?.()
console.log(Obj?.db?.user?.sayHii?.("learn js"));
//Hii learn js

// we can also do dynamic properties access by ?.[]
const hiiFunc = "sayHii";
console.log(Obj?.db?.user?.[hiiFunc]?.("learn js"));
//Hii learn js

2. Nullish coalescing => symbol => ??

New short-circuiting operator to handle only nullish values (undefined or null)

For Example:

console.log(null ?? []);
// []
console.log(undefined ?? []);
//[]
console.log(false ?? "learn js");
//false
// This is strictly equal to the (null or undefined only) not falsy value
console.log(0 ?? 1);
//0
console.log("" ?? "learn js");
// ''

3. Object.fromEntries()

This will convert [[‘x’,2], [‘y’,4]] into { x: 2, y: 4 }

For Example:

// First we need to understand Object.entries()
const obj = { x: 2, u: 4 };
const entries = Object.entries(obj);
console.log(entries);
//[['x',2],['u',4]]

//Now if want again that object we can do
console.log(Object.fromEntries(entries));
//{x:2,u:4}

4. Array.prototype.flat()

Flat returns a flattened version of an given array

Like [1,2,[3]] into [1,2,3]

For Example:

const nestedArray = [1,[2, [3]];

console.log(nestedArray.flat());
//[1,2,[3]]
//Here flat flatten the above array into one level deep
//We can also pass any number like 1,2,3 to recursively flatten up to that depth
// Or If you wanna to flatten all nested array then pass (Infinity)

console.log(nestedArray.flat(1));
//[1,2,[3]] // 1 is default depth
console.log(nestedArray.flat(Infinity));
//[1,2,3] will flatten all nested array

5. Array.prototype.flatMap()

This is use to create duplicate elements of an array

For Example:

console.log([2, 3, 4].map(x => [x, x]).flat());
//[2,2,3,3,4,4]

//Now we can achieve this simply by flatMap()
console.log([1, 2, 3].flatMap(x => [x, x]));
//[1,1,2,2,3,3]

6. Promise.allSettled()

This will settled or complete when all the input promises are settled.

Which means that they are either fullfilled or rejected it does not matter.

For Example:

const promises = [Promise.resolve("Promise1"),
                  Promise.resolve("Promise2"),
                  Promise.reject("Promise3")];

(async ()=>{
      await Promise.allSettled(promises).then(res=>{

      res.forEach((result)=>console.log(result));

      //{status: "fulfilled", value: "promise1"}
      // {status: "fulfilled", value: "promise2"}
      //{status: "rejected", reason: "promise3"}
      });
})();

7. Public and private class fields

We can make our class fields private by using # before name of the field

For Example:

class IncreasingCounter {
  _count = 0 //Public field

  get value() {
    return this._count
  }
  increment() {
    this._count++
  }
}
const counter = new IncreasingCounter();
console.log(counter._count);
//0
console.log(counter.value);
//0
counter.increment();
console.log(counter.value);
//1
counter._count = 10
console.log(counter._count);
//10
// Now making counter field private

class PrivateCounter {
  #count = 0 // Now count is private we can't access outside

  get value() {
    return this.#count
  }
  increment() {
    this.#count++
  }
}
const pCounter = new PrivateCounter();

console.log(pCounter.#count);
//SyntaxError
console.log(pCounter.value);
//0
pCounter.#count = 23;
//SyntaxError

8. Dynamic import()

Now by using Dynamic import() we can import module on-demand (or conditionally).

Dynamic import introduces a new function-like form of import.

Now no need to import module at top of the file.

For Example:

//Suppose ./main.js file have two function exported
//main.js
export default () => {
  console.log("This is default function");
}

export const learnJs = () => {
  console.log("Learn Js");
}

// app.js

//Now we can import it anywhere in the file by using function Dynamic import
(async () => {
  const module = await import("./main.js");

  module.default();
  // logs => This is default function
  module.learnJs();
  //logs => Learn Js
})();

9. globalThis

Now we can access the global this in any javascript environment

(like browser,Node.js or something else)

For Example:

//In browser
console.log(globalThis);
//window
//In node js
console.log(globalThis);
//global

10. String.prototype.replaceAll()

This is use to replace all instances of a given substring.

For Example:

console.log("abba".replace("b", "_"));
//a_ba
// This only replace the first occurence of the substring.

//Now we can use replaceAll() to remove all the occrurence
console.log("abba".replaceAll("b","_"));
//a__a


Please subscribe our news letter

If you like what you just read. Please subscribe to our newsletter. So new content will be delivered to your inbox :)

Hii this is Utkarsh Srivastava. I live in India. I
Coding, Learning New Tech, and Playing PC Games. You can find me on
© 2020, Built with