ECMAScript6. Lo Básico

Este artículo hace parte de una serie de artículos tutoriales. si quieres seguir el tutorial, visita este artículo para ver todos los temas disponibles.

La semana pasada terminamos hablando de Babel JS, el transpilador que nos permite usar JSX junto a React. Lo cierto es que este transpilador tiene más funciones que nos permiten extender y hacer uso de muchas de las nuevas funcionalidades de JavaScript, así como también nos brinda uniformidad y compatibilidad con más plataformas.

Hoy vamos a hablar de ECMAScript6 o ECMAScript2015 o ES6 (como lo llamaremos en el resto de este artículo) y de las funcionalidades que usaremos con mayor frecuencia al momento de programar en React.

Nuevas variables

ES6 nos trae dos nuevas formas de declarar variables, const y let. La gran diferencia entre estas 2 formas de declarar variables y la forma antigua, var es que el scope de var es hacia una función mientras que el scope de const y let es hacia un bloque de código.

Además de lo anterior const tiene un característica extra y es que solo se le puede asignar un valor una única vez. Teniendo en cuenta que cuando el valor es un objeto o un arreglo, el objeto o el arreglo en sí, pueden ser modificados.

{
  let es6Variable = 15;
}
const es6Constant = 'Hello world';
const newArray = [1, 2, 3];

Si intentamos acceder al valor de es6Variable por fuera de su bloque, por ejemplo console.log(es6Variable); obtendríamos un error de referencia pues la variable es6Variable no está definida por fuera de su bloque. Lo mismo pasaría si hiciéramos el mismo ejercicio con const.

Así mismo, si intentamos modificar la constante es6Constant de la siguiente manera es6Constant = 'Hello Simon'; obtendríamos un error en tiempo de compilación puesto que las constantes son una referencia de solo lectura. Por otro lado, si intentamos modificar algún elemento del arreglo newArray de la siguiente manera newArray[1] = 5; o newArray.push(4); el valor final de la constante sería [5, 2, 3, 4], nos permite modificar arreglos u objetos, mas no hacer reasignaciones.

El código anterior, después de pasar por BabelJS, compilaría a:

{
  var es6Variable = 15;
}
var es6Constant = "Hello world";
var newArray = [1, 2, 3];

Arrow functions

arrow functions se usan para definir funciones anónimas con 2 grandes características que la diferencia de la forma tradicional de definir una función (con la palabra clave function).

1. this es la misma referencia dentro y fuera de la función. En otras funciones this se puede conectar (bind) con otros objetos. Lo que quiere decir, cuando se hace referencia a this dentro de un arrow function JavaScript empezará a buscar un scope más arriba cada vez hasta encontrar el valor de referencia de this (por defecto el global scope).
2. El objeto arguments no está definido. Para lograr lo mismo debemos usar el spread operator.

const es6Function = (...args) => {
  return arg[0] * arg[1];
};

Características:

• si solo reciben un argumento es posible omitir los paréntesis de los argumentos.

const es6Function = onlyArgument => {
  console.log(onlyArgument);
  return onlyArgument;
};

• si se omiten los corchetes el código, se ejecuta como una expresión y lo que evalúe esta expresión, es lo que retornará la función. Esto solo aplica para funciones de una línea, si se requiere agregar varias líneas de código, debemos usar corchetes y usar la palabra clave return explícitamente.

const es6Sum = (num1, num2) => num1 + num2;
es6Sum(1, 2); //3

Destructuring

Una manera de asignar múltiples llaves o propiedades de un objeto o arreglo simultáneamente. Sé que no es muy claro, pero este es uno de esos momentos en que definitivamente el código tiene muchísimo más sentido que la teoría.

const newArray = [1, 2, 3];
let [one, two, three] = newArray;
const newObject = {
  name: 'Simon',
  hobby: 'React'
};
let { hobby, name } = newObject;

En este código estamos creando tres variables one, two, three y a cada una le estamos asignando cada uno de los valores correspondientes del arreglo. Lo mismo para newObject, creamos 2 variables hobby y name y les asignamos a cada una la llave correspondiente. Esto sería lo mismo que el siguiente código:

var newArray = [1, 2, 3];
var one = newArray[0],
var two = newArray[1],
var three = newArray[2];
var newObject = {
  name: "Simon",
  hobby: "React"
};
var hobby = newObject.hobby,
var name = newObject.name;

Importaciones y Exportaciones

import y export proveen un manejo más avanzado de módulos en JavaScript. Es posible importar/exportar funciones, objetos o valores primitivos. Existen 2 maneras de hacerlo: nombradas y por defecto.

• exportaciones/importaciones nombradas: son muy buenas para exportar/importar varios valores al mismo tiempo. Es necesario usar el mismo nombre para exportar como para importar.

export { functionOne, objectTwo, valueThree }; // inside app.js
import { functionOne, objectTwo, valueThree } from 'app'; // inside other.js

• exportaciones por defecto: solo puede haber una por módulo. se puede importar con cualquier nombre, no tiene que se el mismo que se usó para la exportación.

export default ClassDefault; // inside app.js
import Class from 'app'; // inside other.js

También es posible hacer una mezcla de ambos métodos:

// inside app.js
const number = 15;
export number;
const es6Function = (num) => num; 
export default es6Function;
// inside other.js
import es6Function, { number } from 'app';

Parametros o argumentos por defecto

Es posible asignarle un valor predeterminado a los argumentos de una función a la hora de declarar la misma. Estos valores son tomados cuando al momento de invocar una función, sus valores son indefinidos.

const defaultParameters = (num1=5, num2=7) => {
  return num1 + num2;
};
console.log(defaultParameters(1, 2)); // 1 + 2 = 3
console.log(defaultParameters(1)); // 1 + 7 = 8 (7 por defecto)
console.log(defaultParameters()); // 5 + 7 = 12 (5 y 7 por defecto)

Clases

Las clases, creadas con la palabra clave class no son más que funciones. En realidad, el principal objetivo de las clases es cambiar un poco (o mucho), para bien o para mal, la sintaxis existente de objetos, prototipos y herencia.

Durante este curso aprenderemos más sobre esta sintaxis, ¿Qué podemos y qué no podemos hacer? y los beneficios de esta al momento de usar React.

Template literals

Son cadenas de texto que nos permiten:

• escribir en varias líneas.

const es6String = `
  Hello world,
  I'm a multiline
  Template literal.
`;

Anteriormente:

var oldString = "\n  Hello world,\n  I'm a multiline\n  Template literal.\n";

• interpolar o insertar código en la misma cadena de texto.

const name = 'Simon';
const es6String = `Hello ${name}`;
console.log(es6String); // Hello Simon

En resumen

Al igual que con JSX, el uso de ES6 no es obligatorio al momento de usar React. Pero poco a poco iremos viendo sus beneficios. ES6 nos brinda un amplio repertorio de nuevas funcionalidades y nuevas formas de hacer cosas con JavaScript.