II. Aprendiendo React — ES 6

Continuando con la serie de artículos con el objetivo de aprender React, es necesario detenernos un momento para repasar las nuevas features que proporciona ECMAScript 6.

ECMAScript 6 (ES2015 o ES6) es el estándar definido en el año 2015 que introduce cambios significativos los cuales iré detallando a continuación, hacen más sencilla la programación en JavaScript. Además de acercarse a conceptos ya utilizados en otros lenguajes de programación.

![ES6 logo] (https://miro.medium.com/proxy/1*SL4sWHdjGR3vo0x5ta3xfw.jpeg)

let & const

let nos permite declarar variables dentro de un contexto reducido al bloque donde estamos definiéndola.

var edad = 20;
console.log(edad); // Output: 20

{
  let edad = 25;
  console.log(edad); // Output: 25
}

console.log(edad); // Output: 20

const permite declarar constantes para que sean utilizadas pero no modificadas.

const nombre = 'Iván';
let edad = 29;

if(edad > 18){
  nombre = 'Tomás'; 
  //Se mostrará un error indicando que se quiere realizar una asignación a una constante.
}

Default parameters

Ahora podremos asignar valores por defecto a los parámetros de las funciones. De esta manera, ya no será necesario validar que los parámetros recibidos en la función tengan valores.

const aumentarDePeso(pesoPersona, agregarKilos = 0){
  pesoPersona += agregarKilos;
}

Mientras que con ES5, teníamos que verificar el valor recibido antes de realizar una asignación de este tipo.

function aumentarDePeso (pesoPersona, agregarKilos){
  var kilos = agregarKilos || 0;
  pesoPersona += kilos;
}

Arrow functions

Las arrow functions permiten declarar una función de una manera mucho más simplificada.

const aumentarDePeso = (pesoPersona, agregarKilos = 0) => pesoPersona += agregarKilos;

En el caso que únicamente se tenga un parámetro, se puede prescindir de los paréntesis. Por otro lado, si la función tiene más de una línea su implementación, luego del arrow (=>) el cuerpo de la función va entre llaves ({}).

Classes

A partir de ES6 tenemos una sintaxis más clara y orientada a OOP para la definición de clases. Además se incorpora la herencia entre clases.

class Persona {
  constructor(nombre, edad, peso) {
    this.nombre = nombre;
    this.edad = edad;
    this.peso = peso;
  }
  
  crecer(){
    this.edad++;
  }
  
  engordar(kilos){
    this.peso += kilos;
  }
}

class Atleta extends Persona {
  constructor(nombre, edad, peso, velocidad){
    super(nombre, edad, peso);
    this.velocidad = velocidad;
  }
  
  correr(tiempoDeEjercicio){
    this.peso -= 1;
    return this.velocidad * tiempoDeEjercicio;
  }
}

Template strings

Para interpolar strings ahora se puede hacer de manera mucho más sencilla.

const mensaje = `El nombre de la persona es ${persona.nombre} y tiene ${persona.edad} años.`;

Como podemos observar, ya no es necesario ir cortando el string y concatenando el valor que se quiere incluir.

Destructuring

Similar a lo que nos permite hacer Python, ahora se podrá en una misma declaración realizar asignaciones múltiples de un array u objeto.

const edadesAlumnos = [20, 25, 19];
let [primero, , tercero] = edadesAlumnos;

console.log(primero); // 20
console.log(tercero); // 19

En el caso de los objetos, se pueden obtener los valores de una forma similar, e incluso más reducida en el caso que las variables se llamen igual que las propiedades del objeto.

class Persona {
  constructor(nombre, edad, peso) {
    this.nombre = nombre;
    this.edad = edad;
    this.peso = peso;
  }
}

let persona = new Persona('Ivan', 29);
let {nombre, edad} = persona;

console.log(nombre); // 'Ivan'
console.log(edad); // 29

Rest & spread operator

Particularmente estas nuevas features, nos permiten ganar en comodidad a la hora de definir un número indefinido de parámetros en una asignación.

Supongamos el ejemplo de las edades del curso planteado anteriormente, imaginemos que el primer alumno se dio de baja con lo cual debemos quitarlo del listado. Utilizando una combinación de destructuring y rest podremos hacernos del listado definitivo en una sola línea.

const edadesAlumnos = [20, 25, 19];
let [, ...edadesAlumnosSinElPrimero] = edadesAlumnos;

console.log(edadesAlumnosSinElPrimero); // [25 ,19]

Lo que hicimos fue, tomar el primer valor sin asignarlo a ninguna variable (dado que se dio de baja del curso) y el resto (indicado con la sintaxis ...) asignado a una variable nueva con el listado definitivo.

Ahora bien, imaginemos el caso en que tenemos las listas de los integrantes de cada curso, y queremos obtener el listado completo de alumnos. Para esto, podemos utilizar la feature spread la cual nos dará el resultado esperado en una sola línea.

const alumnosCursoA = ['Ivan', 'Andres', 'Sofia'];
const alumnosCursoB = ['Gabriela', 'Rocio'];

let alumnosInstituto = [...alumnosCursoA, ...alumnosCursoB];

console.log(alumnosInstituto);

Comentarios finales

En este artículo listé las features más importantes y comunes introducidas en ES6 para utilizar con React. Obviamente, que existen más usos de los descritos aquí.

Por esta razón, invito a quien quiera seguir profundizando en el tema vaya a la documentación oficial (que es muy completa) y refleja las diferencias con versiones anteriores para solucionar el mismo problema.