Core features of next-generation JavaScript

Since we are working with the modern frameworks or libraries of course it is strongly recommended to use the next-generation JS features. Let’s take an overview of the most used features together.

As you know we do not use anymore var but instead, we are using let or const, depends on the case scenario.

Let

Let is a block-scoped local variable which makes the variable limited to the scope of the block statement.

Example:

function varTest() {
  var x = 1;
  {
    var x = 2;  // same variable!
    console.log(x);  // 2
  }
  console.log(x);  // 2
}

function letTest() {
  let x = 1;
  {
    let x = 2;  // different variable
    console.log(x);  // 2
  }
  console.log(x);  // 1
}

Const

Similar like let, const is also block-scoped, but here the difference is that a constant cannot be reassigned or redeclared. So, from here we can say they are read-only objects.
What is interesting here is that the value is mutable. That means direct reassignment is not allowed but changing object properties.

const ctest = 1;
ctest = 2;	// results with error

const cobj = {
    name: "Dimitar"
}
cobj.name = "Test"; // no errors

Arrow functions

Arrow functions are a replacement of the standard known normal functions which give us new shorter syntax and different behaviour of the scope where:

• When calling normal functions this refers to the object that calls the function
• When calling arrow function this refers to the outer function that surrounds the inner function

function thisTest() {
    let that = this
    this.prop1 = 0;

    setInterval(function growUp() {
        this.prop1++;
		that.prop1++;
        console.log(this.prop1)
        console.log(that.prop1)
    }, 1000)
}

function thisTest1() {
    let that = this
    this.prop1 = 0;

    setInterval(() => {
        console.log(this.prop1)
        console.log(that.prop1)
        this.prop1++;
		that.prop1++;
    }, 1000)
}

let thisNormal = new thisTest();
/* Prints:
undefined 0
NaN 1
NaN 2
NaN 3
...
*/
let thisArrow = new thisTest1();
/* Prints:
0 0
2 2
4 4
6 6
...
*/

Exports & Imports

In every modern project, we are splitting the code of our project in different modules, where those modules keep our code module focused and manageable. So, the communication between the modules, we maintain with imports (used to get access to a module) and exports (used to make it available to other modules).

From here we can export or import everything, from constants to classes by having unlimited exports and imports.

Exports:
export let numbers = [1, 2, 3 , 4, 5]
export class User {
	constructor(name) {
		this.name = name
}
}

Imports:
import { User } from ‘./…’

Classes

…are used to replace constructor functions and provide better readability.

class P {
    constructor() {
        name = "Dime"
    }
}

const p = new P();
p.name;


replaced with

class P2 {
     constructor () {
         this.name = 'Max';
     }
}

const p2 = new P2();
console.log(p2.name);

class Human {
    species = 'human';
}

class Person extends Human {
    name = 'Max';
    printMyName = () => {
        console.log(this.name);
    }
}

const person = new Person();
person.printMyName();
console.log(person.species);

Spread operator

Spread operator allows us to pull elements out of an array or pull the properties of an object. The spread operator is very useful because it is a lot used to help us clone arrays and objects with different reference.

const arr1 = [1, 2, 3];
const arr2 = [...arr1, 4, 5];

const obj1 = {
    name: "Dime"
}

const obj2 = {
    ...obj1,
    age: 26
}

const obj3 = {...obj1};
const obj4 = obj1;
obj1 === obj3;  // false
obj1 === obj4; // true

Destructuring

The last next-generation feature I am going to cover is destructuring. Destructuring allows us to easily access the values of arrays and objects and assign them to variables. This is mostly used when we are working with function arguments when we are calling with the whole object but getting the properties that we only need.

const arr = [1, 2, 3];
const [a1, a2] = arr;

const obj = {
    name: "Dime",
    age: 26
}

const {name} = obj;

const printValue = (obj) => {
    console.log(obj.name);
}

const printValue1 = ({name}) => {
    console.log(name);
}

printValue({name: "Dime", age: 26});
printValue1({name: "Dime", age: 26});

Conclusion

As we can see next generation is already here and I strongly believe that in near future in the modern projects there won’t be tolerated non-next-generation JavaScript code.
So don’t hesitate, simply just try it and enjoy the next-generation JavaScript features.