Difference between ES 5 and ES 6

Let me summarises the difference es5 vs es6

Template literals

`Renu`By using the template literal ( ), it becomes unnecessary to escape special characters and describe consolidation operators.
Also, within a template literal ${variable}, variables can be described as they are.

ES5

var name = "Renu";
var age = 9;
console.log ("My name is \" "+ name +" \ "and I 'm" + age + "years old.");
// My name is "Renu" and I 'm 9 years old.

ES6

let name = 'Renu';
let age = 9;
console.log(`My name is ${name}, I'm ${age} years old .`);
// My name is "Renu" and I 'm 9years old.

Arrow function

Function declaration in ES 5

There are three methods of function declaration in ES5.

Normal function instruction

function str (arg1, arg2) {
  console.log ('Renu');
}

Function constructor (not used much)

var str = new Function ("arg1", "arg2", "console.log ('Renu')");

Function literals (using anonymous functions)

var str = function (arg1, arg2) {
  console.log ('Renu');
}

Arrow function declaration

In ES 6, it is possible to simply describe function literals by using arrow functions.
Note that thisthe behaviors described below are different from function literals .

var str = (arg1, arg2) => {
  console.log ('Renu');
}

Arrow functions, only if there is only one argument,

var str = arg1 => console.log (arg1);

()You can omit the argument as in (like in the case of 0 arguments can not be omitted).
Also, when it fits in one line as in the above example, you {}may omit it.

If the Arrow function returns an object literal,

var str = func => ({id: '8'});

It ()is necessary to enclose the whole as shown in .

Behavioral difference of this

(1) Method call

var obj = {
  value: 10,
  show: function () {
    console.log (this.value); // 10
  }
}
obj.show ();

In a method that is a function associated with an thisobject, means a calling object.
That is, the case of the above thisare objare in, this.valuethe teeth obj.valuepoints to.

(2) Function call

function func () {
  var value = 2;
  console.log (this.value) // undefined
}
func ();

When calling an ordinary function as described above, (even function declared in the object) thispoints to global.
For this reason, this.valuewe do not refer to the value value in the function in the function, and see the global value value (undefined). var value = 1;If you write it outside the function , the result is 1.

(3) Calling the constructor

function Obj (value) {
  this.value = value;
}
var obj = new Obj (0);
console.log (obj.value); // 0

If instantiated in the constructor, thisis the generated instance.
In the case of this time, thisthe teeth objrefers to.

(4) apply, call, bind

var obj = {
  value: 1,
  show: function () {
    console.log (this.value);
  }
};
var newObj = {
  value: 5
};
obj.show (); // 1
obj.show.call (newObj); // 5
obj.show.apply (newObj); // 5

callapplyBy using methods you can bind the value of the first argument to this.
That is, newObj = { value: 5 }but thisbecause of, the this.valuevalue 5changes.

Arguments to be passed to the function after the second argument. Pass in ascending callorder, applyas array. Also, bindwhen using methods, write as follows ( thisgenerate a function that binds).

var newFunc = obj.show.bind (newObj);
newFunc ();

(5) Arrow function [ES 6 ~]

In the arrow function, the scope when the function is declared thisis automatically bound.

var obj = {
  value: 10,
  // Method call
  show: function () {
    console.log (this.value); // 10
    // Function call
    function show_ 01 () {
        console.log (this.value); // undefined
    }
    show_ 01 ();
    // Arrow function
    var show _ 02 = () => {
        console.log (this.value); // 10 this refers to obj
    }
    show_02 ();
  }
}
obj.show ();

Declaring variables

var, let, const

In ES6, it became possible to use the varnew letconstsyntax in addition to the conventional one.

let...... Unable
constto re-declare variables ...... Can not redeclare and reassign variables

varVariable declaration using, for example, does not cause an error even in the following cases.

var x = 10;
x = 15;
console.log (x); // 15
var x = 12;
console.log (x); // 12

let, You can not declare variables with the same name as variables once declared as shown below (you can reassign variables).

let x = 10;
x = 15;
console.log (x); // 15
let x = 12; // Identifier 'x' has already been declared

Also, consthas a role like a constant, and reassignment to a variable initialized once is not allowed.

const x = 10;
console.log (x); // 10
x = 15; // TypeError: Assignment to constant variable.

However, constif you declare a reference type (object or array) with, you can not replace the reference itself, but you can change the contents of the reference.

var ary 1 = () => {
    const aryFalse = [1, 2, 3];
    aryFalse = [4, 5, 6]; // Error
    console.log (aryFalse);
}
ary1 (); // Error
var ary 2 = () => {
    const aryTrue = [1, 2, 3];
    aryTrue [1] = 10;
    console.log (aryTrue);
}
ary2 (); // [1, 10, 3]

Block scope of variables

letconstIf you declare within a block enclosed in {, if}, etc., you can not refer to those variables outside the block.

if (true) {
    var i = 0;
}
console.log (i); // 0
if (true) {
    let j = 10;
}
console.log (j); // ReferenceError
if (true) {
    const k = 100;
}
console.log (k); // ReferenceError

letconstA variable (constant) declared outside the block can be referred to from within the block.

const i = 5;
if (true) {
    sonsole.log (i); // 5
}

module

Before ES 5, basically it was impossible to manage and develop by dividing each JS file for each function. However, with ES 6 you can import another file.

(Postscript) It var obj = obj || {}seems that it is possible to do using a name space pattern .

require

js / - - - script.js 
      |
      --- slider.js

In the case of a file configuration such as

index.html

< script  src = "slider.js" > </ script > 
< script  src = "script.js" > </ script >

I wrote what I was writing,

script.js

var  slider  =  require (. / slider . js );

By doing so, slider.jsyou can import ( ./slidermay be written as).
In this way, requireyou can read the file itself by using.

(Postscript) require has existed as CommonJS specification since the time of ES 5. However, browser still browserifydoes not support yet ( without conversion process using etc).

import / export

A module is a group of programs for realizing a certain function, and it refers to a group of variables / functions to be passed to another file.
When loading a module such as a class to be described later, importit exportcan be realized by using and .

When exchanging only one module

Load module
import 'importoldname' from 'File path'

Output of module
export default 'module'

script.js

import  Carousel  from  '. / carousel ' ; 
const  carousel  =  new  Carousel ();

carousel.js

export  default  class  Carousel  { 
    constructor ()  { 
        this . calc (); 
    } 
    calc ()  { 
        console . log ( 10 ); 
    } 
}

When multiple modules are handed over

On the output side, exportattach the things you want to deliver , and the import side should write
import {a1, a2, ...} from 'file path'
like this.

script.js

import  { multi ,  SuperMulti }  from  './Multiply' ; 
console . log ( multi ( 5 ));  // 50 
console . log ( SuperMulti ( 6 ));  // 600

multiply.js

export  const  i  =  10 ;
export  function  multi ( x )  { 
    return  i  *  x ; 
}
export  function  superMulti ( x )  { 
    return  i  *  x  *  10 ; 
}

If you pass all modules,
import * as 'object name ' from 'file path'
you can write on the import side .
In the case of the above example, write as follows.

script.js

import  *  as  lib  from  './multiply' ; 
console . log ( lib . multi ( 5 ));  // 50

class

Class declaration

In ES 5, class definitions realized by using prototype can be written by introducing the class instruction in ES 6.

ES5

var Add = function (arg1, arg2) {
    this.arg1 = arg1;
    this.arg2 = arg2;
};
Add.prototype.calc = function () {
    return this.arg1 + '+' + this.arg2 + '=' + (this.arg1 + this.arg2);
};
var num = new Add (5, 8);
console.log (num.calc ()); // 5 + 8 = 13

ES6

class Add {
    constructor (arg1, arg2) {
        this.arg1 = arg1;
        this.arg2 = arg2;
    }
    calc () {
        return this.arg1 + '+' + this.arg2 + '=' + (this.arg1 + this.arg2);
    }
}
var num = new Add (5, 8);
console.log (num.calc ()); // 5 + 8 = 13

Class inheritance

Class inheritance and overriding supercan now be done using.

ES 5 (premise that Ad is already declared)

var AddSquare = function (arg1, arg2) {
    Add.call (this, arg1, arg2);
};
Object.assign (AddSquare.prototype, Add.prototype);
AddSquare.prototype = {
    calc: function () {// Method can not be omitted
        Add.prototype.calc.call (this);
    },
    calcSquare: function () {
        this.pow = Math.pow (this.arg1 + this.arg2, 2)
        return '(' + this.arg1 + '+' + this.arg2 + ') ^ 2 =' + this.pow;
    }
};
var numSquare = new AddSquare (5, 8);
console.log (numSquare.calc ()); // 5 + 8 = 13
console.log (numSquare.calcSquare ()); // (5 + 8) ^ 2 = 169

ES 6 (Assumption that Ad class is already declared)

class AddSquare extends Add {
    constructor (arg1, arg2) {
        super (arg1, arg2);
    }
    calc () {// Optional for each method
       super.calc ();
    }
    calcSquare () {
        this.pow = Math.pow (this.arg1 + this.arg2, 2)
        return '(' + this.arg1 + '+' + this.arg2 + ') ^ 2 =' + this.pow;
    }
}
var numSquare = new AddSquare (5, 8);
console.log (numSquare.calc ()); // 5 + 8 = 13
console.log (numSquare.calcSquare ()); // (5 + 8) ^ 2 = 169