Introducción a ES6

ES6 o ECMAScript 2015 es la sexta ^versión del lenguaje de programación ECMAScript. ECMAScript es la estandarización de Javascript que se lanzó en 2015 y, posteriormente, se renombró como ECMAScript 2015.
ECMAScript y Javascript son de naturaleza diferente.
 

ECMAScript frente a Javascript

ECMAScript: Es la especificación definida en ECMA-262 para crear un lenguaje de secuencias de comandos de propósito general. En términos simples, es una estandarización para crear un lenguaje de secuencias de comandos. Fue presentado por Ecma International y es básicamente una implementación con la que aprendemos cómo crear un lenguaje de scripting. 
 Javascript: un lenguaje de secuencias de comandos de propósito general que cumple con la especificación ECMAScript. Es básicamente una implementación que nos dice cómo usar un lenguaje de secuencias de comandos.

ES6

Javascript ES6 existe desde hace algunos años y nos permite escribir código de una manera inteligente, lo que básicamente hace que el código sea más moderno y más legible. Es justo decir que con el uso de las funciones de ES6 escribimos menos y hacemos más, por lo tanto, el término «escribir menos, hacer más» definitivamente se adapta a ES6. 
ES6 introdujo varias características clave como const, let, funciones de flecha, literales de plantilla, parámetros predeterminados y mucho más. Echemos un vistazo a ellos uno por uno.
«const» y «let» 
Antes de ES6 principalmente utilizábamos la palabra clave var cuando queríamos declarar una variable. Pero tenía algunos problemas graves, además, no era el favorito de los desarrolladores, por lo que en la versión ES6, se nos presentó a const y dejamos palabras clave que nos permiten almacenar variables. Ambos tienen su propia forma de almacenar variables.
 

const : la palabra clave const se usa principalmente para almacenar esa variable cuyo valor no se va a cambiar. Considere un ejemplo en el que está creando una aplicación web en la que desea almacenar una variable cuyo valor no va a cambiar, entonces const es definitivamente la mejor opción para almacenar esa variable. En javascript, const se considera más poderoso que var. Una vez que se usa para almacenar una variable, no se puede reasignar. En palabras simples, es una variable inmutable , excepto cuando se usa con objetos.
Ejemplo :

// Const 
const name = 'Mukul';
console.log(name); // Will print 'Mukul' to the console.
  
// Trying to reassign a const variable
name = 'Rahul';
console.log(name); // Will give TypeError.

Salida:
en el código anterior, declaramos un nombre de variable con la palabra clave const y luego consola. Regístrelo, lo que funciona bien, pero reasignarlo con algún otro valor dará un error. Ahora veamos un ejemplo donde declaramos un objeto usando la palabra clave const .
 

// Object using const
const person ={
    name:'Mukul Latiyan',
    age:'21',
    isPlaced:true
};
  
console.log(person.name); // 'Mukul Latiyan'
person.name = 'Mayank';
  
console.log(person.name); //'Mayank'

Salida:
Las propiedades de los objetos declarados usando las palabras clave const son mutables, como en el código anterior declaramos un objeto de persona con algunas propiedades como nombre, edad, isPlaced . Cuando intentamos acceder a las propiedades, todo funciona bien, también cuando cambiamos la propiedad del nombre, también funciona bien. Por lo tanto, llegamos a la conclusión de que las propiedades del objeto son mutables incluso cuando se declaran con la palabra clave const. 
let : en el caso de la palabra clave let, las variables declaradas serán mutables, es decir, sus valores se pueden cambiar. Funciona de manera similar a la palabra clave var con algunas diferencias clave, como el alcance, lo que la convierte en una mejor opción en comparación con var.

// let
let name = 'Mukul';
console.log(name); // Mukul
  
name = 'Rahul';
console.log(name); // Rahul

Salida:
los objetos también son mutables. Me gusta: 

// Object using let
let bike = {
    name : 'Ninja ZX-10R',
    engine:'998cc',
    abs : 'dual channel'
};
  
console.log(bike.engine); // 998cc
  
bike.engine = '789cc';
console.log(bike.engine); // 789cc

Producción: 
 

Funciones de flecha

Las funciones de flecha (también conocidas como «funciones de flecha gruesa») son una sintaxis más concisa para escribir expresiones de función. Presentadas en ES6, las funciones de flecha son definitivamente uno de los cambios más impactantes en javascript. Estas expresiones de función hacen que su código sea más legible, más moderno. 
 

// ES5
function printName(name){
    console.log('Hello '+name);
}
  
printName('Mukul'); // Hello Mukul

Producción:

En lugar de usar esto, use el siguiente código: 
 

// ES6
const printName = name =>{
    return `Hi ${name}`; // using template literals
}
console.log(printName('Mukul')); // Hi Mukul
  
// We can also write the above code without 
// the return statement
const printName1 = name => `Hi ${name}`;
  
console.log(printName1('Mukul')); // Hi Mukul

Producción: 
 

Plantilla literal

Los literales de plantilla son una característica de ES6 que nos permite trabajar con strings de una mejor manera en comparación con ES5 y versiones anteriores. Simplemente usando literales de plantilla, podemos mejorar la legibilidad del código. Antes de ES6, usábamos el operador ‘+’ cada vez que queríamos concatenar strings y también cuando queríamos usar una variable dentro de una string, lo que definitivamente no es un método recomendado. Los literales de plantilla usan comillas invertidas («) en lugar de las comillas simples o dobles que hemos usado con strings regulares.

// ES5
var name = 'Mukul Latiyan';
console.log('My name is '+ name); 
  
// ES6
const name1 = 'Mukul Latiyan';
console.log(`My name is ${name1}`); 

Producción: 
 

Destrucción de objetos y arrays

Destruir en javascript básicamente significa descomponer una estructura compleja (objetos o arrays) en partes más simples. Con la asignación de destrucción, podemos ‘descomprimir’ objetos de array en un montón de variables.
 

Destrucción de objetos

// ES5
const college = {
    name : 'DTU',
    established : '1941',
    isPrivate : false
};
  
let name = college.name;
let established = college.established;
let isPrivate = college.isPrivate;
  
console.log(name); // DTU
console.log(established); // 1941
console.log(isPrivate); // false

Producción: 
 

La nueva forma de hacer esto usando ES6 es: 
 

// ES6
const college = {
    name : 'DTU',
    established : '1941',
    isPrivate : false
};
  
let{name,established,isPrivate} = college;
  
console.log(name); // DTU
console.log(established); // 1941
console.log(isPrivate); // false

Producción: 
 

Entonces, en lugar de declarar variables por separado para cada propiedad de un objeto, solo ponemos nuestros valores entre corchetes para obtener cualquier propiedad del objeto.
 

destrucción de array

En caso de destrucción de arrays, simplemente podemos reemplazar los corchetes con corchetes. 
Me gusta: 
 

// ES6
const arr = ['lionel','messi','barcelona'];
  
let[value1,value2,value3] = arr;
  
console.log(value1); // lionel
console.log(value2); // messi
console.log(value3); // barcelona

Producción: 
 

Parámetros predeterminados

Los parámetros predeterminados le permiten definir un parámetro por adelantado, lo que puede ser útil en ciertos escenarios. En javascript, el parámetro de función predeterminado es indefinido. Sin embargo, es útil establecer un valor predeterminado diferente. Antes de ES6, la forma en que solíamos definir los parámetros predeterminados era probando el valor de los parámetros en el cuerpo de la función predeterminada y asignando un valor si no están definidos. 
 

// ES5
function fun(a,b){
    return a+b;
}
  
console.log(fun(2,1)); // 3
console.log(fun(2)); // 2 + undefined is NaN(not-a-number)

Producción: 
 

Eliminamos este error de parámetro predeterminado como este: 
 

// ES5(improved)
function fun(a,b){
    b = (typeof b!=='undefined')?b:1;
    return a + b;
}
  
console.log(fun(2,1)); // 3
console.log(fun(2)); // 3

Producción: 
 

Después de ES6, simplemente podemos escribir: 
 

// ES6
function fun(a,b=1){
    return a + b;
}
  
console.log(fun(2,1)); // 3
console.log(fun(2)); // 3

Producción: 
 

Clases

Las clases son el núcleo de la programación orientada a objetos (POO). ES6 introdujo clases en javascript. Las clases en javascript se pueden usar para crear nuevos objetos con la ayuda de un constructor, cada clase solo puede tener un constructor dentro. 
 

// classes in ES6
class Vehicle{
    constructor(name,engine){
        this.name = name;
        this.engine = engine;
    }
}
  
const bike1 = new Vehicle('Ninja ZX-10R','998cc');
const bike2 = new Vehicle('Duke','390cc');
  
console.log(bike1.name); // Ninja ZX-10R
console.log(bike2.name); // Duke

Producción:

Parámetro de reposo y operador de propagación

• Parámetro de descanso : La sintaxis del parámetro de descanso nos permite representar un número indefinido de argumentos como una array. Con la ayuda de un parámetro de descanso, se puede llamar a una función con cualquier número de argumentos, sin importar cómo se haya definido. 
   

  javascript

  // simple function function fun(a,b){     return a + b; }    console.log(fun(1,2)); // 3 console.log(fun(1,2,3,4,5)); // 3

  Salida:
  
  en el código anterior, no se generará ningún error incluso cuando pasemos más argumentos que los parámetros, pero solo se evaluarán los dos primeros argumentos. Es diferente en el caso del parámetro de descanso.

  javascript

  // ES6 rest parameter function fun(...input){     let sum = 0;     for(let i of input){         sum+=i;     }     return sum; }    console.log(fun(1,2)); // 3 console.log(fun(1,2,3)); // 6  console.log(fun(1,2,3,4,5)); // 15

  Salida: Operador de extensión : el operador de extensión es otro operador proporcionado por ES6 que nos permite el privilegio de obtener una lista de parámetros de una array. Considere un ejemplo en el que tenemos una lista de números y devolvemos el número mínimo de esa lista. Algo como:

  javascript

  console.log(Math.min(1,2,3,-1)); // -1

  Salida:
  
  ahora considere que tenemos una array en lugar de una lista, este método de objeto matemático anterior no funcionará y devolverá NaN, como: 

  javascript

  // Without spread  let arr = [1,2,3,-1];    console.log(Math.min(arr)); // NaN

  Salida: cuando se usa …arr en la llamada de función, “expande” un objeto iterable arr en la lista de argumentos.
  Para evitar esta salida de NaN, podemos usar el operador de propagación, como: 
   

  javascript

  // Spread operator let arr = [1,2,3,-1];    console.log(Math.min(...arr)); // -1

  Producción:
  

  Tanto el operador spread como el rest hacen uso de puntos triples (…), ya veces es difícil diferenciar cuál es el resto o el spread. Simplemente recuerda que:

  Cuando… está al final del parámetro de función, es el parámetro de descanso.

• Cuando … ocurre en una llamada de función o similar, se llama operador de propagación.