PORTADA de ES6 en adelante

De ES6 en adelante – Recopilación de nuevas características añadidas a JavaScript

He decidido recopilar una lista no exhaustiva de las características (en inglés, featuresque se han ido añadiendo a JavaScript (en adelante, JS) en sus diferentes versiones a partir de ES6. ¡Vamos allá! 🤓

FEATURE

EXPLICACIÓN

rest parameter

ES6

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.

Esta feature es útil cuando no sabemos cuántos parámetros queremos pasarle a una función.

SINTAXIS:

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

ES6

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? 😕 Pues aquí tienes una guía completa sobre los data types.


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"}

sets

ES6

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 😉) 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.  


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

symbols

ES6

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.

clases

ES6

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 functions

ES6

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.

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!

Y si crees que este post puede serle útil a alguien, ¡compártelo!

Otros artículos que pueden interesarte

Días del 353 al 386
Objetivos versus realidad Y nuevamente, llegó otro día clave. Llegó…y pasó. El pasado 4 de marzo este Reto Computer Geek[...]
Angular: Entendiendo la Directiva ngModel
Angular es un framework que nos permite, entre otras cosas, añadir contenido dinámico a nuestros archivos HTML. Una de las formas[...]
Pipes en Angular | Guía completa
¿Qué son los pipes?Los pipes son una herramienta de Angular que nos permite transformar visualmente la información, por ejemplo, cambiar un[...]
Si crees que este post puede serle útil a alguien, por favor, ¡compártelo!:

Deja un comentario

Este sitio usa Akismet para reducir el spam. Aprende cómo se procesan los datos de tus comentarios.

Como toda web legal que se precie, utilizamos cookies para asegurar que damos la mejor experiencia al usuario en nuestro sitio web. Si continúas utilizando este sitio asumiremos que estás de acuerdo. más información

Los ajustes de cookies de esta web están configurados para "permitir cookies" y así ofrecerte la mejor experiencia de navegación posible. Si sigues utilizando esta web sin cambiar tus ajustes de cookies o haces clic en "Aceptar" estarás dando tu consentimiento a esto.

Cerrar