Next Generation Javascript concepts

Picture taken from codeburst

I recently started learning React.js, In the process of learning I came to know importance of next generation JS concepts. Here I want to share few next generation JavaScript concepts I learnt.

Types of variables:

In the next generation JavaScript(like ES6) we use Let, Const as two different variable types.

Let: This is the type of variable which acts same as of the ‘Var’ in normal JS. In this type of variable declaration, we can always have a feasibility to change the value of the assigned variable.

Const: This is a type of variable Doesn’t change its assigned value.

Arrow functions:

Arrow functions are a different way of writing functions, Its syntax usually look like this:

Normal function:

function myFunc(){
    …
}

Arrow function:

const myFunc = () => {
    …
}

The biggest advantage of the Arrow functions is that we won’t get the issue with ‘this’ keyword. In normal function, we may encounter issues by getting some other div when we refer to another div using ‘this’ keyword.

Exports & Imports:

In this next generation feature, we usually export classes, Functions, Constants from one js file to another js file. These exported Functions or Classes or Constants can be imported into other javascript file using the import keyword.

There are two types of exports:

1. Default export — Export with any name, import with any name
2. Named exports — Export with a specific name and have to import with a specific name

Default export and import example:

export default Person (Exported from person.js file)
import Person from ‘./person.js’

Named export and import example:

export const baseData = 10
import {baseData} from ‘./utils.js’

Classes:

Classes are the blueprint for the JS objects. They hold several variables and functions.

Example:

Class Human{
    constructor(){
          this.gender = 'male';
    }
printGender(){
          console.log(this.gender);
     }
}
class Person extends Human{
    constructor(){
          this.name = 'Atchyut'
    }
printName(){
          console.log(this.name);
     }
}
//using classes
const person = new Person();
person.printName();
person.printGender();

Spread & Rest Operators:

These both operators are defined by the symbol: ‘…’ (three dots)

The Spread operator is used to split up the array elements OR Object properties

Example:

const oldArray = [1,2,3]
const newArray = [...oldArray,4,5]
const newObject = {...oldObject, newProp: 5}

The Rest operator is used to merge a list of function arguments into an array.
Example:

function sortArgs(...args){
    return args.sort()
}
sortArgs(1,2,3)

Destructuring:

Destructuring means, Easily extracting array elements or object properties and store them in variables.

Example:

Array Destructuring:

[a, b] = ['Hello', 'World']
console.log(a) // Hello
console.log(b) // World

Object Destructuring:

{name} = {name: 'Atchyut', age: 25}
console.log(name) // Atchyut
console.log(age) // Undefined

This is first Medium post. Please correct me if something is wrong.
Also add suggestions or doubts in comments.

Catch me on my studio @ www.atchyutn.com