entender los maps y los sets entendiendo map y set en javascript y la verdad es
que los sets y los maps es un tipo de dato que existe en javascript que muy
poca gente la verdad que domina no sé si sabéis cuáles son los tipos en
javascript los tipos de datos y estructuras en javascript espero que os
los seáis todos pero los tipos de datos los primitivos al menos los primitivos
serían el undefined el boolean el number string big int y symbol también
tenemos null object y function así que bueno los primitivos serían estos que
ves aquí el null es un poco es un primitivo pero es un poco raro vale el
null es un primitivo lo que pasa es tiene un error que en realidad es histórico de
que el type of de la instancia es object o sea el null es como si fuese un
objeto pero no está bien o sea eso es un error que se cometió hay un artículo que
lo explica que está muy chulo luego tienen los objetos que no sería un tipo
primitivo y lo tengan las functions que al final derivan del objeto lo mismo que
un array de objects tendríamos los arrays los maps los sets los week map week set
date vale cada vez hay más el map y el set por ejemplo pues son nuevos así que si
en este caso yo entiendo que el null nunca lo arreglaron más por un tema de no
romper nada vale pero que sepáis que habría que tratarlo más bien como un
primitivo bienvenido bienvenida y que no sea que sea la primera pero no la
última esperemos verte por aquí mucho más dicho esto dicho esto conocemos muy de
sobras los objetos los arrays no porque son los que solemos trabajar mucho pero no
se suelen conocer tantos ni los sets ni los más al final tanto los sets como los
maps están bastante bien porque al final lo que te permite es tener de una forma
más indexada un tipo de objeto como si fuese un objeto es aquí tengo los maps que
puedes tener key value pairs y lo que además te puedes guardar es en qué orden
fueron insertados tienes unos métodos geniales a la hora de pues de recorrer de
buscar de borrar está bastante chulo a mí sinceramente
normalmente intento seguir tirando de objetos a no ser que tenga mucho mucho
mucho mucho sentido un set o un map pero bueno están bastante bien porque mira aquí
tenemos un poquito los objetos son similares a los map los dos te permite hacer
tener que tener que a los valores puedes recuperar por el valor puedes
borrar keys puedes detectar si alguien a introducir una aquí al final también los
maps te evitan introducir la misma aquí dos veces tiene cosas no pero tienes
algunas diferencias y aquí te las dicen ejemplo accidental keys un map no contiene
ninguna aquí por defecto esto es muy diferente a lo que te puede pasar con un
objeto porque el problema es que el objeto tiene el prototype y por el prototype te
puede venir que ya te venga con algunas keys que tú no controlabas sabes o sea
claro normalmente cuando creamos un objeto por ejemplo mira pues aquí estoy creando
justamente estaba creando un objeto vale claro aquí como visualmente sabemos de
dónde viene p pues si hago p de pues ya sé que esto pues no existe vale lo tengo
controlado y mirando las keys visualmente veo que tiene una pero imagínate que tú no
sabes de dónde viene este objeto no tienes ni puñetera idea y claro no sólo es
difícil de saber cuáles son las keys que tiene es que a lo mejor está con el
prototype te vienen keys que tú ni siquiera sabías que existían así que a la hora
además de mutarlo es un poquito diferente y puede ser bastante problemático para
asegurarte de que un objeto realmente no tiene ningún tipo de key o no tiene
métodos ahí que puedan estar de alguna forma puedes hacer que sin tú querer
imagínate tú dices ah pues p punto de igual hola y resulta que ya existía un
p punto de sabes o sea es un poco rollo porque a lo mejor ha extendido de esto o
a lo mejor tú quería meter aquí un tu string o mil millones de cosas entonces
pues esto claro para evitarte este tipo de cosas tendrías que hacerlo así
tendrías que crear el objeto de esta forma que dicho sea de paso es un poco rollo
y ahí tendríamos nuestro objeto totalmente vacío porque ha extendido de null y no de
un objeto si lo hacemos de un objeto pues veríamos que es un objeto normal y corriente
pero que ya tiene métodos ahí que nosotros no vemos y estamos habituados a ellos pero
no es lo mismo entonces un map no contiene ningún aquí por defecto cosa que se hacen
los objetos cuando los creas normalmente que a ver en el 99,9 por ciento de los casos
no hay ningún problema pero está bien saberlo al final un map lo único que va a introducirse
dentro es lo que tú de forma explícita le digas que tiene lo cual en un objeto si según
cómo se haya creado de dónde venga cómo se mute por algún sitio si alguien le cambia
el prototype o lo que sea pues puede no ser verdad vale luego tenemos también key types
que puede ser cualquier valor o sea en un objeto sólo deberían ser strings o symbols lo
cual está bastante bien el hecho de que un objeto pueda tener como que un symbol que
los symbols también daría para estar todo día hablando de los symbols pero lo bueno
de las keys de las de los maps es que puede ser un objeto entero pues una función o puede
ser cualquier primitivo puede ser un boleano puede ser cualquier cosa y eso está bastante
interesante el hecho que se puedan ser funciones esto lo que te puede permitir es hacer cierto
tipo de caché por ejemplo de para memorizar como para cachear una función y decir bueno pues esta
función esta referencia de esta función tiene este valor y así pues evitarte volver a llamarlo y tal
son cosas más avanzadas pero bueno que están bien saber el orden de introducción de las keys también
las keys al final lo que es interesante es que están o sea te asegura el orden de las keys que es una
cosa que los objetos no ocurre dependiendo del navegador dependiendo un montón de cosas pero no te
puedes fiar del orden o sea tú no puedes fiarte de que cuando has hecho aquí en un objeto has hecho
persona y has hecho name miguel vale y has puesto age 30 vale más quisiera yo twitch y pongas aquí
https twitch punto twitch punto tv barra miguel claro si tú haces un objeto keys de persona vale aquí parece ser que el orden en el que están las keys es primero name
luego age luego twitch que encaja exactamente con el orden que podemos ver aquí pero claro aquí hay diferentes cosas
luego pones persona punto yo que sé twitter y ponemos miguel es otra vez el objeto keys y aquí podemos ver como que lo ha dejado
como como si sí que tuviese sentido no o sea parece como que sí que te puedes fiar de que el orden siempre se va a seguir y que cuando lo metas pues va a estar ahí
pero esto no es cierto vale nunca te puedes fiar del orden en el que se introducen las keys en un objeto en un map sí que te puedes fiar
de hecho lo puedes iterar y te vas a te asegura que siempre va a tener el mismo orden aquí tienes un montón de
historias ves aquí te dicen aunque las llaves en un objeto ordinario pues ahora sí que son
sí que están ordenadas porque os digo que depende del navegador
esto no siempre ha sido el caso y el orden es complejo
así que es mejor pues no fiarte de esta propiedad
bueno que tiene un montón de bueno lo mismo con for in yo he utilizado el object keys
pero
hay diferentes formas de que puedas iterar la lista de keys y no te puedes fiar
en cambio con el map sí que lo puedes hacer
de hecho con el map pues lo puedes iterar tú podrías hacer el for off
y ahí siempre vas a tener exactamente lo mismo vale el tamaño esto está bastante bien porque sí que tienes con los maps
pues con los maps tú puedes hacer vamos a hacer aquí un map
const map new map vale
y hacemos map punto set y le decimos por ejemplo pues name y le ponemos miguel vale
y aquí tendríamos el map punto 6 que el map punto 6 lo que te dice justamente cuál es el tamaño que tiene el map
si tú vas metiendo más
le decimos 30 por ejemplo vale pues podemos ver que nos va diciendo siempre el tamaño o sea tienes como una propiedad especial que te va a decir el tamaño
eso está genial porque es una cosa que el object no tiene tú no puedes si haces el object y le dices persona por ejemplo aquí
vamos a quitar este
vamos a quitar todo esto
y tú le dices persona punto length vamos a quitar esto que se vea
ves
bueno ni siquiera lo ves porque no se ve nada
del led no te puedes fiar no porque eso es una propiedad que es de los arrays para poder conseguir realmente la longitud digamos sólo el número de
de key values que tiene el objeto podrías hacerlo de diferentes formas pero tendrías que hacer un object keys
transformarlo en un array y entonces hacer el punto net con el map es mucho más sencillo mucho más fácil y la verdad mucho más cómodo
así que y tiene tiene más métodos que la verdad que a la hora de iterar también a la hora tiene mejor performance y lo que haces es añadir
es mucho más rápido a la hora de añadir incluso de borrar que en los objetos a la hora de borrar es un poco rollo no porque cuando quieres borrar de un objeto puedes hacer diferentes cosas por ejemplo podrías hacer un delete persona punto
pero esto esto es esto es esto es el mal hacer un delete tiene bastantes problemas en el tiempo en el compilador de javascript y le quita bastantes optimizaciones entonces lo que se suele hacer para evitar esto es lo de poner
el ponerlo en undefine por ejemplo ¿vale? pero claro si tú lo pones en undefine fíjate que yo lo he puesto el name lo pongo en undefine y aún así el length me dice que es 3 o sea es que undefine es un valor
entonces es undefine pero a la vez está definido es un poco raro en cambio con el con el delete persona punto name ves sí que sí que pondría que es 2 pero ya te digo que el problema de tú hacer un delete
es que esto aparte que v8 no lo recomienda porque no puede optimizar el código de javascript cada vez que hay un delete pues entonces pues tienes una un problemilla de rendimiento
es una pena pero esto pues no te pasa con los maps ¿vale? porque con el map pues tú al final puedes hacer el delete ¿ves? aquí le puedes decir map1.delete le dices la key y ya está y el size pues habrá cambiado
o sea lo podemos ver en un momento hacemos tenemos esto por aquí y aquí haces punto delete delete y le decimos name y ahora si miremos el size
en este sentido digamos que la API ¿ves? aquí podemos tener que tenemos uno la API es mucho más cómoda depende yo creo que los maps van muy bien especialmente si tienes que hacer mucho
añadir y borrar ¿vale? añadir y borrar suele tener bastante mejor rendimiento suele dar bastante menos problemas en este caso es que los objetos en realidad no están muy optimizados para esto
que los objetos no están tan pensados para estar borrando keys constantemente ¿vale? así que si tienes que hacer ese tipo de operación mejor un map y bueno performance bueno aquí mira lo dice
not optimizados for frequent additions and removals ¿vale? for frequent pero a ver que si que puedes meter alguna no pasa nada pero para removals ahí sí que está el problema el problemilla ¿vale?
y luego serialización y parsing aquí podemos ver que sí que el problema que tiene map es que no tiene una serialización nativa ¿sabes? o sea tú no puedes transformar
de forma nativa o sea sí que lo puedes transformar pero no tienes un método digamos que ya sería increíble ¿no? o sea faltaría un método
que fuese map.tojson por decir algo y que esto pues lo transformase en un json o un objeto o lo que sea
yo la verdad es que me extraña que en ningún momento lo van a o sea que no tenga un map.algo
si necesitas este tipo de métodos seguramente te puedes salir más a cuenta que utilices un json
están bastante chulos mira este esto es una cosa que está es que la API es mucho más
más easygoing ¿sabes? es una API mejor pensada o sea aquí tenemos por ejemplo todos los ejemplos de la API
de map y es que pues son una maravilla o sea creas los contactos le creas un nuevo map le dices
contacts.set a la key jesse pues le añado este este valor ¿vale? que básicamente es un objeto
ahora puedes preguntar ¿tiene contactos en la key jesse? ¿ves? y te dice true o sea es que es bastante genial
pero luego tienes puedes tener otros no otros problemas pero lo bueno que tienen los objetos
pues es que tienes el object keys tienes un montón de cosillas que en este caso te pueden ayudar claro
aquí al final también puedes hacer object contacts pero este no te funciona ¿vale? ya no puedes decir
objects.keys y tal o sea digamos que a veces sí que pueden solaparse pero hay veces que a lo mejor un objeto
puede seguir teniendo sentido ¿vale? que es que hay gente que dice ah pues a partir de ahora voy a utilizar maps
para todo bueno vamos a calmarnos vamos a calmarnos por ejemplo añadir mucho y borrar mucho maps pero si
tienes que hacer mucho de buscar de hacer introspección y cosas así pues los objetos siguen estando bastante
interesantes o sea no hay que olvidarse de ello porque al final si quieres hacer las keys también está
bastante bien aquí ¿ves? o sea hay muchos más métodos tienes el de las keys devuelve todas las keys
he puesto contacts ¿vale? y aquí pues tendrías un iterador pero cómo funciona el iterador puede ser un poco
más rollo a lo mejor si estás habituado a convertirlo fácilmente en un en un array y a lo mejor ya
tienes métodos que hacen introspección con un array con mil millones de cosas así que bueno tenlo en cuenta
bueno aquí tienes los iteration methods tienes el de keys el de values el de entries que son exactamente los mismos
que tendrías con el con el con el con el con el objeto ¿vale? el object punto keys
object punto values object punto entries ¿vale? y tendrías el for each que este también está bastante bien no tienes
directamente el map obviamente ¿vale? no no puedes utilizar directamente el map ya sería increíble
pero tienes el for each que sí que se puede iterar porque al final hay que tener en cuenta que tanto el set
como el map como todo esto la idea es que sean iterables la verdad que con lo del for each
eso sí también es una ventaja que tienen los objetos que tampoco es un iterable directamente sino que o tienes que hacer
una iteración a través de las keys o un object keys o el entries o lo que sea la verdad que lo mejor que tiene para mí
es justamente la API que es mucho mucho más cómoda la performance especialmente mira con lo iterando con el for off
mira relación con arrays aquí tendríamos para crear ah esto claro se puede crear el array así efectivamente
ya decía yo a ver vamos a ver si podemos crear un array así yo creo que se puede crear así directamente
hombre pues claro si puedes crear así un array es que es lo bueno que sean iterables que es que al final
gracias así o el array from ¿no? contacts y ya estaría y aquí lo teníamos con array solo que ten en cuenta que
todo hace como entries ¿vale? o sea cuando lo creas un array claro para que un objeto sea como un array y se quede con tal información
pues lo que te hace es un array en la que cada posición tiene dos posiciones el primer elemento sea el aquí y la segunda el value
esto es como si hubiéramos hecho básicamente
contacts.entries ¿vale?
que hace algo parecido
solo que aquí te lo devuelve con un iterador
claro no te devuelve un array te devuelve un iterador
pues eso al final no he comentado el artículo de la mujer esta que me parecía que tenía todo súper buena pinta
y no lo he leído pero bueno ha estado explicando exactamente lo mismo de todo esto
entiendo que ha estado explicando exactamente lo mismo
ah mira esto está bastante bien que a la hora de crear un map le puedes pasar directamente ya algunas entradas
vamos a hacerlo como si fuesen entries también
vale
y aquí map.size
map
vamos a hacer .map
con el punto y coma
y ahí lo tendríamos ¿vale?
se lo puedes pasar pero lo podéis ver aquí que es como entries ¿no?
o sea estás utilizando un array y cada elemento tendrías la key y el valor
que esto pues puede ser lo que tú quieras
también podría ser name
lo que sea
o sea pues un objeto también
puede ser el valor lo que te dé la gana
dice la sintaxis es la misma que llamando a los yet entries en un objeto
o sea que tiene que ser entries
es que al final es la única forma de que de una forma como un array le puedas decir toda esta información
ah mira ves
el set con un true
y podemos ver que el true pues funciona perfectamente
o sea que está bastante bien
a ver
una cosa que puede ser no problemática pero que también tienes que tener en cuenta
que en un objeto tú le puedes pasar la key
pero la key al final siempre
o sea si tú creas un objeto ¿vale?
como persona
persona
y le pasamos el 1 y ponemos hola
pues claro
el persona
1
es lo mismo
o sea esta key
del número y del string es lo mismo
pero en el caso del map
no son lo mismo
o sea hay que tener en cuenta que
esta key
que es un string
y esta key que es un número
son dos keys que son diferentes
o sea si aquí miramos el map size
pues veremos que es 2
¿vale?
y hay que tenerlo en cuenta también
que esto es una cosa también que los objetos no pasa
a ver
esto suele tener cosas buenas y malas
normalmente
normalmente suelen ser malas
en el sentido de que no estás controlando a lo mejor bien
el tipo de datos que estás utilizando como key
pero bueno
hay que tenerlo en cuenta
que en el map pues esto no pasa
que sí que hace la diferenciación de tipos
así que
esto sí que es bastante importante
y que bueno
lo que hemos dicho antes ¿no?
que en el map
podemos utilizar aquí
pues hasta una función y todo
para decirle que esto sea lo que tenga que ser
y aquí podemos ver
que la key es una función
así que
ahora si volvemos
volvemos a crear esto
vamos a ver
que nos va a volver a crear una cuarta
porque estas dos funciones son distintas
¿vale?
o sea es que
aunque la función
esto es súper importante ¿vale?
esto es lo típico de
referencia
valor o referencia
cada vez que creamos una función
o cada vez que creamos un objeto
por ejemplo
Pepito
y aquí como aquí otro objeto
y le ponemos Pepito
claro
pues aquí lo que podemos ver
es que tenemos dos keys diferentes
que parecen iguales
pero no son iguales
porque son dos objetos
que referencian a un objeto diferente
en la memoria
están apuntando a diferentes lugares
así que tenlo en cuenta
que
que esto no
ahora va a empezar
aunque hacerte un objeto
no te va a empezar a hacer la magia
de decirte
ah sí este objeto
es
es este objeto
que tiene estos valores
no no no
ten en cuenta esto
que lo va a mirar por referencia
si lo guardas
y lo utilizas dos veces
aquí sí
que puedes ver
que entonces sí que
tiene en cuenta
porque la referencia
es la misma
al utilizar el mismo objeto
dos veces
le he puesto Pepito
voy a poner aquí
venganito
para que lo veamos
se va a quedar
lo que estamos haciendo aquí
al final
es actualizar el anterior
¿vale?
pero si en lugar de esto
pues le pasamos directamente
el objeto
son dos objetos
que aunque los dos son vacíos
pues son diferentes
y por lo tanto tendríamos
Pepito
y Menganito
súper importante
pues eso
ya os he dado la chapa
¿qué os parece?
ya os he dado la chapa
¿qué es lo que estás haciendo
con el punto y coma
antes del map?
muy buena pregunta
el tema
es que cuando no utilizas
punto y coma
al final
hay que tener en cuenta
que si inicias
una línea
con
con esto
¿vale?
si inicias una línea
con corchetes
con paréntesis
bueno voy a hacer un poco
más grande
para que lo veáis bien
¿vale?
si inicias una línea
con corchetes
con paréntesis
con
llaves
seguramente
tienes que poner
un
espera un punto y coma
al final
¿vale?
pero lo puedes poner
al principio también
y
que a ver
espérate
bueno claro
es que esto no tiene sentido
pero este sí que tendrá
este sí que tendrá sentido
estos dos
¿vale?
por eso lo pongo al principio
pero esto es una regla
que una vez que la sabes
pues ya lo tienes siempre en cuenta
yo muchas veces lo hago
así que
tienes por ahí
uff
sí
tengo las extensiones
pero ya haré algún día
un
un vídeo en youtube
quería hacer el vídeo en youtube
pero al final nunca lo hago
¿puedo volver a enviar
el link de Tania?
creo que te lo han pasado por ahí
¿no?
¿para qué sirven los objetos
en la vida laboral?
lupus
o sea para todo
los objetos son dios
a ver
los objetos
sirven para
para todo
o sea
al final es un
un tipo de dato
que por ejemplo
es que
bueno este
aquí tienes un ejemplo
persona
pues aquí tienes toda la información
de la persona
es que al final
no habría otra estructura de datos
si quitamos estructura de datos
que se le parecen
como en este caso
los maps
pero claro
el problema que tienen los maps
es que
o lo bueno que tienen los objetos
es que
los objetos
al final
el json es
javascript style
object notation
o sea los json
en realidad están basados
justamente en la sintaxis
que tiene un objeto
en javascript
por lo tanto
cualquier API
que se precie
cuando tú hagas
una petición
si tiene información
vas a tener seguro
array con objetos
bueno a ver
puede haber diferentes tipos
de datos
pero lo más típico
por ejemplo
los resultados
pues vas a tener
un array de resultados
y cada resultado
va a ser un objeto
con la información
no te puede devolver
por ejemplo la API
un map
¿vale?
no tiene sentido
si te podría devolver
las entries
pero bueno
no creo que empecemos
a ver ahora
que las APIs
empiecen a devolverte
arrays de arrays
porque no tiene
mucho sentido
y porque creo que
al final
el json
va a sobrevivir
durante mucho tiempo
los objetos
no sirven para nada
el que los programan
C
sí, eso sí
eso ya sí que te digo
persona en json
versus clase persona
¿cuál es mejor?
son dos cosas diferentes
son totalmente
cosas diferentes
o sea
como he dicho
justo lo que estaba
explicando ahora
tú no puedes devolver
desde una API
una clase
no tiene sentido
no es un tipo de dato
que puedas devolver
una clase
al final
es como un contrato
que puedes
como
puedes tener
como métodos
como lo que sea
pero
aunque se puedan
solapar un objeto
y una clase
en algunos casos
de uso
en muchos otros
pues no tienen
no sirven
para lo mismo
al final
con una clase
podrías hacer
podrías adaptarte más
a tener instancias
y tal
y con un objeto
te puede costar más
al final tendrías que hacer
una programación
a lo mejor
puedes hacer una programación
más funcional
por ejemplo
con los objetos
tus streamers
se quedan guardados
en algún sitio
sí
sí
durante X tiempo
pero Twitch lo borra
claro
después de X días
o meses
lo que tengo
justamente
es un canal
secundario
donde voy subiendo
cositas
que le puedes mirar
es midulife
de hecho
hoy
voy subiendo
un montón de cosas
por ejemplo
hoy he subido
el callbacks
versus promises
y esto
antes de poder entender esto
esto justamente viene
también de un live
así que
ahí lo tenéis
le puedes echar un vistazo