DEV Community

loading...

El primo del Array: ¿Que es un Set?

Franco Cuarterolo
React Frontend Developer. Actualmente trabajando en Flow Telecom, construyendo en conjunto un equipo multidisciplinario desde la inclusión.
・2 min read

Un set es un tipo de objeto incluido en ES2015 que tiene semejanzas con un array:

  • Contiene una lista de datos de cualquier tipo
  • Es iterable
  • Permite el uso del operador spread

Pero también diferencias:

  • Sus datos no se repiten
  • No cuenta con los métodos de Array (map, some, filter)
  • Es un poco más performante

¿Cómo crear un Set?

Un Set es un tipo de objeto, por lo que su sintaxis es la misma que la de un constructor:

const unSetVacío = new Set();
Enter fullscreen mode Exit fullscreen mode

Si queremos inicializar nuestro Set con valores, deberemos pasar como argumento un array

const redesSociales = new Set(["Facebook", "Twitter", "Fotolog"]);
Enter fullscreen mode Exit fullscreen mode

¿Qué métodos tiene un Set?

El objeto Set tiene metodos propios para agregar, borrar y comprobar datos

Agregar datos a un Set

Para agregar datos a un Set, contamos con el método .add()

redesSociales.add("Instagram");
redesSociales.add("MySpace");
console.log(redesSociales); // Set ['Facebook', 'Twitter', 'Fotolog', 'Instagram', 'MySpace']
Enter fullscreen mode Exit fullscreen mode

¿Qué pasa si por error duplicamos un dato? ¡Absolutamente nada! Los Set solo permiten valores únicos

redesSociales.add("Facebook");
console.log(redesSociales); // Set ['Facebook', 'Twitter', 'Fotolog', 'Instagram', 'MySpace']
Enter fullscreen mode Exit fullscreen mode

Eliminar datos de un Set

Para eliminar datos de un Set, contamos con el método .delete(). Si retornamos o hacemos console.log al usar este metodo, nos retornará un valor booleano para avisarnos de que pudo borrar el dato que le dijimos

// RIP Fotolog y MySpace
redesSociales.delete("Fotolog"); // true
redesSociales.delete("MySpace"); // true
console.log(redesSociales); // Set ['Facebook', 'Twitter', 'Instagram']

//Intentemos borrarlos otra vez, nos retornará false ya que no existen más
redesSociales.delete("Fotolog"); // false
redesSociales.delete("MySpace"); // false
Enter fullscreen mode Exit fullscreen mode

Comprobar si un Set contiene un dato

Para comprobar si existe un dato dentro de un Set, usaremos el método .has() que nos retornará un valor booleano

redesSociales.has("Instagram"); // true
redesSociales.has("Fotolog"); // false
redesSociales.has("LinkedIn"); // false
Enter fullscreen mode Exit fullscreen mode

Comprobar el tamaño de un Set

Para saber qué tamaño tiene un Set, contamos con la propiedad .size (¡¿Por qué no le pusieron .length como a los Arrays?!)

redesSociales.size; // 3
Enter fullscreen mode Exit fullscreen mode

¿Cómo iterar un Set?

Un Set puede ser iterable casi como cualquier objeto, por ejemplo, con un for..of

for (let redSocial of redesSociales) {
    console.log(redSocial);
}
Enter fullscreen mode Exit fullscreen mode

También podemos hacer uso de los métodos .values() o .keys() que retornan un nuevo objeto iterable con los datos del Set (Sí, ambos métodos hacen lo mismo).

¡¿Cómo vuelvo al modo Array?!

Si tenes necesidad de transformar tu Set en un Array, podemos usar dos métodos:

  • Usar el metodo .from() del objeto Array
const redesSocialesArray = Array.from(redesSociales);
Enter fullscreen mode Exit fullscreen mode
  • La vieja confiable: el spread operator
const redesSocialesSpread = [...redesSociales];
Enter fullscreen mode Exit fullscreen mode

Conclusión

Hoy aprendimos qué es un Set, cómo modificarlo y cómo convertirlo en Array. Hay más métodos que no te conté para no hacerla muy larga. Al final te voy a dejar la documentación que utilicé para poder escribir esto. Te invito a que la leas, investigues, juegues y practiques.

¡Gracias por llegar hasta acá!

Fuentes:

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Set
https://javascript.info/map-set

Discussion (1)

Collapse
juanfabiorey profile image
juanfabiorey • Edited

Muchas gracias bro! Me trajiste toda la nostalgia con Fotolog y Myspace jaja