DEV Community: Biplab Malakar

#JavaScript 2019#New in ES

Biplab Malakar — Thu, 26 Dec 2019 11:16:39 +0000

JavaScript-2019 added so many new in build functionality which are very helpful. In this article I am going to discuss those functionality and new features.

Class

Add new symbol to define private variables in class(#)

Example for simple variable and function
class Scipt2019Class {
    user_name ="Biplab Malakar"; // public field
    #user_phone_number = "9592350924"; //private variable
    constructor() { }
    getName() { //public function
       return this.user_name;
    }
    #get Age() { // private function
       return this.#user_phone_number;
   }
}

Example for static variable and static function
class StaticClass{
    static #designation = 'Software Developer"; // static variable
    static getDesignation(){
       return StaticClass.#designation;
    }
}

New trim function.

Functionality as trim with new features

const first_name = "        Biplab ";
const last_name ="Malakar      ";
const full_name = first_name.trimStart() + last_name.trimEnd();
console.log('Full name is:  ', full_name);
// trimStart() trim form the beginning only
// trimEnd() trim from end only

Big Integer

In javascript to define big integer we used Number.MAX_SAFE_INTEGER(2^53).Now we can use BigInt() to define large number which is larger than current maximum value.

//'n' syntax to declare BigInt
const big_number_1 = 9100000000000001n;
//use BigInt() constructor
const big_number_2 = BigInt(9100000000000002);
//BigInt() constructor with string
const big_number_2 = BigInt('9100000000000002');

Array Functions

Before 2019 new function we use our own login to make dimensional array form multi-dimensional array. Now JavaScript provide flat() and flatMap() to generate single dimensional array.

//flat()
const array = [1,[2,3],[4,5,[6,7,[8,9]]]]; 
array.flat(3); //  [1, 2, 3, 4, 5, 6, 7, 8, 9]
// flat(n); n is the depth by default depth is 1
array.flat();//[1, 2, 3, 4, 5, [6,7,[8,9]]]; //it extend upto depth 1
array.flat(2) // [1,2,3,4,5,6,7,[8,9]]; // it extend upto depth 2

//flatMap() same as map() but instead of return nested array it will return one-dimensional array

const sentence = ['I am', 'Biplab Malakar'];
let step_1 =  sentence.map(d=> d.split(' '));// [['I', 'am'], ['Biplab', 'Malakar']]
let step_2 = step_1.flatMap(d=> d);// ['I', 'am', 'Biplab', 'Malakar']

Object Creation from array

We can create object from one-dimensional array
const obj = Object.assign({}, [1,2,3,4,5]); // {0: 1, 1: 2, 2: 3, 3: 4, 4: 5}
// if it's tow-dimensional array [['a', 2], ['b',4], ['c', 6]] and 
//I want object {a: 2, b: 4, c: 6}
const obj_2 = Object.fromEntries( [['a', 2], ['b',4], ['c', 6]]); // {a: 2, b: 4, c: 6}

reduceRight()

It's a new JavaScript(2019) array function. This function is same as reduce() function with the feature that it start evaluating from right to left.

const charArray = ['e','s','r','e','v','e','r'];
const word = charArray.reduce((ac, c)=> ac+c);
console.log('word is: ', word); // esrever

It starts evaluating from left and we get a string "esrever". Now if I want to evaluate this array from right so that my output is "reverse". This can be achieved by reduceRight()

const charArray = ['e','s','r','e','v','e','r'];
const word = charArray.reduceRight((ac, c)=> ac+c);
console.log('word is: ', word); // reverse

copyWithin()

This is also a new JavaScript(2019) array function. This function has feature to copy array element inside itself and output is reflected on original array. I know its confusing about what I am saying, lets look into example

const array = [1,2,3,4,5];
array.copyWithin(1);
console.log(array);

The output is [1,1,2,3,4]. array.copyWithin() this function copies your array elements and start place copy array from specified index. During the copy it will maintain the original size of the array. Consider the above example

array.copyWithin(1), copy the all element of array and place this array from index 1.
copy array is [1,2,3,4,5]. Original array size is 5. When it start placing element then it found that it extend the original size, so its ignore element 5.

const array = [1,2,3,4,5];
array.copyWithin(2);
console.log(array); // [1,2,1,2,3]

We can also define from which element it should start copy.

array.copyWithin(place_index, start_from_index);
array.copyWithin(1, 2);

First Argument 1, denote copy array should be place from index 1.
Second Argument 2, denote start copy elements from index 2. So copy items are 3,4,5

const array = [1,2,3,4,5];
array.copyWithin(1,2);
console.log(array); // [1, 3,4,5,5]
#5 prints two times because after 3,4,5 no element is left
#so last 5 remain its position

array.copyWithin(start_placing_index, start_from_index, end_index);

const array = [1,2,3,4,5];
array.copyWithin(2,3, 5); 
# start copy from index 3  to 5-1 index and start place from index 2
console.log(array); // [1,2,4,5,5]

Apart from those so many changes are proposed like

Import Read
JSON.stringify Read
import.meta Read
globalThis Read

JavaScript Inheritance Prototype Vs Class

Biplab Malakar — Tue, 10 Dec 2019 12:31:10 +0000

Before ES6 JavaScript doesn't support class like OOPs but we can code class and inheritance using "Prototype".

Today we are going do some code to implement inheritance using both prototype(ES5) and class(ES6).

The prototype is an object that is associated with every functions and objects by default in JavaScript, where function's prototype property is accessible and modifiable and object's prototype property (aka attribute) is not visible.
Every function and object includes prototype object by default.

-- tutorialsteacher

Start with code rather then talking

A. Simple Inheritance

*Like every children has parents , so we are going to create one Parent class to manipulate and store the parent information then inherit the Child class from Parent class *

Using Prototype

const Parent = function(father_name, mother_name, city_name) {
  this.father_name = father_name;
  this.mother_name = mother_name;
  this.city_name = city_name;

  this.printParentDetails= ()=>{
    console.log('Father Name: ', this.father_name);
    console.log('Mother Name: ', this.mother_name);
    console.log('They live in: ', this.city_name);
  }
}

const Child = function(father_name, mother_name,city_name, name, age) {
  Parent.call(this,father_name,  mother_name, city_name);
  this.name = name;
  this.age = age;

  this.printChildDetails = ()=>{
      this.printParentDetails();
      console.log('Child name is: ', this.name);
      console.log('Child age is: ', this.age);
  }
}

Child.prototype = Object.create(Parent.prototype);
Child.prototype.constructor = Child;

const child_1 = new Child('Jonny', 'Jolly', 'New York', 'Jin', 18);
const child_2 = new Child('Ram', 'Sham', 'Mumbai', 'Jadu', 21);

child_1.printChildDetails();
child_2.printChildDetails();

Parent.call(this,father_name, mother_name, city_name)

It will bind our Parent class within the Child class context.

Child.prototype = Object.create(Parent.prototype)

Assign Parent prototype to Child Prototype

Child.prototype.constructor = Child

The constructor of Child class should be Child constructor, not Parent class constructor

Using ES6 class

class Parent {
  constructor(father_name, mother_name, city_name) {
    this.father_name = father_name;
    this.mother_name = mother_name;
    this.city_name = city_name;
  }

  printParentDetails(){
    console.log('Father Name: ', this.father_name);
    console.log('Mother Name: ', this.mother_name);
    console.log('They live in: ', this.city_name);
  }
}

class Child extends Parent{
  constructor(father_name, mother_name,city_name, name, age) {
    super(father_name,  mother_name, city_name);
    this.name = name;
    this.age = age;
  }

  printChildDetails(){
      this.printParentDetails();
      console.log('Child name is: ', this.name);
      console.log('Child age is: ', this.age);
  }
}


const child_1 = new Child('Jonny', 'Jolly', 'New York', 'Jin', 18);
const child_2 = new Child('Ram', 'Sham', 'Mumbai', 'Jadu', 21);

child_1.printChildDetails();
child_2.printChildDetails();

B. Multiple Inheritance

Like every child belongs to the country also, so we are going to create a **Country class. And the Child class going to inherit from Both Parent and Country class**

Using Prototype

const Parent = function(father_name, mother_name, city_name) {
  this.father_name = father_name;
  this.mother_name = mother_name;
  this.city_name = city_name;

  this.printParentDetails= ()=>{
    console.log('Father Name: ', this.father_name);
    console.log('Mother Name: ', this.mother_name);
    console.log('They live in: ', this.city_name);
  }
}

const Country = function(country_name, country_code) {
  this.country_name = country_name;
  this.country_code = country_code;

  this.printCountryDetails= ()=> {
    console.log('Country Name: ', this.country_name);
    console.log('Country Code: ', this.country_code);
  }
}


const Child = function(father_name, mother_name,city_name, name, age, country_name, country_code) {
  Parent.call(this,father_name,  mother_name, city_name);
  Country.call(this, country_name,country_code);
  this.name = name;
  this.age = age;

  this.printChildDetails = ()=>{
      this.printParentDetails();
      this.printCountryDetails();
      console.log('Child name is: ', this.name);
      console.log('Child age is: ', this.age);
  }
}

Child.prototype = Object.create(Parent.prototype);
Child.prototype = Object.create(Country.prototype);
Child.prototype.constructor = Child;


const child_1 = new Child('Jonny', 'Jolly', 'Washington', 'Jin', 18, 'US', '+1');
const child_2 = new Child('Ram', 'Sham', 'Mumbai', 'Jadu', 21, 'India', '+91');

child_1.printChildDetails();
child_2.printChildDetails();

Using ES6 class

JavaScript class are not pure class like OOPs. JavaScript class does not support multiple inheritance and hybrid inheritance. To implement multiple inheritance, we need to do some JavaScript coding trick. We will build the same example used in above using multiple inheritance concept.

class Parent {
  constructor(father_name, mother_name, city_name) {
    this.father_name = father_name;
    this.mother_name = mother_name;
    this.city_name = city_name;
  }

  printParentDetails(){
    console.log('Father Name: ', this.father_name);
    console.log('Mother Name: ', this.mother_name);
    console.log('They live in: ', this.city_name)
  }
}

class Country {
  constructor(country_name, country_code) {
    this.country_name = country_name;
    this.country_code = country_code;
  }

  printCountryDetails() {
    console.log('Country Name: ', this.country_name);
    console.log('Country Code: ', this.country_code);
  }
}


class Child {
  constructor(father_name, mother_name,city_name, name, age, country_name, country_code) {
    extendClass(this, new Parent(father_name, mother_name,city_name));
    extendClass(this, new Country(country_name, country_code));
    this.name = name;
    this.age = age;
  }

  printChildDetails(){
      this.printParentDetails();
      console.log('Child name is: ', this.name);
      console.log('Child age is: ', this.age)
  }
}

function extendClass(child, parent) {
  for(let key in parent){
    child[key] = parent[key]
  }
  Reflect.ownKeys(Reflect.getPrototypeOf(parent)).filter(d=> d!= 'constructor').map(fun=>{if(!child[fun]) {child[fun] = parent.__proto__[fun].bind(child);}});
}


const child_1 = new Child('Jonny', 'Jolly', 'New York', 'Jin', 18);
const child_2 = new Child('Ram', 'Sham', 'Mumbai', 'Jadu', 21);

child_1.printChildDetails();
child_2.printChildDetails();

extendClass(this, new Parent(father_name, mother_name,city_name))

This extendClass will bind our Parent class into Child class. It will accept two parameter, first one will be current object means Child class and second one will be instance of Parent class

for(let key in parent)

Loop over all the members of Parent class **and bind them into **Child Class

Reflect.getPrototypeOf(parent)

It will return a prototype object of the parent class, means all the member functions of the parent class.

Reflect.ownKeys(Reflect.getPrototypeOf(parent))

Retrieve all the functions name from prototype object.

filter(d=> d!= 'constructor').map(fun=>{if(!child[fun]) {child[fun] = parent.proto[fun].bind(child);}})

Assign prototype of the** Parent class** to the child class, except *Parent class Constructor
*

For full code click here

So finally we implement inheritance using both prototype(ES5) and class(ES6). Incase of any query comment box are always open for you and its also free😄😄✌️