Core next-gen JavaScript features
Wed 17 Oct 2018

In this article, I introduce some modern syntaxes of JavaScript. If you are backend developer, you need to know these things if you want to get into MERN Stack.

Variable: let & const

Read how to use let here.

Read how to use const here.

let & const (constant) replace var. 

ES6 Arrow Functions

Here. A diffrent way of creating functions in JS.

functioncallMe(name){ 
   console.log(name);
}

Becomes:

// No arg
const callMe = () => { console.log(name); }
// One arg
const callMe = name => { console.log(name); }
// One returning value
const callMe = name => name

Export & Import

There are two types of export

// Default export
export default...;
import whatever from './..'

// Named export
export const myData = ...
import { myData } from ... 

// Many named exports?
import * as types from './actions.js'

Classes

As we know, JS use constructor function and prototypes represent the class. We can make it like any OOP language with ES6.

class Person extends Human {
   constructor() {
      this.name = 'Will';
   }
    
   printName = () => this.name;
}

const will = new Person();
console.log(will.printName());

Spread & Rest Operator

The syntax is three dots: "..."

const oldArray=[1,2,3];
const newArray=[...oldArray,4,5];
// Result is [1, 2, 3, 4, 5];

const oldObject={ name: 'Max'}; 
const newObject={ ...oldObject, age: 28 };
// Result is { name: 'Max', age: 28 }

Destructuring

Easily accessing to the values of array or objects and assign them to variables.

// #1
constarray = [1,2,3];
const [a,b]=array;
console.log(a);//prints1
console.log(b);//prints2
console.log(array);//prints[1,2,3]

// #2
const myObj={
   name: 'Max',
   age: 28
}
const { name, age } = myObj;
console.log(name);//prints'Max'
console.log(age);//printsundefined
console.log(myObj);//prints{name:'Max',age:28

// #3
const printName = (personObj) => {
   console.log(personObj.name);
}
printName({name:'Max',age:28});//prints'Max'