ES6 y cambios respecto a JavaScript

Primero que nada luego de llevar tiempo sin publicar vengo a redactar la siguiente entrada ya que veo muchas dudas respecto a lo que son las novedades de JavaScript. Aún veo mucho código que no utilizan let o const para definir variables de forma correcta (al menos no como se debería) siendo que ES6 ya viene siendo soportado en todos los navegadores modernos. Lo primero es hablar con poco de ECMA

¿Qué es ECMA?
ECMA (European Computer Manufacturers Association) es una organización que se dedica a definir estándares a nivel nacional e internacional.

Entonces... ¿Qué es ECMAScript?
ECMAScript es la especificación que esta organización ha publicado con el fin de estandarizar JavaScript.

Sabiendo esto vamos a comenzar a ver las pequeñas diferencias entre ES5 y ES6, comenzando por las clases:

// ES5
function Persona(nombre, apellido, edad) {
    this.nombre = nombre;
    this.apellido = apellido;
    this.edad = edad;
}

Persona.prototype.cambiarEdad = function(nuevaEdad) {
    this.edad = nuevaEdad;
}

// ES6
class Persona {
    constructor(nombre, apellido, edad) {
        this.nombre = nombre;
        this.apellido = apellido;
        this.edad = edad;
    }

    cambiarEdad(nuevaEdad) {
        this.edad = nuevaEdad;
    }
}

Aunque la funcionalidad sigue siendo la misma, es más fácil leer el código de esta forma, ahora sigamos con las variables....

¿Let, Const o Var?
Anteriormente había explicado el ámbito y contexto de variables (no entrare mucho en detalle por lo que te recomiendo leer la entrada), en vista de como funciona el ámbito dentro de este lenguaje (Scope) se ha cambiado la forma en que estas variables funcionan dentro de los bloques, por ejemplo....

for (....) {
    let foo = "valor";
    var bar = "valor";
}

console.log(foo); //muestra: undefined
console.log(bar); //muestra: valor

Con esto sabemos que let esta diseñado para que el interprete busque esa variable únicamente dentro del bloque correspondiente, por lo que siempre que podamos debemos utilizar let (variable local) en vez de var (variable global), y aún así si queremos utilizar una variable en todo el bloque pudiéramos hacerlo de la siguiente forma:

let foo = 20;
function test() {
    console.log(foo);
}
test();

Por otra parte tenemos const, esto es unicamente para una variable que no será redefinida en ninguna parte del código y que también es accesible dentro del bloque definido, un ejemplo muy especifico es el valor de Pi:

const PI = 3.14;
PI = 123; //Error al sobre-escribir variable constante
alert(PI);

Funciones Arrow
Este quizás es uno de los cambios mas significativos y más notorios dentro del ECMAScript, las Funciones Arrow (o funciones de flecha) no son más que funciones anónimas que no se relacionan con métodos y no pueden ser utilizadas en constructores (como clases). Básicamente es una forma corta de definir una función (OJO: no son un reemplazo para definir functiones, más en StackOverflow). Por ejemplo:

// De forma tradicional
function saludar() {
    alert("Hola Mundo!");
}
saludar();

// Utilizando una variable
let saludar = function() {
    alert("Hola Mundo!");
};
saludar();

// Ahora como una función arrow
saludar = () => {
    alert("Hola Mundo!");
};
saludar();

// También pudiéramos utilizar parámetros
saludar = nombre => {
    alert("Hola, " + nombre);
};
saludar("Mundo");

// Los paréntesis son requeridos si vamos a utilizar varios parámetros
saludar = (nombre, apellido) => {
    alert("Hola, " + nombre + " " + apellido);
};
saludar("Carlos", "Martínez");

Operador de Propagación (...)
Si (Spread Operator), esos 3 puntos que vemos como parámetros en una función, esto no es más que una forma rápida de definir un array de valores, básicamente estamos definiendo una función con múltiples argumentos, por ejemplo:

// Como acostumbramos
function mostrarArray(array) {
    alert(array);
}
mostrarArray([1,2,3]);

// Utilizando el Operador
mostrarArray = (...array) => {
    alert(array);
};
mostrarArray(1, 2, 3);

Array Helpers
Esto es algo que deberiamos utilizar mas seguido ya que nos facilita mucho a la hora de recorrer un array o mapear objetos, por ejemplo, para un simple bucle for/forEach:

// Tipico forEach
var array = [1, 2, 3, 4];
for (var i = 0; i < array.length; i++) {
    console.log(array[i]);
}

// De forma simple
const array = ["manzana", "pera", "banana"];
array.forEach((fruta) => console.log(fruta));

// Utilizando la función como referencia
const items = (item) => { console.log(item) }; // Función Arrow
array.forEach(items);

// ES6
for (const [i, item] of array.entries()) {
    console.log('%d: %s', i, item);
}

También tenemos map, lo cual nos ayuda al momento de mapear un objeto y obtener propiedades especificas, por ejemplo:

const array = [
  { nombre:"Carlos", edad:29 },
  { nombre:"Vanessa", edad:30 }
];
const nombres = array.map(persona => persona.nombre);
alert(nombres);

Y no solo eso, tenemos también utilidades como filter, some o every....

Recibe notificaciones por correo