He decidido recopilar una lista no exhaustiva de las características (en inglés, features) que se han ido añadiendo a JavaScript (en adelante, JS) en sus diferentes versiones a partir de ES6. ¡Vamos allá!
FEATURE | EXPLICACIÓN |
|---|---|
rest parameterES6 | Agrupa los parámetros de una función y los convierte en un único parámetro-array. Como ejemplo, vamos a crear una función que duplique los números que le pasemos. const funct = (...parameter) => { // do something };
const double = (...numbers) => {
console.log(numbers);
};
const result = double(1, 4, 3, 2, 9, 3, 8, 7);
// > (8) [1, 4, 3, 2, 9, 3, 8, 7]
Vayamos más allá que un simple console.log, y creemos un nuevo array usando el método map().
const double = (...numbers) => {
console.log(numbers);
return numbers.map(numb => numb * 2);
};
const result = double(1, 4, 3, 2, 9, 3, 8, 7);
console.log(result);
// > (8) [1, 4, 3, 2, 9, 3, 8, 7]
// > (8) [2, 8, 6, 4, 18, 6, 16, 14]
|
spread operatorES6 | Con arrays Funciona de manera parecida al rest parameter, pero de manera opuesta. Es decir, toma un array y rompe e individualiza cada elemento del array. const people = ['Rachel', 'Ross', 'Chadler']; console.log(...people); // Rachel Ross Chadler Podemos utilizarlo para unir arrays, por ejemplo. const people = ['Rachel', 'Ross', 'Chadler']; const friends = ['Monica', 'Joey', 'Phoebe', ...people]; console.log(friends); // (6) ["Monica", "Joey", "Phoebe", "Rachel", "Ross", "Chadler"] Con objetos Si intentamos crear un clon de un objeto, hacer esto no funcionaría:
const person = { name: 'Joey', age: 31, job: 'actor' };
const personClone = person;
Porque los objetos son reference types, lo que significa que la variable personClone crea un nuevo pointer que apunta al objeto person, pero no crea un objeto nuevo. ¿No te queda claro este tema? Lo que podemos hacer es crear una copia completa del objeto person, creando así un objeto nuevo. De esta manera, lo que estamos copiando es el objeto person, y no el pointer.
const person = { name: 'Joey', age: 31, job: 'actor' };
const personClone = {...person};
console.log(personClone);
// {name: "Joey", age: 31, job: "actor"}
|
setsES6 | Los sets son una nueva categoría de datos (en inglés, data types). Entran dentro del grupo de los objetos, por tanto, son reference types. Los sets nos permiten almacenar listas (o sets Aquí un array perfectamente válido, con dos elementos iguales: const namesArr = ['sheldon', 'howard', 'penny', 'howard']; console.log(namesArr); // (4) ["sheldon", "howard", "penny", "howard"] Si ahora le pasamos ese array a un set, JS sólo registrará uno de los howard.
const namesSet = new Set(['sheldon', 'howard', 'penny', 'howard']);
console.log(namesSet);
// Set(3) {"sheldon", "howard", "penny"}
No existe ningún atajo para crear sets, es decir, no podemos usar corchetes como haríamos para crear un array, por ejemplo. Podemos pasarle tanto el contenido de un array, como tenemos arriba, como el nombre del array: const namesSet = new Set(namesArr); Y el resultado sería el mismo. Son útiles cuando tenemos una serie de datos y queremos eliminar duplicados. Sin embargo, esto nos deja con un set en lugar de con un array. Para volver a tener un array, podemos usar el spread operator. const uniqueNames = [...namesSet]; console.log(uniqueNames); // (3) ["sheldon", "howard", "penny"] Podemos simplificar el proceso haciendo: const namesArr = ['sheldon', 'howard', 'penny', 'howard']; const uniqueNames = [...new Set(namesArr)]; console.log(uniqueNames); // (3) ["sheldon", "howard", "penny"] Tienen sus propios métodos y propiedades. Por ejemplo, para añadir valores a un set:
const ages = new Set();
ages.add(23);
ages.add(30);
console.log(ages); // Set(2) {23, 30}
También se pueden encadenar métodos:
const ages = new Set();
ages.add(23);
ages.add(30).add(33);
console.log(ages); // Set(2) {23, 30, 33}
Para borrar elementos usamos el método delete:
const ages = new Set();
ages.add(23);
ages.add(30).add(33);
ages.delete(23);
console.log(ages); // Set(2) {30, 33}
Para averiguar cuántos elementos hay en un set, usamos la propiedad size, que sería el equivalente a length en los arrays:
console.log(ages, ages.size); // Set(2) {30, 33} 2
Para comprobar si un set contiene un valor X, usamos el método has(), que devuelve un boolean: console.log(ages.has(30)); // true Para borrar todos los valores de un set, usamos el método clear():
ages.clear();
console.log(ages); // Set(0) {}
Podemos usar loops sobre ellos, porque son iterables. En este ejemplo, usamos un set al que le pasamos un array de objetos.
const friends = new Set([
{ name: 'Ross', age: 32 },
{ name: 'Monica', age: 30 },
{ name: 'Rachel', age: 29 }
]);
friends.forEach(friend => {
console.log(friend.name, friend.age);
});
// Ross 32
// Monica 30
// Rachel 29
|
symbolsES6 | Los symbols son un nuevo data type, así que los puedes encontrar bien explicados en esta sección de esta guía completa sobre data types. |
clasesES6 | Las clases son la versión moderna de la herencia basada en prototipos. Una característica fantástica que añade simplicidad al lenguaje. Aquí tienes una guía completa al respecto. |
arrow functionsES6 | Una manera moderna de escribir funciones, que sintetiza nuestro código y hace que se vea más limpio. Aquí tienes más información al respecto. |
Pues aquí tienes una 
) de valores únicos, es decir, un valor X sólo puede estar presente una única vez en un set. Son estructuras parecidas a los arrays, pero sin permitir valores duplicados. THE END!
¡Y hasta aquí esta guía sobre las características de ES6 y más allá! Intentaré mantenerla lo más actualizada posible. 
Espero que hayas aprendido algo nuevo 
. Si te queda alguna duda, ¡nos vemos en los comentarios!
Otros artículos que pueden interesarte