ReactJS ES6

ES6, también conocido como ECMA script 2015, es un lenguaje de secuencias de comandos basado en la especificación y estandarización de ECMA International Company en ECMA-262 e ISO/IEC 1623. Es la sexta edición del estándar de especificación del lenguaje ECMAScript. Fue creado para estandarizar el lenguaje JavaScript para traer múltiples implementaciones. Ha introducido varias características nuevas, como un nuevo ciclo para iterar sobre arrays, variables de ámbito de bloque, literales de plantilla y muchos más cambios para facilitar la programación de JavaScript. ECMA Script se usa más comúnmente para secuencias de comandos del lado del cliente, específicamente en la World Wide Web. Tiene una gran demanda para escribir aplicaciones basadas en servidor y servicios más amplios haciendo uso de node.js.

Definición: ES6 es el lenguaje de programación de secuencias de comandos ECMA, la próxima versión después de la 5 se lanzó en 2015. Se utiliza para crear los estándares para el lenguaje JavaScript de modo que pueda traer múltiples implementaciones independientes.

¿Cómo usar ES6?  
ES6 suele ser compatible en muchos lugares, pero tiene el problema de Internet Explorer. Entonces, mientras comienza a escribir con el estilo ES6, no puede estar seguro de si el navegador de todos se comportará de la misma manera.

Hoy en día, ES6 se compila a la sintaxis ES5 ‘regular’ con la ayuda de una utilidad como Babel. Babel es un compilador que ayuda a convertir su código de desarrollo que está escrito en ES6 al código que se ejecutará en su sitio de producción, a menudo incluido y minimizado con el paquete web también.

Trabajo: Usted escribe sus archivos ‘ .js ‘ en el entorno de desarrollo y puede usar cualquier sintaxis ES6 que desee. En lugar de cargarlos directamente, configura un paquete web para cargar archivos js con Babel. A menudo, querrá ejecutar webpack-dev-server, por lo que esto sucede automáticamente cuando realiza cambios. Ahora, en lugar de cargar index.js, carga bundle.js, que tiene todo su código.

palabra clave let: ES6 ha introducido la nueva palabra clave let para declarar variables. Antes de que se introdujera ES6, la única forma de declarar una variable era usar la palabra clave var . 

Las variables declaradas con la palabra clave var tienen un alcance funcional, mientras que las variables declaradas con la palabra clave let tienen un alcance de bloque. Además, las variables se elevan en la parte superior dentro de su alcance si se declaran con la palabra clave var , pero no se elevan cuando las variables se declaran con la palabra clave let .

El alcance del bloque significa mezclar todas las declaraciones de JavaScript en un solo bloque. Crea un nuevo alcance entre un par de corchetes, es decir, {}. Entonces, si declara una variable usando la palabra clave let , no existirá fuera de ese ciclo. Veamos un ejemplo:

// ES6 Syntax
for(let i = 0; i < 10; i++) {

   // Prints '0,1,2,.....9'
   console.log(i);
}

// Prints 'undefined'
console.log(i);  

// ES5 Syntax
for(var i = 0; i < 10; i++) {

   // Prints '0,1,2,.....9'
   console.log(i); 
}

// Prints '10'
console.log(i); 

Por lo tanto, puede ver que la variable i en la sintaxis de ES6 no es accesible fuera del ciclo for. Esto tiene la ventaja de usar el mismo nombre de variable varias veces, ya que el alcance se limita al bloque, es decir, {}.

Palabra clave const: La palabra clave const se utiliza para definir constantes. Las constantes son de solo lectura, lo que significa que no puede reasignarles ningún valor nuevo. También tienen un alcance de bloque como la palabra clave let .

// Creating a constant variable
const PI = 3.14;

// Prints '3.14'
console.log(PI); 

// Throws an Error
PI = 777; 

Ejemplo: código para ilustrar cómo cambiar las propiedades del objeto o los elementos de la array como se muestra a continuación:

// Sample object with some properties
const Branch = {name: "IT", students: 55};

// Prints 'IT'
console.log(Branch.name); 

// Changing the object property value
Branch.name = "CSE";

// Prints 'CSE'
console.log(Branch.name); 

// Sample array with some values
const Fruits = ["apple", "mango", "banana"];

// Prints 'apple'
console.log(Fruits[0]); 

// Changing array element
Fruits[0] = "grapes";

// Prints 'grapes'
console.log(Fruits[0]); 

bucle for-of: el bucle for-of se utiliza para iterar sobre arrays o cualquier otro objeto iterable con mucha facilidad. Además, utilizando este tipo de bucle se ejecuta cada elemento del objeto iterable dentro del bucle. 

Ejemplo: código para ilustrar cómo usar el bucle for-of en ReactJs como se muestra a continuación:

// Iterating over array
let colors = ["red", "blue", "green", 
        "yellow", "pink", "purple"];

// Using the for-of loop
for (let color of colors) {

   // Prints 'red,blue,green,yellow,pink,purple'
   console.log(color); 
}

// Iterating over string
let name = "Alpha Charlie";

// Using the for-of loop 
for(let character of name) {

   // Prints 'A,l,p,h,a, ,C,h,a,r,l,i,e'
   console.log(character); 
}

Literales de plantilla: los literales de plantilla ayudan a proporcionar una manera fácil y limpia de escribir varias líneas de strings y realizar la interpolación de strings. También ha facilitado la incorporación de variables o expresiones en una string en cualquier lugar.

Ahora, los caracteres Back-ticks(` `) se utilizan para crear literales de plantilla en lugar de comillas simples y dobles. Las variables y expresiones se pueden colocar dentro de la string utilizando la sintaxis de literales de plantilla.

Ejemplo: uso de string multilínea en ES6.

// Multi-line string in ES6
let str = `Jack and Jill
   went up the hill.`;

// Sample values
let a = 30;
let b = 10;

// String with embedded variables
// and expression
let answer = 
  `The difference of ${30} and ${10} is ${a-b}.`;

// Prints 'The difference of 30 and 10 is 20.'
console.log(answer); 

Ejemplo: uso de string multilínea en ES5.

// Multi-line string in ES5
var str = 'Jack and Jill\n\t'
   + 'went up the hill.';

// Sample values
var a = 30;
var b = 10;

// Creating string using variables
// and expression
var answer = 'The difference of ' + a 
    + ' and ' + b + ' is ' + (a-b) + '.';

// Prints 'The difference of 30 and 10 is 20.'
console.log(answer); 

Funciones de flecha: las funciones de flecha han hecho que sea muy fácil crear funciones. Es un cierre de expresión que crea funciones agradables y compactas, especialmente cuando se trabaja con devoluciones de llamada, listas o manejo de errores.

// Arrow functions
arr.map((func) => {
  return func + 1;
});

Además, no necesita los paréntesis si pasa solo un argumento. Además, sin paréntesis ni declaraciones de retorno si solo devuelve un valor:

arr.map(func => func + 1);

Sin usar funciones de flecha, la sintaxis sería así:

// Without Arrow functions
arr.map(function (func) {
  return func + 1;
});