Muy buenas tardes, ¿qué tal? Bienvenido, bienvenida, espero que estés muy bien, muy, muy, muy feliz martes.
Hoy vamos a estar repasando las novedades de JavaScript, de la versión Enmascript 2024 y Enmascript 2025.
Son las dos últimas versiones, he estado seleccionando lo mejor de lo mejor, lo que creo, yo considero que te va a cambiar la vida,
porque claro, obviamente hay pequeñas, hay algunas novedades que tampoco sean tan importantes, la verdad,
hay novedades que te quedas un poco igual, pero yo he estado seleccionando las que creo que sí que en tu día a día te pueden ayudar,
que son estas, ¿vale? Y de todas y cada una las vamos a explicar.
Hoy no es un curso de JavaScript desde cero. Primero, porque no puedo explicar siempre JavaScript desde cero, no tiene sentido.
Lo segundo, porque si quieres JavaScript desde cero, ya tenemos un curso, que lo tienes aquí, puedes entrar con GitHub, ¿vale?
Que tienes ejercicios, vídeos, en verdad, es cierto que lo tengo que actualizar, me perdonáis, ¿vale?
Que lo actualizaré, mira, la consola del navegador y aquí tenéis, pues, vídeos que os explica todo, con ejercicios, con imágenes,
con exámenes interactivos y tal.
Hoy no es un curso desde cero, hoy vamos a ver las novedades de JavaScript en 2024 y 2025.
Parecen pocas, pero ya veréis como poco a poco vamos a ir viendo y hay unas cuentas, hay unas cuantas.
Y son muy interesantes porque hay temas de asincronía, hay nuevos métodos de array,
hay unos métodos de la estructura de datos set que son muy potentes, por muy sencillas que sean,
asignaciones lógicas también muy útiles, pues todo esto lo vamos a revisar hoy, ¿vale?
¿Cuándo y dónde puedo usar estas nuevas características? No os preocupéis porque os voy a explicar dónde y cuándo podéis utilizar las nuevas características.
O sea, os voy a decir qué soporte tiene cada característica, dónde la podéis utilizar, casos de uso también, casos de uso os voy a explicar.
De hecho, va a ser bastante práctico para que veáis, ¿vale?
Os voy a enseñar el caso anterior, cómo se haría anteriormente o cómo se hacía antes y cómo se haría ahora, ¿vale?
O sea, que un montón de cositas.
La más importante, la más interesante en su día fue Enmascript 5, ¿no?
La que, puf, lo cambió todo.
O 2015, la de Enmascript 2015.
Y durante mucho tiempo fue, mira, Carlos Azaustre hizo aquí un blog.
Pues venga, vamos a entrar al blog de Carlos Azaustre.
Fue como bastante importante porque no paraba, no paraba en ningún momento de evolución.
O sea, no evolucionaba JavaScript durante muchos años, se quedó como parado.
Y de repente, y de repente apareció Enmascript 2015 o Enmascript 6, como le queráis llamar.
Y bueno, fue un cambio totalmente porque trajo las Arrows Functions, trajo las clases, trajo también el LettyConst.
Por fin, ¿no? Evolucionó.
Esto fue en 2015 y desde entonces, todos los años, JavaScript saca como una nueva versión.
Esta nueva versión viene por el año de la especificación.
Por ejemplo, ECMAScript 2021, 2022, 2023.
Y todo esto, todo esto viene gracias a un grupo de trabajo que es el TC39.
El TC39 es el que se, de todos los años, tiene que decidir cuáles son las, digamos, mejoras que van a acabar en el lenguaje de JavaScript.
Y si queréis ver todas las propuestas, porque es totalmente de código abierto, os podéis ir aquí a Proposals, ¿vale?
Y aquí vais a ver las diferentes propuestas.
Cada propuesta está en una fase diferente.
Por ejemplo, fase 3, ¿vale?
Pues en la fase 3, tenéis aquí la fase 3, pues todas estas propuestas.
Cuanto más arriba está de fase, por ejemplo, la fase 3 sería la última ya.
A partir de aquí es que estas que veis aquí van a llegar casi al 100%, van a llegar.
De hecho, hay algunas aquí que no vamos a hablar hoy, no vamos a hablar hoy.
No, no están, claro, no están porque ya se han quitado, porque ya han llegado a la última versión de JavaScript.
Entonces, normal.
Entonces, la fase 3 sería como la última, pero hay otra fase.
Está la fase 2.7, la fase 2, la fase 1 y la fase 0.
La fase 0 sería la más experimental, o sea que cuando veis ahí algo en la fase 0, pues es muy experimental, no hay que fiarse.
Pero conforme va subiendo de fase, es más fácil que llegue realmente a los navegadores.
Y fase 3 será lo siguiente que va a llegar.
Aquí ya veis los decoradores, por ejemplo.
Temporal, que es una nueva API que va a llegar a JavaScript también.
Tenemos también los Import Attributes para poder importar JSON y un montón de cosas.
Así que esto sería cómo va evolucionando a año tras año JavaScript.
El TC39, digamos que es un grupo de expertos que se van reuniendo.
¿Y quiénes son estos expertos?
Pues muchas veces estos expertos son gente que están en los vendors.
¿Y qué son los vendors?
Son clientes muy importantes de JavaScript, que pueden ser, por ejemplo, los creadores de navegadores,
los creadores de entornos de ejecución como Node.js,
o por ejemplo, también pueden ser empresas muy grandes que utilizan JavaScript en su día a día.
Y además se van dividiendo su tarea.
Aquí tenéis el comité del TC39.
No sé si aparecerá por aquí contactos.
Aquí tenemos alguna gente.
Chris Almeida de IBM.
Rob Palmer de Bloomberg.
Hugo Hual Sharma de Igalia.
Aquí tenemos gente que es.
Pero hay más gente todavía.
Todavía hay más gente por aquí.
Podéis ver las actividades.
Está muy bien porque todo podéis ver.
Dónde se reúnen, qué hablan en cada meeting.
Todo lo podéis ver.
Y además es bastante bestia esto.
Os lo voy a enseñar porque esto sí que a lo mejor no lo sabíais.
Pero tiene una cosa que le llaman Meeting Notes.
Donde explican todo lo que han hablado.
¿Sabes?
O sea, todo lo que han hablado.
Por ejemplo, vais a ir aquí.
Y tenéis todas las notas de todas las reuniones que han hecho.
Por ejemplo, la última fue aquí en abril.
Y podéis ver el 11 de abril todo lo que hablaron.
Y esto es toda la gente.
Gente de Igalia, de Mozilla.
Un experto invitado.
Bloomberg, Igalia, IBM, de Google, de Oracle, Alibaba, de Apple, Bloomberg.
¿Veis?
Aquí estarían todos los expertos que estaban aquí.
Y fijaos todo lo que han hablado.
Pues aquí tenéis la conversación completa.
La conversación completa.
O sea, está muy chulo.
Yo muchas veces me he leído algunas cosas por aquí por encima.
Porque podéis, yo que sé, si os interesa saber cómo va a evolucionar algo.
Pues podéis buscar aquí y decir.
Ostras, pues quiero ver cómo van los récords y las tuplas.
Bueno, pues podéis ver, vale, pues las tuplas.
Están hablando aquí que esto.
O los decoradores o lo que sea.
Y podéis ir buscando aquí a ver que lo que están comentando si realmente está evolucionando.
Si tiene buena pinta, si no tiene buena pinta.
Lo que sea, ¿no?
Y en cada agenda pues puedes ir viendo lo que han ido hablando.
¿Veis?
Aquí realidad de cómo difiere esto y lo otro.
Es muy chulo.
Es muy chulo.
Yo os recomiendo que le echéis un vistazo.
¿Veis?
Aquí están las propuestas como van hablando.
¿Veis?
Aquí ha llegado a Stage 4, que ya es el último Stage.
El de Set Methods, que hoy vamos a hablar de este.
Bueno, esto es un poco de introducción para que entendáis un poco cómo evoluciona Javascript.
¿Cambia Javascript todo?
¿Tengo que aprender Javascript y olvidar lo anterior?
Pues no, Frantechargen, porque por suerte.
Y esto es una cosa muy, muy chula de Javascript.
Que es una cosa muy chula, pero a la vez es una cosa que odia a mucha gente.
Y es que Javascript, a diferencia de cualquier lenguaje de programación,
no puede romper la compatibilidad anterior.
Hay casos muy, muy, muy raros en los que ha ocurrido,
pero son muy raros, muy excepcionales.
Pero Javascript es un lenguaje que solo va hacia adelante.
¿Sabes?
O sea, no está versionado en el sentido de que dice,
de Javascript 1 a 2, ya no puedes utilizar esto y esto y esto.
Eso no ocurre, porque podrías romper Internet.
Javascript romperías millones de páginas en Internet que están publicadas.
Y por lo tanto, lo que hacen en Javascript es siempre construir encima de lo que ya existe.
Que sí, que a lo mejor está deprecado o dejas de recomendarlo.
Por ejemplo, los var, a la hora de crear una variable, puedes utilizar var,
pero a día de hoy ya no sería la forma recomendada de hacerlo.
O sea, ya puede esto, que tendríamos aquí, mensaje, hola.
Esto, aunque sigue funcionando, funciona perfectamente,
pero a día de hoy la recomendación sería utilizar siempre LED.
¿Vale?
Esto va a pasar y var no va a desaparecer,
porque imagínate la de páginas que existen que utilizan var.
Aunque pasen 5 años, 10 y tal, no va a pasar.
Por lo tanto, cuando decimos que cambia, no es que cambia,
es que evoluciona.
¿Vale?
No es que cambia, es que evoluciona.
Y siempre evoluciona sobre la misma base.
Así que no tienes que volver a aprender todo JavaScript,
pero sí que es interesante que conozcas estas cositas nuevas,
porque es muy posible que estas cosas nuevas te permitan ayudarte a crear un mejor código.
¿Y qué son estas cosas nuevas que valen la pena que aprendas?
Pues esta sería la lista de las cosas más importantes para ECMAScript 2024 y ECMAScript 2025.
¿Vale?
Vamos a echarle un repaso a cada una de ellas.
Vamos a tener ejemplos prácticos,
vamos a ver cuál es la compatibilidad de cada uno,
vamos a ver también qué problemas podéis tener al utilizarlo,
¿vale?
Y vamos a empezar con, yo creo que uno de los más interesantes,
que es el de GROUPBY, ¿vale?
GROUPBY.js.
Entre todos, tenemos aquí diferentes,
algunos son, ya ves, que para objetos,
este sería más bien para crear un objeto,
hay algunos de arrays,
también vamos a ver asignaciones lógicas,
una teoría de conjuntos de set,
que esto es muy sencillo y muy potente,
y nuevas formas de asincronía que también son muy interesantes.
Entonces, GROUPBY.
Durante mucho tiempo, cuando queríamos agrupar un array,
vamos a, voy a poner aquí GROUPBY, ¿vale?
GROUPBY.
Esto lo que nos va a permitir es agrupar datos de un array
en un objeto según una clave, ¿vale?
Esto sería de ECMAScript 2024,
de la versión que sale ahora.
Y si miramos en el CANIUSE,
que lo tengo por aquí, tengo la URL por aquí,
en el CANIUSE,
podemos ver que su compatibilidad a día de hoy
es del 86%.
O sea, lo podéis utilizar en un 86%
de los navegadores.
Bueno, o sea, el 86% de los usuarios actuales
tienen soporte.
Ese sería el tema.
Y podemos verlo por versiones también.
Vamos a filtrarlo, que queda un poco mejor.
Todas las versiones modernas
de todos los navegadores ya lo tienen.
Chrome, Safari, Edge, Firefox,
todos lo tienen.
Pero por desgracia, por lo típico,
una de dos, que es Safari,
una versión que es bastante actual,
la versión 16.4 y la 17.3,
tienen una cosa ahí un poco regulinchis.
Y Chrome no hace tampoco tanto.
Que esa sería la razón por la que aparece tan poco.
¿Cómo es esto de GROUP BY?
GROUP BY es un...
Funcionaría así.
Tendríamos un array de números.
Imaginad, un, dos, tres, cuatro, cinco.
¿Vale?
Y ahora lo que podemos hacer es
agrupar estos números.
¿Cómo lo podemos hacer?
A día de hoy,
si quisiéramos agrupar los números,
tendríamos que, imagínate,
podríamos hacer un objeto aquí,
que sea GROUP,
y tendríamos que crear un objeto.
Y una forma,
podríamos hacer un FOREACH,
FOREACH,
en cada number,
y podríamos decirle,
vale,
la key es que,
podemos crear aquí,
la key,
podemos crear la key,
que le vamos a decir que es par,
y decimos que si el número
es divisible entre cero,
bueno,
no es divisible entre cero,
¿vale?
vamos a decir que el aquí es impar,
¿vale?
Y ya guardaríamos aquí en el GROUP,
le diríamos,
vale,
vamos a guardar aquí,
vamos a guardar el número,
¿no?
Y el número,
bueno,
claro,
primero tendríamos que decir algo así,
ta, ta, ta,
tenemos que empezar
que si está vacío
que le pongamos un array así,
un array vacío,
o sea,
tenemos que iniciar,
o si no,
lo podríamos poner ya iniciado,
¿eh?
Impar,
par,
y así lo simplificamos,
par,
par,
así,
¿vale?
Y así nos olvidamos de esto
y simplemente ya hacemos aquí el push
del number
y esto.
Otra cosa que podríamos hacer
sería un reduce y tal,
esto sería como lo haríamos hoy,
como lo haríamos hoy,
¿vale?
Pero esto,
por suerte,
esto sería una forma de hacerlo
como que habría otras,
¿eh?
Ya os digo que podríamos hacerlo
con un reduce también,
podríamos hacerle diferentes formas,
¿vale?
Y esto,
si no nos hemos equivocado
y hacemos aquí el console.log del GROUP,
perdón,
tendríamos que tener separados
por un lado
los números pares
y por otro lado
los números impares,
¿vale?
Hacemos un array
donde,
o sea,
tenemos el array numbers,
lo iteramos,
por cada número
vamos a determinar
en qué llave tenemos que poner
de este objeto
para agruparlos,
¿no?
Y estamos agrupando
los números pares
en este array
y los números impares
en este array.
Ya veis que es un poco rollo,
primero,
porque tenéis que crear esto fuera,
hay que determinar esto así,
o sea,
es demasiado imperativo
que tenemos que decirle
como paso a paso
qué es lo que tiene que hacer,
tengo que hacer un push aquí,
no se ve muy bien.
Con el reduce
también lo podríamos mejorar,
pero también sería un poco farragoso.
Por suerte,
a día de hoy
tenemos algo
para que podemos mejorar esto,
que es utilizar,
vamos a quitar
todo esto,
¿vale?
vamos a dejar el numbers.
¿Qué podemos hacer?
Pues muy fácil,
es object.groupby,
¿vale?
Y vamos a agrupar,
le vamos a decir,
quiero que me agrupes los números
y le vamos a pasar
un método,
una función
como segundo parámetro,
donde vamos a recibir
cada elemento
y aquí
vamos a tener
que devolver
en qué llave
queremos agruparlo,
o sea,
que le pasamos
un array
y lo transformamos
en un objeto
y le tenemos que decir,
vale,
cuando voy a crear este objeto,
¿en qué llave
tengo que meter
este número?
Pues aquí vamos a determinar,
vale,
pues si número
es divisible
entre dos,
vamos a devolver
que lo tienes que meter
en par
y si no,
lo metes en impar.
Con este código,
simplemente,
con este código,
fíjate la diferencia,
fíjate la diferencia,
con este código
ya estaríamos consiguiendo
hacer exactamente lo mismo,
pero,
vamos a ver un problema
y ¿cuál es el problema?
El problema,
voy a quitar esto por aquí,
el problema de este código
es que si lo intentamos
ejecutar en run.js,
vamos a ponerlo aquí
en run.js,
vamos a ver,
bueno,
puesto numbers,
lo he escrito mal,
¿vale?
Pero bueno,
no pasa nada.
Que me da un error,
me dice que
object.groupby
is not a function.
¿Por qué pasa esto?
Pues lo que está pasando
es que run.js
y seguramente
muchos sitios
o entornos de ejecuciones
todavía está utilizando
una versión antigua
que no soporta
groupby.
¿Por qué?
Porque node,
si buscáis node green
y aquí buscamos
groupby,
esto sería como
el can I use
de node,
¿vale?
Veo que no,
ah,
no se puede buscar
por groupby,
duplicate,
a ver,
pues ni siquiera aparece,
seguramente aparecerá,
punto,
group,
seguramente aparecerá,
pero no sé con qué nombre
aparece,
a ver si buscamos
para abajo,
rest properties,
nada,
tiene que estar más abajo,
más abajo,
to object,
puede ser que no aparezca,
me extrañaría,
porque sí que aparecen otros,
sí que aparecen otros,
mira,
de este vamos a hablar hoy,
es raro que no aparezca,
puede ser que no aparezca
porque todavía
no está 100% asegurado
que vaya a aparecer,
puede ser,
puede ser,
pero bueno,
si aquí lo buscásemos,
seguramente aparecería
que en Node.js
todavía no lo soporta,
pero si lo utilizamos en Chrome,
por ejemplo,
nos vamos aquí a la consola
y ejecutamos este código,
vamos a ver que aquí
sí que funciona perfectamente,
¿vale?
¿Ves?
Y fíjate lo que ha hecho,
vamos a hacer esto
un poco más grande,
fíjate lo que ha hecho,
lo que hace aquí
es que nosotros le indicamos
en qué llave
es donde tiene que agrupar
ese elemento
y aquí tenemos los impares
y los pares.
Vamos a ver otros ejemplos
porque este es muy,
muy típico
y seguramente dirás,
bueno,
es que este ejemplo
es demasiado típico,
y ya está,
¿vale?
Este ejemplo,
este ejemplo es el más básico,
¿vale?
Este sería el más básico.
¿Cómo lo podemos utilizar
también para objetos?
Bueno,
imaginemos que tengo aquí
los Avengers,
voy a traerme a todos los Avengers,
bueno,
a todos no,
pero algunos,
¿vale?
Tengo aquí los Avengers,
Iron Man,
Black Widow,
Thor,
Scarlet Woods,
tengo un montón,
¿vale?
Estos Avengers
tienen diferentes propiedades
por nombre,
poder,
poder,
bueno,
fuerza,
planeta
y si están vivos o no,
porque los pobres,
hay alguno que huele un poco a atún,
entonces,
porque se lo cargaron.
Bueno,
pues podemos agruparlos
por diferentes cositas,
ya hemos visto que,
por ejemplo,
podríamos agrupar a los Avengers
y le decimos que cada héroe
quiero que me lo agrupes
por su planeta.
fíjate,
fíjate,
qué bonito queda esto,
que como aquí directamente
queremos agruparlo por planeta,
ni siquiera hace falta
que yo cree la llave,
sino que digo,
directamente del héroe,
de cada uno de los héroes,
por ejemplo,
de Iron Man,
quiero que los agrupes
por planeta
y como los planetas,
como podemos ver,
hay algunos que son de la Tierra,
lo vamos a devolver directamente
y este campo,
esta cadena de texto,
ya va a servir para agruparlos
y ahora,
fíjate,
tenemos aquí en la Tierra,
tenemos a Iron Man,
Black Widow,
Scarlet Witch,
Hulk,
Capitana Marvel,
que bueno,
es de planeta Tierra,
aunque luego se la llevaron
y Rebulinchi,
¿no?
Luego en Asgard tenemos a Thor
y Zen Wobori
y tenemos a Gamora,
no sabía que se llamaba así el planeta,
lo he tenido que buscar,
Zen Wobori,
no tenía ni idea.
Pero bueno,
ya puedes ver
cómo de potente es
y fácil el agruparlos
por un campo
que ya tengamos en nuestro objeto.
Lo mismo podríamos hacer
como hemos hecho antes,
imagínate que queremos
diferenciar entre los que son
terrícolas
y extraterrestres.
Bueno,
podríamos hacer con Avengers,
Hero
y aquí
creamos este callback
y podríamos decir,
oye,
que si,
a ver,
si el planeta,
si el planeta
es la Tierra,
entonces devolvemos
que es terrícola
y si no,
esto es más parecido
a lo que hemos hecho antes
de Impar y tal,
¿no?
Y si no,
es extraterrestre,
¿vale?
Con esto
ya los estamos agrupando
y yo,
haciendo una lógica,
estoy determinando
a qué llave lo tiene que guardar,
¿ves?
Terrícola,
pues tenemos aquí,
terrícola tenemos a 5
y extraterrestres tenemos a 2,
a Thor y Gamora
porque los dos tienen
un planeta diferente.
Bueno,
estos son ejemplos también
muy básicos,
vamos a ver alguno
un poquito más complicado.
Volvemos con los Avengers.
Como hemos visto,
podéis crear la cadena de texto,
pero una cosa
que está muy bien
es que además
de la cadena de texto
podríais utilizar
algo
que ya esté
también en el objeto,
o sea,
una mezcla.
Por ejemplo,
para los que están vivos
podéis decir,
oye,
para cada héroe
quiero crear
la llave
Alive,
pero voy a utilizar
el campo
Alive.
Y esto te puede ayudar
a veces,
por ejemplo,
para determinar fácilmente
en la cadena de texto
si está vivo
o está muerto.
Obviamente,
lo mejor sería poner
vivo o muerto y tal,
pero es solo para que lo vean,
¿no?
De que,
mira,
podemos mirar
los que están vivos o muertos
utilizando aquí
el hero.alive
que nos da el false,
el false o el true
y podemos crear la llave
para agruparlos también.
Ahora,
una cosa muy interesante
es que no solo
puedes utilizar
cadenas de texto
y esto a lo mejor
te vuela la cabeza
porque muy poca gente
realmente entiende
lo que son los símbolos,
pero bueno,
si te puedes ir de esta clase
sabiendo
qué son los símbolos,
vamos,
increíble.
Los símbolos
son un tipo de dato
que existe en JavaScript.
Por desgracia,
son muy poco reconocidos,
muy poca gente
sabe para qué son,
en qué existen
y cómo funcionan,
pero son justamente
uno de los tipos de datos
igual que los números,
los booleanos,
las cadenas de texto,
pues también tenemos
los símbolos.
Y lo bueno de los símbolos
es que es un objeto
que te garantiza
que siempre es único.
Cuando tú lo creas,
eso hace que eso sea único.
Y está muy bien
porque te puede ayudar
a crear propiedades únicas
de un objeto
sin necesidad
de depender
de las cadenas de texto.
Porque las cadenas de texto
son un poco problemáticas.
La cadena de texto,
aunque tú creas
que pueda ser única,
tampoco es tan imposible
que puedas duplicarla.
Entonces,
¿cómo lo utilizamos el símbolo?
Pues mira,
te voy a dar un ejemplo
bastante interesante.
Imagínate que vamos a crear,
vamos a agruparlos
por la fuerza
que tiene cada uno
de los héroes
de los Avengers.
Pues podríamos hacer
Human Level Power
y creamos un símbolo.
Y lo mismo hacemos
con Super Human Level Power
y creamos un símbolo.
Y lo mismo hacemos
con God Level Power
y creamos un símbolo.
Lo interesante de esto
es que Human Level Power,
ahora que le hemos asignado
un símbolo,
este símbolo es único.
Nosotros no sabemos
el valor que tiene,
pero internamente
imagínate que le ha puesto
un valor aleatorio,
único y repetible.
Por lo tanto,
Human Level Power,
que tiene un símbolo
que no sabemos el valor,
pero sabemos que es único,
va a ser seguro,
diferente a Super Human Level Power.
Y por más que yo quiera,
¿ves?
Va a ser diferente.
Y por más que yo quiera,
no voy a poder volver a crear
nunca una referencia
igual a ese símbolo.
Y esto está muy bien
porque ahora
lo que esto nos permite
podríamos agruparlos
por poder,
podemos hacer
Group by Power,
¿vale?
Y hacemos Group by,
donde tenemos los Avengers
y por cada héroe
vamos a hacer esto.
Vamos a decir,
oye,
si la fuerza
que tiene el,
creo que es Strength,
¿vale?
Es mayor a 100,
entonces vamos a devolver
que la llave
en la que la tenemos
que agrupar
va a ser
God Level Power.
Pero fíjate
qué interesante es aquí
que no estamos utilizando
una cadena de texto,
estamos utilizando
un símbolo.
Y entonces es muy fácil
que no te vayas a equivocar
porque no tienes que utilizar
una cadena de texto directamente,
que a esto se le llaman
Magic Strings,
cuando pones una cadena
de texto manualmente,
porque es muy fácil
que te puedas equivocar
y lo puedas meter
donde no sea,
pero esto,
meter una variable
tiene que existir
sí o sí.
Entonces,
este símbolo
se va a referir
a este,
que es siempre
God Level Power,
¿vale?
Luego tendríamos
que si,
vamos a poner,
si el héroe
tiene un Strength
que sea mayor
a 70,
entonces devolvemos
Super Human
Level Power,
¿vale?
Y si no,
vamos a decir
que tiene
un Human
Level Power.
Y esto nos lo está agrupando.
¿Cómo nos lo ha agrupado?
Pues vamos a verlo aquí.
Vale,
fíjate
que nosotros
si nos ponemos a mirar
parece
que los tres
están en un símbol,
símbol,
símbol.
Y es raro,
¿no?
Porque alguien puede decir,
ostras,
pero entonces
yo no sé exactamente
cómo los ha agrupado.
Lo interesante de esto,
hay dos cosas
que se pueden hacer.
Primero es que los símbolos
los podéis etiquetar,
o sea,
realmente se le puede poner
una etiqueta
para saber a lo que se refiere,
pero es que
lo interesante de verdad
es que aunque vosotros
veáis que son tres símbolos
que parecen iguales,
son diferentes,
porque ya hemos dicho
que cada símbolo
es único y repetible.
Por lo tanto,
ahora que tenemos aquí
agrupado por estas tres cosas,
si yo quiero recuperar
por ejemplo,
los que tienen nivel Dios,
lo que puedo hacer
es en el Group by Power
le paso el símbolo
del God Level Power
y aquí ya tendríamos
los que tienen
un poder mayor a 100,
¿vale?
Bueno,
he puesto,
tendría que haber sido
mayor o igual
para que también Thor
hubiera estado dentro.
Pero veis,
Group by Power,
le he pasado el símbolo
del God Level Power
para acceder solo a esos
y ya lo tendría.
Y lo mismo
si lo hiciéramos
de esta forma,
con el Human Level Power,
¿vale?
Y aquí podemos ver
que me los ha agrupado
correctamente
a Iron Man
y a Black Widow.
Esto solo os lo explico
para que sepáis,
uno,
que los símbolos
son bastante potentes,
que se utilizan bastante
para este tipo de cosas
un poquito más avanzadas
y tenéis que hacer
un pequeño código,
¿no?
Pero,
sobre todo,
que en el Group by
no solo podéis devolver
una cadena de texto,
sino que también podéis
devolver un símbolo,
¿vale?
Que si no,
estas cosas muchas veces
se olvida
y puede ser bastante interesante
en casos específicos,
¿vale?
Hasta aquí,
¿todo bien?
¿Alguna pregunta,
amigos o amigas,
para ver si esto
lo habéis entendido claro?
En materia de performance,
esto es mucho más rápido
que lo que hemos visto antes
de hacerlo manualmente,
pero,
obviamente,
esto siempre va a ser mejor
hacer a nivel de base de datos
antes que hacerlo en JavaScript,
eso sí,
pero aún así,
muchas veces puede ser interesante
que hagáis esto
en JavaScript,
el agrupar es muy típico,
de hecho,
se suele utilizar mucho
loaddash para hacer esto,
¿eh?
Muy avanzado,
tengo que volver a verlo,
bueno,
tampoco es tan avanzado,
solo hemos hecho
lo de los símbolos,
el símbolo,
básicamente,
para que entendáis
que es el símbolo,
el símbolo es un objeto
que cada vez que lo creas
es único e irrepetible,
esto quiere decir
que si yo hago
símbolo igual a símbolo,
siempre me va a dar false,
siempre,
porque esto,
para que lo entendáis
cognitivamente,
cuando veis un símbolo,
esto crea algo único,
único e irrepetible,
no sabemos el qué,
imagínate,
no sabemos el qué,
pero es algo irrepetible,
que nunca jamás
va a volver a crear lo mismo,
entonces,
claro,
como hace algo irrepetible
y tal,
bueno,
parece parecido,
pero,
pues entonces,
siempre,
siempre va a tener
una referencia única,
por eso,
puede ser buena idea
crear,
utilizarlo para las llaves,
porque así siempre vas a saber
que no se va a volver a repetir,
también incluso para cosas
que tengan que tener un identificador,
pero cuidado con eso,
porque no os podéis llevar
los símbolos
fuera del dominio de JavaScript,
¿por qué lo de poder mayor
igual a 100
no está en el grupo
de poder mayor que 70?
Porque he hecho un return antes,
eso ya es un tema
más de programación,
pero aquí,
si puedes ver,
en el group byte,
dice,
0.strength mayor a 100
y aquí hace un return,
por lo tanto,
el resto del código
ya no lo evalúa,
estamos haciendo un early return,
estamos devolviendo antes
la ejecución de la función
y por lo tanto,
ya está.
¿Midu,
usas símbolo en tu día a día?
No uso símbolo en mi día a día,
pero sí que es interesante
muchas veces utilizarlo
en cosas concretas,
no lo uso en mi día a día,
pero sí que lo he utilizado
alguna vez.
¿Es más rápido que un filter map?
Es que no tiene absolutamente
nada que ver,
un filter es para filtrar,
un map es para transformar
un array
y un group byte es para agrupar,
por lo tanto,
¿es más rápido o más lento?
Es una pregunta
que no tiene sentido,
es como preguntar
¿qué es más rápido,
una nave espacial
o un submarino?
Pues, bueno,
pues a lo mejor puedes decir,
bueno,
será más rápido
una nave espacial
de velocidad,
pero no tiene mucho sentido
realmente compararlos
porque son dos cosas
totalmente distintas,
¿vale?
Yo sí,
o sea,
¿que podría utilizar un symbol
en vez de const let?
No,
const y let son para crear variables
y de hecho,
esto lo podemos guardar
así,
symbol,
lo guardarías así,
symbol genera un valor,
por lo tanto,
no podrías dejar de utilizar
const o let,
porque eso es para crear variables,
¿vale?
Todas estas funcionalidades
también,
como podéis imaginaros,
también funcionan en TypeScript,
¿vale?
Muy bien,
vamos a ver otro ejemplo,
hay otra estructura de datos
que podéis utilizar,
imaginaos que tenéis
los héroes de DC,
los héroes de DC,
mira,
los tengo por aquí,
así que me los voy a copiar,
pero vamos a crearlos
con un set,
¿vale?
Set es una estructura de datos
bastante antigua ya
de JavaScript,
tenemos los maps
y los sets
y los sets,
al final lo que podéis crear
será para almacenar
valores únicos
de cualquier tipo,
cadenas de texto,
números,
cualquier valor primitivo
que tengáis
o símbolos también,
también podéis meter símbolos,
son como colecciones
de valores
y los sets
tienen diferentes métodos,
luego vamos a ver
algunos muy interesantes,
pero lo más interesante
que tienen
es que tú
solo puedes crear,
puedes añadir valores únicos,
así que si por lo que sea
queréis añadir el mismo valor
dos veces,
vais a ver que nos deja,
por ejemplo,
si yo hago set
y hago new set
y decimos set.add2
y set.add2,
si miramos
qué es lo que tiene set,
pues vais a ver
que solo tiene el 2
y lo tiene una sola vez,
por más que tú lo añadas,
no puedes
y esto está muy bien
porque te permite
tener colecciones
de elementos únicos
y tal.
En este caso,
vamos a ver
que también el set
lo podéis utilizar
con el group by,
o sea,
aquí tenemos los seres de EC,
de este set
he estado añadiendo objetos
el Superman,
Batman,
Wonder Woman,
Aquaman,
¿vale?
Y aquí
lo que podemos hacer
es utilizar el group by
con un set
y hacer exactamente lo mismo,
por ejemplo,
agruparlo por poder,
¿vale?
Para que veamos
los diferentes poderes,
los que tienen super strength,
pues tenemos aquí
Superman y Wonder Woman,
que es rico,
Batman
y Water,
pues tenemos Aquaman,
¿vale?
Pero también lo podríamos hacer
igual de con lo que queramos,
¿vale?
Lo que hemos hecho antes.
Esto es solo
para que entendáis
que el object.group by
lo podéis utilizar
con cualquier tipo de dato
que sea iterable.
O sea,
no solo con los arrays,
también lo podéis hacer
con los sets,
incluso con funciones iteradoras,
¿vale?
Que te devuelve un iterador.
Esto también lo podrías utilizar.
No lo vamos a ver
porque es un poco más avanzado,
pero solo para que lo entendáis
y lo tengáis en la cabeza.
No solo funciona para arrays,
sino que también
para otras estructuras de datos
que tengan un iterador.
Ahora bien,
aparte del object.group by,
hay otro también.
Ya os he dicho
que existen los sets
y también existen los maps.
Son dos estructuras de datos
muy interesantes.
Pues igual que tenemos
el object.group by,
también tenemos
el map.group by.
Por ejemplo,
de Avengers,
podríamos transformar
cada héroe.
Vamos a poner,
no sé si team,
¿no?
No tenía team,
tenía planet, ¿no?
Vale,
pues igual que tenemos
el object.group by,
también han añadido
el map.group by,
que hace exactamente lo mismo
que hemos visto antes
con el objeto,
pero en lugar de transformarte
en un objeto,
te lo transforma en un map.
Y esto puede ser interesante
porque el map
es una estructura de datos
que es más óptima
muchas veces
que el objeto
y que además
tiene cosas tan interesantes
como utilizar el get.
Por ejemplo,
si queremos recuperar aquí,
pues get
y podemos recuperar
los que son del planeta Tierra,
¿vale?
Pues aquí los tendríamos.
O podríamos mirar fácilmente
cuál es el size.
Sobre todo,
para temas de ideas
puede ser bastante interesante,
solo para que sepáis
que también podéis transformarlo
en un map.
El más típico
que vais a utilizar
en vuestro día a día
puede ser el object,
pero exactamente
el mismo método
lo tenéis también
para el map, ¿vale?
Con este método
seguro que nos cuesta menos
el app en ideas.
Puede ser.
¿Puedes hacer una prueba
de performance de map?
No, lo podéis hacer vosotros
y MacDuster,
la prueba de performance.
¿Cómo podéis utilizar
este groupby
para modificar
el objeto original?
Es decir,
para que sea pipeble.
No tiene mucho sentido
y está fuera del scope
de la idea
de modificar
el objeto original,
pero lo que podrías hacer
es reasignarlo
y ya está.
Tampoco tiene mucho sentido,
la verdad,
modificar el objeto original
en ese nivel, ¿no?
¿Qué devuelve un map
de una llave
que no existe?
Un map
de una llave
que no existe,
ya te puedes imaginar
que devuelve...
¡Ay, perdón!
Que devuelve
undefined.
Grabte a...
¿Vale?
Undefined.
Si tú intentas acceder
a una llave que no existe,
undefined.
Es porque básicamente
siempre es lo que devuelve siempre.
¿No sabía el get del map?
¿Funciona también
con un map normal?
¿Vale?
No confundáis...
No confundáis map
como estructura de datos,
¿vale?
Esto es súper importante,
¿eh?
Creo que es muy interesante
que conozcáis
tanto set como map.
Son dos estructuras de datos
de JavaScript
que ya tienen bastante tiempo
y que no son...
No son raras ni nada.
O sea,
que las podéis ir viendo bastante.
Entonces,
no confundáis
el objeto global map
que lo tenemos por aquí,
que es este,
que sería para la estructura de datos,
con el método map de Array.
Uno sería para mapear,
para transformar, ¿vale?
Este sería la estructura de datos
que os estoy enseñando.
¿Veis?
Con el new map, map set.
Esta es la estructura de datos
que sería,
si lo queréis entender,
como un mapa.
La traducción sería más mapa
que es para guardar key value
y tendríamos por el otro lado,
tendríamos el map de Array
que sería para mapear,
para transformar.
Son dos cosas totalmente diferentes, ¿vale?
Para que lo sepáis.
No son lo mismo.
Uno es una estructura de datos
que hay que entenderlo
como un mapa
o como un diccionario
y en cambio el punto map
sería para mapear,
para transformar, ¿vale?
Y bueno,
aquí tenéis diferentes...
Sí que lo podéis transformar.
Por ejemplo,
un map lo podéis transformar
en un Array
y entonces sí que podríais mapear
o podríais iterar
y todo esto, ¿vale?
¿Cuál map es mejor?
El que te lleve a tu corazón.
El que te lleve a tu corazón.
Muy bien,
pues este sería el primero,
¿vale?
El group by.
Vale,
vamos con el siguiente
que el siguiente
es bastante facilito
pero no por eso
menos importante.
El add.
Este ha llegado
add punto...
Bueno,
Array punto prototype
add.
Este ha llegado en el 2023.
Este es del año pasado.
Pero aún así
es bastante importante
e interesante.
Este te lo explico,
vamos,
en un minuto
porque vas a ver
que es muy fácil de entender.
Tiene un 93% ya de soporte,
o sea que va bastante sobrado
y ¿qué es lo que tiene de interesante?
Bueno,
lo que hace es que devuelve
un elemento del índice
que le indiques
y si no existe,
pues devuelve al define,
¿vale?
Por ejemplo,
tenemos numbers,
¿vale?
Un, dos, tres, cuatro, cinco
y le digo,
vale,
quiero que me recuperes
el que está
en la posición dos.
¿Qué pasa con este código?
Pues lo que pasa
es que me va a devolver
en la posición dos
tenemos cero,
uno,
dos.
Y en la posición dos
tenemos el tres,
pues aquí tenemos el tres.
Alguien me dirá,
pero bueno,
¿y qué diferencia hay
con que hagas esto?
Si es exactamente lo mismo
y lo que ha existido
toda la vida.
Y yo te diré,
tienes razón.
Pero el punto add
se ha añadido
por una cosa muy interesante.
¿Qué ocurre
si quieres acceder
al último elemento?
Si quieres acceder
al último elemento
y utilizamos esto,
¿qué tendríamos que hacer?
Pues numbers.length
menos uno,
¿vale?
Y así accederíamos
al último elemento.
Pero resulta
que con el punto add
podemos hacer
algo tan interesante
como esto,
menos uno.
Con el menos uno
accedemos
al último elemento.
Para el penúltimo,
menos dos.
Para el tercero
empezando por atrás,
pues con el menos tres,
menos cuatro
y menos cinco.
O sea,
lo que nos permite
el punto add
es acceder
a posiciones negativas
de un array.
Y así,
muy fácilmente,
podemos indicar
el último elemento.
Ahora,
la pregunta del millón.
La pregunta del millón
que mucha gente se hace.
¿Y esto por qué
no lo han añadido
directamente?
¿Por qué no lo han añadido
directamente
aquí?
¿No?
O sea,
¿por qué no han hecho esto?
Y ya está.
¿Por qué no lo han añadido?
Esto es una pregunta
que además me hace mucha gracia.
Me hace mucha gracia
porque hay gente
que tiene muchos años
de experiencia
con javascript y tal
y se cabrea incluso con esto.
Pero es que el tema
es que si hacen esto
pueden romper internet.
Vosotros os podéis imaginar
la de código
que hay ahí fuera
que a lo mejor
está accediendo
a un menos uno
y lo que espera
es que esto te devuelvan
de fine
porque no existe
esa posición.
Si de repente
ahora este menos uno
por lo que sea
empieza a devolver
el último elemento
la de cosas
que pueden ocurrir
ahí fuera
pueden ser impresionantes.
Entonces
porque como puede romper internet
han tenido que añadir
un nuevo método
que es .add
¿vale?
Y ya está.
Así que esto sería
esa sería la razón
y esto sería
la novedad
con lo que han hecho.
Pues ya tenemos el .add
ya tenemos uno más
este era bastante rápido.
Vamos con lo siguiente
array by copy
este os va a encantar
porque sueléis
tener muchos problemas
con estas cosas.
Vamos a echarle un vistazo.
Tenemos nuevos
e interesantes
métodos para array
¿vale?
tu reverse
tu short
tu splice
y quiz
muy interesantes
que tienes que conocer
vamos
como la palma
de tu mano
para tu día a día.
Ahora
¿cuál es el soporte
que tienen?
Pues tienen un soporte
bastante bueno
casi del 90% ya
casi del 90%
esto significa
que casi que lo podéis utilizar
sin ningún problema
si vais a utilizar
las últimas versiones
y aún así
lo podéis transpilar
o utilizar un polyfill
y olvidaros
totalmente
de que tenéis cualquier problema.
y son muy interesantes
vamos a ver por qué.
Vamos a pensar
en el típico ejemplo
original
tenemos un array
un 2-3
y le queremos
dar la vuelta
vamos a decir
reverse
vamos a decir
original
reverse
esto es un método
que ya existe
a día de hoy
que es para
darle la vuelta
a un array
y efectivamente
si miramos el reverse
vamos a ver que tenemos
esto
que le ha dado la vuelta
pero amigos
aquí
hay un problema
bastante importante
y es que si miramos
el original
resulta que
también
le ha dado la vuelta
también le ha hecho
un reverse
lo que está ocurriendo
es que está
mutando
el array original
está modificando
este array
cuando utilizamos
el reverse
o sea
el punto reverse
no solo devuelve
el array
modificado
sino que además
está modificando
el original
y esto muchas veces
no vamos a querer
que ocurra
¿por qué?
porque imagínate
que este original
nosotros pensando
que se ha quedado
exactamente igual
luego lo utilizamos
en algún sitio
decimos
ah bueno
del original
quiero acceder
a la posición 0
pensando nosotros
que vamos a tener
el primer elemento
del array
que vamos a tener
el 1
pero ¿qué es lo que
está pasando aquí?
que en el original 0
fíjate lo que me está dando
me está dando el 3
me está matando
me está matando
esto es un error
muy pero que muy
muy muy común
que pasa muchas veces
para arreglar esto
bueno
se pueden hacer
muchas cosas
pero una de las cosas
que se suelen utilizar
sería por ejemplo
hacer una copia
superficial
del array original
y ahora sí
estamos haciendo
primero una copia
y luego le damos la vuelta
hay un montón
de formas de hacer esto
no solo sería así
también podréis
por ejemplo
creo que con el concat
también lo podéis hacer
también podréis hacer
splice
creo que con el splice
de 1
también lo podéis hacer
no el splice
la ligamos
slice
puede ser
slice
con el slice
hace tiempo que no hago
sí con el slice
slice
con concat
la copia esa que hemos hecho
bueno hay diferentes formas
de hacerlo
pero
hay que hacer algo
no hay que hacer algo
hay que hacer algo
por suerte
ahora están saliendo
estos nuevos métodos
que la idea
es que
directamente digas
el original
me lo transformas
a un to reverse
lo devuelves
pero no me tocas
el array original
ya está
así de fácil
así de sencillo
son métodos
que no modifican
el original
y siempre
devuelven una copia
pero ojo
cuidado con esto
que esto es otro error
muy común
no hace copias
profundas
cuando utilizamos
arrays
que tienen un tipo plano
o un tipo primitivo
como puede ser
números
texto
booleanos
y cosas así
no vamos a tener ningún problema
con el to reverse
ya lo vamos a tener
y todo perfecto
pero
pero
imaginad que tenemos
un objeto de usuarios
y aquí tenemos una idea
uno
el nombre
midu
y dentro de fab
tenemos un objeto
con
bueno aquí he puesto
food
he puesto
age
he mezclado ahí cosas
con la comida favorita
de esa persona
tenemos un objeto
y dentro
tenemos prop
y un objeto
con propiedades
como food
y tal
claro
si ahora nosotros
hacemos
por ejemplo
hacemos un
reverse users
y hacemos
to reverse
vale
esto
perfecto
hacemos un
console log
del reverse
users
y vamos a ver
que le ha dado la vuelta
Dani
que estaba el tercero
pues ahora
aparece en la primera posición
hasta aquí todo
bien
perfecto
pero si en reverse users
accedemos
a Dani
y
de la comida favorita
resulta
que le ponemos
un panda
vamos a encontrarnos
una cosa
y es que
si accedemos
al original
bueno no sé
como le llamo
original
users
si accedemos
al original
aquí tenemos
el panda
ahí
tenemos el panda
podéis ver aquí
aquí tenéis el panda
ahí está el panda
ahí está el panda
aquí
aquí panda
panda
ahí está el panda
¿qué ha pasado con esto?
que me acaba de volar la cabeza
lo que está pasando con esto
básicamente
es que
las copias
que hace el
to reverse
y todos los métodos
que te voy a explicar
son superficiales
para que lo entienda fácil
solo copia
el primer nivel
del array
y en el primer nivel
¿qué hay?
pues en el primer nivel
tenemos este objeto
con su todo
con todas sus propiedades
y tal
pero niveles internos
de ese objeto
como por ejemplo
tendríamos aquí
este foot
y tal
no los va
a copiar
no los copia
entonces está haciendo
copias superficiales
tenedlo en cuenta
no está haciendo
una copia
íntegra
total
de todos los objetos
que hay dentro
tened mucho cuidado
con esto
porque si no
la podéis liar
las copias
que está haciendo
es superficiales
a nivel
del array
te está copiando
el array
pero lo que hay dentro
el objeto
y subobjetos
no los está copiando
son las mismas referencias
del original
así que tened cuidado
con esto
jugad
yo lo que os recomiendo
con esto
es practicad
que juguéis
que lo miréis
que practiquéis
que digáis
oye
pero esto
¿por qué pasa?
y tal
y así
pues lo vais a poder
comprender
mucho mejor
superficial
solo es
a nivel
del array
no entra
objetos internos
que tengáis
directamente
no hay copias
profundas
si lo que queréis
es una copia
profunda
de algo
lo que tendríais
que hacer
es hacer
por ejemplo
un structure clone
a esto sería
un deep copy
¿vale?
podéis hacer una copia
profunda
y esta copia
profunda
entonces sí
pues le podéis
dar la vuelta
y ahora
que le hemos hecho
una copia profunda
de users
y esta copia profunda
lo que hemos hecho
es convertirlo
al to reverse
pues fijaos
que ahora
no tenemos el problema
y el panda
que lo estamos haciendo
del reverse users
no llega
al original
¿por qué?
porque del original
hemos hecho
una copia profunda
con el structure clone
¿vale?
esa sería la forma
más correcta
de hacer una copia profunda
en javascript
a día de hoy
así que
que tengáis en cuenta esto
que no tengáis
ningún tipo de problema
que lo entendáis
perfectamente
con el structure clone
o con el hack
del json parse
json stringify
todo tiene
sus ventajas
y sus desventajas
yo a día de hoy
seguramente utilizaría
casi siempre
structure clone
pero cada uno
que utilice
lo que quiera
el users
el que dice
es Nico
Nico dice
¿y esto sería
una copia profunda?
no
esto no sería
una copia profunda
esto no es una copia profunda
de hecho
aquí puedes ver
otra vez
el error
esto
es una copia
superficial
de los objetos
o sea
del array
exactamente lo mismo
están haciendo
una copia superficial
ahí lo tendrías
¿vale?
es superficial
no sería una copia profunda
de nuevo
la única forma
oficial
de hacer una copia profunda
sería con structure clone
hay hacks
que bueno
son más polémicos
pues el de json parse
y json stringify
que obviamente
puede tener sus problemas
puede ir bien
pero si por lo que sea
aquí tenéis un date
o tenéis algún objeto complicado
pues vais a tener problemas
y va a tener algún problema
os voy a dar
ejemplos de también los demás
no os preocupéis
muy rápidos
para que los tengamos
por ejemplo
el to sort
to sort
imaginemos que tenemos números
3, 8, 2, 4 y 10
está bien porque esto sirve también
un poco de
de revisión
number sort
esto es lo típico
ojo
que ha pasado aquí
este es el error típico
del punto sort
no solo
no solo
los ordena mal
encima
ordena
también nos modifica
lo original
como podéis ver
nos está modificando
lo original
con el sort
para arreglar esto
para que no modifica
lo original
pues al menos
teníamos que hacer
el to sort
vale
y al menos ahora
sí que el original
lo deja tal cual
y aquí tendríamos
el sort
numbers
pero ya veis
ya veis
que el sort
numbers
en realidad
está mal
está mal
porque no está
bien ordenado
esto
hay gente que dice
que es un error
de javascript
yo digo que no es un bug
es una feature
¿por qué?
porque lo que está haciendo
javascript por defecto
aquí
es ordenarlos
por su valor
unicode
o sea
transformarlos
en cadena de texto
y en cadena de texto
resulta que el 10
está por delante
del 3
porque como empieza
por el 1
y en la cadena de texto
en unicode
del 1
está por delante
del 3
pues te lo está poniendo aquí
esto es muy sencillo
para arreglarlo
lo único que tienes que hacer
es pasarle aquí
un callback
un callback
para decirle
cómo tiene que ordenar
en este caso
los números
y para ordenar los números
lo que hay que decirle es
dónde tendríamos
que comparar
entre dos números
y la diferencia que tiene
por ejemplo
si tienes el a y el b
y dices
que los quieres ordenar
de forma ascendente
lo que haríamos es
a menos b
y así lo que le vamos a decir es
si va a dar
menos 1
0
o 1
y va a indicar
cuál es la posición
de este elemento
por ejemplo
si aquí tendríamos
tiene que saber
que tiene que llegar
y poner un menos 1
vale
pues si es menos 1
esto siempre tiene que devolver
lo voy a explicar
con el
con el mdn
porque lo vamos a ver
un poco más claro
hay reverse no
con el short
lo que tenemos que hacer aquí
es comparar
si es menor que 0
se sitúa a
en un índice menor que b
es decir
que a viene primero
o sea
aquí lo que estamos haciendo
si queremos que sea ascendente
lo que estamos haciendo
es que si es menor que 0
que en este caso
lo va a hacer
va a indicarle
que ese número
queremos que esté
por delante
si es menor que 0
si es mayor que 0
lo que estamos diciendo
es que ese número
tiene que ir por detrás
y así es como lo va a estar ordenando
por ejemplo
si ahora quieres que sea descendente
le vamos a decir
b menos a
y va a ocurrir
totalmente lo contrario
ves
nos está ordenando al revés
esto lo podéis hacer
con objetos también
si esto fuesen objetos
podríais aquí
de entrar aquí
y decir
vale
devuélveme
de cada objeto
imagínate
por edad
pues si la edad
es mayor
o menor
que tal
siempre lo podéis hacer así
vale
con el menos
porque justamente así
vais a saber
si va a dar negativo
o no va a dar negativo
vamos a poner
age 18
y age 22
y age 23
vale
y vais a ver
que así sería otra vez
ascendente
y si le dais la vuelta
va a ser descendente
vale
veis
23
22
y 18
la verdad
sinceramente
que con que os acordéis
de
a menos b
es ascendente
b menos a
es descendente
o va a arreglar la vida
de cómo ordenar
cosas en javascript
muchas veces
si son cadenas de texto
una cosa que sí que os recomiendo mucho
por ejemplo
si son nombres
si tenéis Miguel
y aquí vamos a poner
Ana
y vamos a poner
Ángela
vale
aquí hay un problema
porque
imaginad que queréis ordenar
por cadena de texto
claro
si aquí ponemos el name
y aquí el name
nos vamos a encontrar
alguna sopresilla
vale
bueno
he puesto numbers
pero imaginad que son
esto es name
esto es name
sorted names
y esto es name
vale
voy a cambiarle los nombres
para que nadie se preocupe
vale
pues sorted names
vale
aquí ya podéis ver
Miguel
ah espérate
que esto
aquí
se me ha olvidado
también esto
name
vale
entonces aquí podríais ver
name
Miguel
Ana
y Ángela
no
y si le damos la vuelta aquí
pues vamos a encontrarnos
que luego tenemos Miguel
Ana
y Ángela
claro
aquí no podéis hacer el menos
aquí no podéis hacer esto
no tiene sentido hacer
menos y más
porque vais a ver que no hay un sentido numérico
pero por suerte
hay un truco
que es muy sencillo
lo que tenemos que hacer es
utilizar
el local compare
aquí lo que haces es
a
punto
local compare
b
y ya está
oh
local compare
no es una función
coño
local compare
coño
local compare
a punto
tu local
joder
local compare
no es una función
o sería tu local compare
con local compare
local
local compare
no
se lo he puesto bien
ah coño
coño
ya está
perdón
perdón
que no estaba haciendo al correcto
vale
ahora ya está
vale
pues esto
tendrías que comparar
con el a punto name
claro es que pensaba
como no lo he cambiado antes
a punto name
gracias que me lo habéis puesto en el chat
que si no hubiera estado aquí
todo el día mirándolo
bueno pues a punto name
local compare
y también al revés
vale a punto name
local compare
aquí lo tendríamos así
y si lo queremos
del otro lado
lo tendríamos aquí
lo tendríamos
hostia pero ahora no lo está haciendo
no
a ver voy a quitar este
porque me ha dejado
a local compare
me está dejando loco esto
ahora no me lo ha hecho
correctamente
no
espérate
ahora ya
ahora
ahora
ahora
claro
no estamos comparando
correcto
vale ahora sí
ahora sí
esto sería ascendente
y esto sería descendente
vale
ahora sí que lo tenemos bien
y es interesante este
del local compare
porque va a tener en cuenta
el tema de los acentos
porque si no
va a ser un poco
un poco fail
y este sería
para los strings
con que sepáis estos
el de los números
ascendente y descendente
y este que ya sabéis
que habéis visto
que yo no me acordaba
de memoria
con el local compare
sí que me acordaba
que era local compare
pero se me ha olvidado
el tema de acceder
directamente a la propiedad
peor para mí
bueno pues eso sería
con el to sorted
el to splice
el to splice
tengo aquí un ejemplo
de un perrito
el to splice
este suele ser
a la gente
que le cuesta un montón
vale
porque imaginad
que queremos
cambiar este perrito
claro
muchas veces
si lo que queremos
es cambiar este perrito
pues lo que hacéis
directamente
es decir
dogs
0 y 1
en la posición 1
vamos a poner otro perrito
que sea
a ver si
un perro
vamos a poner
este perrito
vale
con esto ya lo estaríamos
modificando
perfecto
pero claro
y si te digo
y si te digo
que metamos
un perrito
entre este
y este
si te digo
no
quiero que añadas
un perrito
entre esta posición
y esta posición
entonces que
aquí empiezan
los problemas
porque claro
cambiar un perrito
está muy bien
pero añadir
un perrito
ahí en medio
bueno
para eso justamente
existe
el splice
donde le decimos
el índice
que en este caso
sería 1
el número de elementos
que queremos borrar
que en este caso
no queremos borrar ninguno
y el elemento
que queremos añadir
que en este caso
vamos a meter
este perrito
vale
así que
ahora
en este
dogs
vamos aquí a dogs
vamos a tener al perrito
lo hemos añadido ahí
que lo queremos añadir
más adelante
después de este
entre este y este
pues lo que hacemos aquí
es ponerle un 2
y vais a ver
que aparece ahí en medio
está muy interesante
splice
porque también además
te permite borrar elementos
si por lo que sea
también quisiese borrar
el perrito
que está en la posición 2
pues lo borraríamos
vale
este sería el que está
en la posición 2
porque 0, 1, 2
este índice
lo borramos
y podéis borrar
incluso
podéis añadir
más de uno
por ejemplo
podemos poner aquí
otro perrito
¿ves?
y se añade aquí
es súper potente
este método
pero la gente
se vuelve loca
y además
un problema que tiene
es
primero
que dogs.splice
pues lo que devuelve
el resultado
son los perritos
que ha eliminado
¿vale?
los elementos
que ha eliminado
no devuelve
el array modificado
sino que devuelve
lo que ha eliminado
entonces mucha gente
de aquí
ya le vuela la cabeza
y además
el splice
otro problema que tiene
es que nos está
modificando
el array original
entonces el original
ya tiene los perritos nuevos
que esto a veces
pues puede tener sentido
pero muchas veces
no queremos
ahora
lo único que tenemos que hacer
es cambiar esto
por un
to splice
y vamos a tener
en el result
el resultado
con el nuevo array
y el original
se va a mantener
sin tocar
es un método
muy muy potente
especialmente para manipular
arrays
y meter en medio
y hay mucha gente
que se vuelve loca
utilizando cosas
como por ejemplo
haciendo cosas
como así
¿no?
que dice
ostras
pues voy a meter
voy a meter
voy a crear
un array nuevo
new dogs
donde tenemos aquí
todos los perros
del 0 al 1
y aquí voy a meter
un perro
y o sea
voy a meter
el perro nuevo aquí
y luego de aquí
voy a seguir
haciendo un slice
del 1 al
dogs.led
creo que ya no hace falta
ni poner nada
¿no?
y algo así
también te podría servir
creo que si no lo he hecho mal
no sé si lo he hecho
lo he hecho regulinchis
creo que lo he hecho regulinchis
o bueno
si lo he hecho
lo he hecho mal
porque lo hemos utilizado el 2
¿vale?
pero esta sería la idea
¿no?
hacer algo así
lo que pasa es que esto
es bastante más costoso
y yo creo que esto
una vez que
especialmente si tenéis
index
1
2
delete count
1
si hacéis algo así
lo vais a entender
mucho mejor
que tener que crear
un nuevo array
creando aquí
como para hacer un spread
de todos los elementos
del 0 al 2
crear aquí
el que está manualmente
y luego el resto
yo creo que este
te puede simplificar
si lo entiendes
y lo dominas
¿vale?
este sería otro
el 2splice
y tenemos el último
que también es muy interesante
que es el width
este es el más sencillo
y uno de los más potentes
que hay nuevos
en enmascript
porque este
viene a arreglar
este
de toda la vida
por ejemplo
si tenemos aquí
un array de números
y queremos modificar
una posición
haríamos esto
¿no?
si queremos
la posición
la primera
la queremos modificar
haríamos esto
y esto
obviamente
modifica
la array original
¿no?
aquí tenemos este 2
y tal
esto es muy típico
algo que haríamos
en nuestro día a día
y esto pues
ya está
si lo quieres modificar
lo modificas
pero ¿qué pasa
si no quieres modificar
el array original?
¿qué pasa
si por lo que sea
imagínate
tenemos aquí
un array de
de emojis
¿vale?
y por lo que sea
queremos cambiar
el
este
este oso polar
¿vale?
¿vale?
pues
lo que haríamos
es esto
de index to change
to change
y aquí pondríamos
yo que sé
el perrito
¿vale?
vamos a poner el perrito
este sería el array
y estaría modificado
¿qué pasa si queremos
una copia?
bueno
pues que podríamos
empezar a hacer
cosas raras
¿no?
podríamos hacer
otra vez
lo del concat
podríamos
bueno
el concat
que además
tenemos que hacer esto
podríamos hacer esto
y el original
el original
estaría así
y podríamos tener
uno modificado
aquí
que sería el resultado
¿no?
tenemos el resultado
y tal
vale
perfecto
el resultado
que daría
bueno
claro
encima el resultado
claro
el resultado este
no será el resultado
porque este
directamente lo que pasa
es que
esto lo teníamos que poner
separado
porque esto es lo que devuelve
la asignación
o sea que no podemos
hacer esto tampoco
tendríamos que tenerla copia
y tal
bueno
esto es un poco rollo
lo que podemos hacer
es utilizar el width
el width
que esto es un ejemplo
muy típico
pero ahora te voy a enseñar
un patrón muy típico
en redax
que pasa muchas veces
y que cuando lo veas
dirás
ah
para esto
pues en lugar de hacer
esta asignación
lo que diríamos
es que queremos
este array
lo queremos
pero
en el índice este
queremos tener
un perrito
¿vale?
queremos tener un perrito
y esto es lo que va a ocurrir
esto lo vamos a poder guardar
ahora sí
en resultado
porque siempre nos va a devolver
el nuevo array modificado
y este nuevo array
vamos a tener el perrito
pero el original
va a tener
el oso polar
perfecto
o sea
ahora sí que tenemos
una copia nueva
con la modificación
que le hemos dicho
hasta aquí todo bien
pero en redax
hay un patrón muy típico
que habréis visto
mil millones de veces
y de hecho
he intentado
hacer un ejemplo
exactamente
con los todos
porque claro
muchas veces
el ejemplo de redax
se hace con todos
y he dicho
pues hay que hacerlo
mirad
imaginad
que queremos cambiar
este 2
que el completo
le queremos hacer un toggle
queremos pasar
del valor que tenga
en este caso false
lo queremos pasar a true
¿vale?
por lo tanto
tenemos la información
que la id
que queremos cambiar
es la del 2
entonces
vamos a hacer
claro
como es redax
que bueno
si no sabes que es redax
no te preocupes
cualquier estado de react
o casi cualquier estado
de cualquier framework
de UI que utilices
muchas veces
la actualización del estado
tienes que hacerla
sin modificar
el array original
sin mutarlo
entonces
¿qué pasa?
lo más fácil
sería esto
que sería
vale
vamos a tener
el to do
to change
vamos de los to do
vamos a encontrar
el to do
que tenga la id
que sea igual
del id to toggle
y vale
to do to change
punto completed
va a ser igual
a
to do to change
punto completed
pero
con la
negación
para darle la vuelta
esto
funciona
hace lo que deberíamos
estar haciendo
pero está mal
mal
porque muta
el array original
¿por qué muta
el array original?
en realidad no muta
el array original
lo que está mutando
es este objeto
estamos mutando
el objeto directamente
porque ves
este to do to change
lo podemos ver muy fácil
si yo hago un console log
de to do
vamos a ver
que aquí
ves
el original
este original to do
este completed
está true
y aquí estaba en false
por lo tanto
estamos
modificando el original
esto
mal
no es lo que queremos
lo modifica
pero no está bien
¿cómo tendríamos
que hacer esto
bien
para
no mutar
el original?
que no está mal
y lo podéis seguir
utilizando
y lo podéis seguir
haciendo sin ningún problema
tendríamos que hacer
un map
del to do
¿vale?
donde cuando encontremos
el to do
que queremos modificar
lo que vamos a hacer
es devolver
este to do
copiarlo entero
y el completed
le vamos a dar la vuelta
a to do completed
solo esa propiedad
el resto
la vamos a copiar
y el resto de elementos
lo vamos a dejar
exactamente igual
¿vale?
y ahora sí
podemos ver
que tenemos aquí
el array original
no, el array original
todo completed
espérate
porque esto
me está haciendo el map
ah claro
porque esto
estaba flipando
porque digo
hostia
si esto me está devolviendo esto
¿por qué es tan false?
y claro
es porque estoy haciendo esto antes
y esto me lo está poniendo a true antes
ahora sí
vale
entonces
este to do map
esto devuelve esto
y si miramos el original
vamos a mirar
el to do original
vamos a ver
esto lo vamos a poner justo debajo
y aquí vamos a poner el result
lo guardamos aquí
y así tendremos
console.log
con el result
y vamos a ver que el original
está sin modificar
y el resultado
está con el complete
modificado correctamente
esta sería la forma correcta
y la típica
en la que se hace este tipo de operaciones
y la podéis seguir haciendo así
si la entendéis
si la comprendéis
está perfecto
pero si os animáis
hay una forma
que no voy a decir
que sea mejor ni peor
pero es diferente
y que además
seguramente
no hace falta
hacer una iteración
tan compleja
y una recreación
bueno
el objeto este
hay que recrearlo igual
pero a lo mejor
lo que es
la indentación
va a ser menor
¿vale?
vamos
vamos a usar
el punto width
¿vale?
primero tendríamos que tener
el index del to do
para eso
del to do
vamos a encontrar
el to do
que tenga la id
que sea igual
a la que queremos cambiar
¿vale?
una vez que tenemos
el index del to do
y voy a
voy a poner esto aquí abajo
¿vale?
esto aquí abajo
y voy a
voy a comentar este
para que no esté ahí en medio
dándonos por saco todo el rato
entonces ahora
tendríamos que tener
el to do original
¿vale?
de los to do original
vamos al to do
punto add
ya que lo hemos aprendido
index to do
este sería
el to do original
y ahora simplemente
de los to do
quiero
tener aquí
en los resultados
de los to do
en el índice
en el índice
que nosotros indiquemos
que es el que hemos recuperado aquí
el que queríamos modificar
vamos a querer tener
el mismo
original to do
pero con el completed
que sea
original to do
punto completed
¿vale?
o sea que
voy a dejar esto así
para que lo veáis un poquito mejor
y ya está
¿qué tiene de bueno?
a ver
puede ser que sea un poco más de código
puede ser
pero es verdad que es
menos indentación
no tienes que crear
como tal
a lo mejor tanta complejidad
pensando en
lo que tienes que hacer
dentro de la función
sino que simplemente lo haces
una línea tras otra
aquí queda un poco largo
porque también es verdad
que yo le he estado dando aquí
como nombre muy muy semántico
para que lo entendáis perfectamente
y también puede ser
que esta información
realmente ya os venga dada
porque suele ser bastante típico
que ya tengáis este tipo de información
pero igualmente
lo que estamos consiguiendo aquí
es que
de una forma como más declarativa
no tanto
diciéndole en cada paso
vale
si tienes esto
entonces esto
y tal y tal
sino que
lo que estamos haciendo es
recuperar el índice
tengo ya el to do original
simplemente
me tienes que pasar
que quiero estos to do's
y me cambias este
el de este índice
quiero este
todos los demás
no me importan
no estoy haciendo absolutamente
nada con ellos
y ya tendré aquí el resultado
será otra forma
totalmente diferente
de hacerla
no digo ni que sea buena
ni mala
y ya está
simplemente lo tendríais
y ya está
vale
pues ahí lo tenéis
midus
si find index devuelve el menos uno
el punto add devuelve
el último valor
no es lo que quieres
bueno pero en este caso
es verdad
pero en este caso
a ver
no estoy metiendo
a todos los casos
de no un cornet case
de si no existen los to do's
y tal
de hecho esto
tened en pie
muchas veces
que lo que estoy haciendo
en realidad
es como que esto
yo doy por sentado
que quizás viene de fuera
lo que pasa es que estoy haciendo
el contexto ahí
para que entendáis
porque si no
es un poco raro
¿de dónde sale esto?
bueno pues para que lo entendáis
pero bueno
no me voy a meter
en los cornet cases
imaginad que no viene
no llega el to do
en una aplicación
estaría aquí todo el día
estaría todo el día
dando demasiado contexto
estaría todo el día
básicamente
lo que hicieron
ojo
Fernando dice
que lo que hicieron
fue crear métodos
que arreglan
lo que ellos mismos dañaron
es como cuando un nuevo dev
llega a la empresa
y hace código sin seguir estándar
y luego lo tienen que solucionar
en este caso arreglaron
lo de no modificar
el array original
es interesante
interesante
pero no estoy de acuerdo
del todo
o sea
sí que es verdad
que es raro
que hay algunos métodos
que mutan en array
y otros que no
y que en un mundo ideal
hubiera sido genial
que ninguno mutase
pero
no hay que entender
que mutar
el array original
sea algo malo
o sea
no mutar
el array original
no es que sea algo malo
per se
sino que simplemente
es algo que pasa
yo entiendo
que hay mucha gente
que a lo mejor entiende
la programación funcional
como que todo
tiene que ser así
pero
mutar el array original
no es algo malo
no es algo negativo
es algo que pasa
lo importante
en realidad
es saber que pasa
eso es lo importante
y tener la posibilidad
de que no ocurra
si no nos interesa
yo creo que eso es lo importante
porque mucha gente
como que
piensa que es que sea malo
y no es que sea malo
por ejemplo
estamos mutando arrays
desde toda la vida
desde que
existen
y hacemos esto
por ejemplo
no sé
cuando accedemos a un array
y hacemos esto
esto está
mutando el array original
y no es algo que esté mal
¿sabes?
es algo que se hace
y punto
o sea
yo creo que son
al final herramientas
que sí
que puede ser
que puedan causar confusión
que entiendo
que es lo que
a lo mejor
estás comentando
¿no?
eso puede ser
pero no creo que tenga que
porque ser malo
y ya está
¿por qué no sería bueno
mutar un array
y un objeto?
pues el tito
por lo que comentaba
la verdad que
mutar arrays y objetos
suele ser algo
bastante bueno
en temas de rendimiento
porque muchas veces
lo que ocurre
es que no tienes que crear
un nuevo objeto en memoria
o un nuevo array en memoria
y tal
¿pero por qué no hacerlo?
pues muchas veces
más que nada
porque
puedes causar problemas
si tú
sin saberlo
como lo hemos explicado
antes
con el ejemplo
del reverse
pero si tú
por lo que sea
no eres consciente
que estás cambiando
el array original
y lo sigues utilizando
el problema es que
puedes tener resultados
inesperados
si tú haces un reverse
y resulta
que le da la vuelta
a todos los números
tú no eres consciente
y sigues utilizando
ese array
como si nada
pues vas a tener
problemas seguro
te va a aparecer
en algún sitio
el problema
y luego
el problema también
que tenemos
con los arrays
y los objetos
es que
crear
utilizar siempre
el mismo array
el problema que tiene
RIAG
y muchos de estos frameworks
es que no son capaces
de diferenciar
si realmente
hay un cambio
por eso
hay que generar
un nuevo array
porque así sabe
diferenciar
la referencia
del array anterior
con el nuevo
porque si fuese
el mismo
pero modificado
no sería capaz
de tener la diferencia
y no haría un re-render
porque pensaría
ah pues es lo mismo
pues ya está
eso sería un poco
la idea
¿vale?
muy bien
vamos con más cositas
pues ya tendríamos aquí
este
perfecto
vamos con el
find last
y find last
index
find last
find last
y
find last
bueno
find last
este
es bastante sencillo
también
lo podemos explicar
bastante rápido
es para encontrar
el último elemento
de un array
que cumple la condición
esto es de
ECMAScript 2023
bastante nuevecito
también
también tiene un soporte
bastante generoso
93,52%
o sea
que está
ya se puede utilizar
bastante
todos navegadores modernos
lo tienen
también las nuevas versiones
de
de
node
lo están utilizando
muy
muy sencillo
pero muy
muy interesante
de conocer
más que nada
para no hacer cosas
que no necesitas
por ejemplo
de los números
quieres encontrar
el último número
que es par
claro
pues
mal
porque
muta
el array
original
sin necesidad
dices
no
pues voy a hacer
numbers
punto
reverse
y entonces
ahora sí
voy a hacer un find
del número
que sea
que sea par
vale
perfecto
esto te da el 6
pero resulta
que tú haciendo esto
pues estás
mutando
el array
original
no es que sea malo
pero
tampoco
tenía la necesidad
y estás haciendo
una modificación
si tú sigues
utilizando el numbers
en el resto
de tu código
solo por hacer esto
ya la has liado
vale
ya la has liado
obviamente
una forma
que estaría bien
que no habría
ningún problema
sería utilizar
el to reverse
no
alguien diría
ah pues utilizar
el to reverse
funciona
pero
no es óptimo
vale
no es óptimo
¿por qué?
porque es verdad
tú haces el to reverse
que la acabamos de aprender
haces esto
quedas como una gloria
y uff
madre mía
la programación funcional
es lo máximo
es lo máximo
eh
bueno
espérate
porque no es to reverse
y además esto
no me está dando el 6
ah
no me está dando el 6
porque está este
que está montando
la regla
ahora sí
¿no?
numbers to reverse
y haces el find
y te encuentra el 6
y lo bueno es que
hacemos un console log
de numbers
y no lo ha tocado
no lo ha modificado
perfecto
todos contentos
he sacado el 6
y no he modificado
el problema
obviamente que el rendimiento
no es óptimo
porque numbers.to reverse
lo que hace es
crear
tiene que iterar
internamente
este
este
este array
le tiene que dar la vuelta
tiene que generar un nuevo array
de las mismas posiciones
que el original
y luego lo tiene que iterar otra vez
para encontrarlo
o sea
mucho trabajo
no está mal
funcionar funcionaría
luego tendríamos
que esto estaría bien
usar un bucle
al revés
lo puedes hacer con un while
lo puedes hacer con un for
no puedes hacer el lead
numbers.length
esto es lo típico
menos uno
y aquí pues decís
que mientras sea cero
y menos menos
le damos la vuelta
es demasiado código
yo la verdad
que no me gusta mucho
utilizar esto
porque
como demasiado código
y muchas veces
cometo errores
de no me acuerdo
si es mayor que
no sé qué
pero funcionar funciona
vale
pues encuentras el último
y ya está
el que
mira ves
¿dónde la he cagado?
¿dónde la he cagado?
¿en algún sitio la he cagado?
usar un bucle al revés
¿dónde la he cagado?
ya
algo la he cagado
en algún código
que no veo
a ver si alguien me lo dice
entonces ¿para qué sirve el to reverse?
bueno
el to reverse sirve para hacer una copia
pero en algunas cosas
es el return
¿es el return?
¿por qué?
ah es el return
no, no es el return
o sea me está dando un expected token
en algún sitio
ahora sí es el return
vale, vale
ya
pues vamos a hacer un console.log
es verdad
es el return
porque no estamos en una función
entonces vamos a poner un break
y ya está
vale
vale
pues esto daría el 6
tenéis razón
era el return
tenéis toda la razón
vale
pues aquí tendríamos con el console.log
devolvemos el numbers
y hacemos un break
justamente después
vale
perfecto
pues ya está
así además solo iteramos
hasta que encuentra ese elemento
perfecto
pero bueno
es mucho código
sinceramente
o sea
yo no
dice break
no es un buen uso
bueno a ver
no es un buen uso
pero tampoco hay mucha historia
si no puedo utilizar el return
porque no estoy dentro de una función
y no me dejas utilizar el break
¿qué hago?
¿dejo que itere todos los elementos
aunque ya lo he encontrado?
no tiene sentido amigo
o sea
tú dices que no es un buen uso
vale
pues venga
vamos a dejar esto así
vamos a hacer un console.log
aquí de la i
y ¿qué pasa?
ah
pues lo iteramos
lo encontramos en la primera iteración
pero no
dejamos que itere
porque no es un buen uso
y ya está
¿no?
o sea
pues no
lo rompemos
rompemos ahí el loop
y ya está
es que
no hay un buen uso
es que no se puede utilizar un return
porque no está dentro de una función
si fuese dentro de una función
pues ya está
otra opción
otra opción
solo para que vaya súper bien
sería un process.exit0
y ya está
y rompemos note entero
¿sabes?
rompemos toda la ejecución
eso sería buenísimo
eso sería buenísimo
o apagar el sistema
apagar el sistema
bueno
en este caso
creo que está
que podemos
nos podemos permitir un break
¿vale?
entonces
aparte de esto
aparte de esto
ah sí
bueno otro
dice i igual a cero
sí
cambiar además el i también
bueno esto está bien
pero es verdad que es demasiado código
yo creo que lo mejor
muchas veces
es
bueno muchas veces
no
en este caso
y ahora que lo sabemos
es utilizar
el nuevo método
que lo que hace
es buscar el elemento
al revés
o hacemos un numbers.findlast
y ya está
y esto
lo que va a hacer
es que
va
perdón
va a hacer
la iteración
al revés
sin necesidad
y es que claro
fijaos la diferencia de código
findlast
¿vale?
y aquí lo tenéis
esto lo que hace es
directamente
va a hacer la iteración
al revés
y va a encontrar
el primero
desde el final
y con esto
ya tendríamos el 6
sin modificar
sin crear un array
sin necesidad
de crear un bucle
for o while
o lo que sea
simplemente
con este código
ya podríamos encontrarlo
y no solo esto
sino que también
podéis encontrar también
el índice
si por lo que sea
lo necesitáis
podríais crear el índice
o incluso
el índice
también veríais
que si intentáis
buscar un número
que no existe
va a dar menos 1
porque no existe
y ya está
pero bueno
solo para que lo sepáis
findlastindex
os daría el índice
del elemento
que ha encontrado
y findlast
os encontraría
el elemento
sería exactamente
el mismo funcionamiento
que find
y findindex
solo que al revés
y ya está
ese sería el tema
por supuesto
también lo podéis utilizar
con objetos
o sea
con array de objetos
si por ejemplo
tenemos aquí
people
y decimos
vale
quiero encontrar
el último
la última persona
que tenga
una edad
mayor a 30
vale
pues nos va a encontrar
aquí a bob
que es el último
si le decimos
que sea menor
a 40
pues nos va a encontrar
jane
que es la penúltima
vale
así que ahí podéis ver
un poco la diferencia
porque si ponen find
nos encontraría a john
que es el primero
pero si empezamos
desde el final
pues ya lo tendríamos
muy útil
muy interesante
así que ahí
os lo dejo
find last
y find last
index
asignaciones lógicas
vamos con las asignaciones lógicas
las asignaciones
para las asignaciones
vamos a hacer
vamos a hacer
una cosita
las asignaciones lógicas
son una forma
de asignar
directamente
a una variable
a una constante
un valor
pero
aplicándole
una lógica
en el sentido
de que
bueno
claro
estoy pensando
que una constante
no tiene sentido
pero bueno
asignarle un valor
a una variable
dependiendo
de si esta variable
ya tiene
un valor
truci
falsi
o nulo
vale
y esto te puede evitar
bastante código
pero claro
para entender
las asignaciones lógicas
muchas veces
hay que entender
la lógica
directamente
y es que en javascript
todos los valores
tienen una interpretación
boleana
cuando son evaluados
dentro de un operador lógico
o cuando estamos
utilizando
bolean
por ejemplo
nosotros podemos ir aquí
y decir
vale
pues bolean
2
y esto tiene
true
¿por qué?
porque todos los valores
en javascript
tienen una representación
boleana
de true
o de false
por ejemplo
la representación
de 0
sería false
y aquí es donde tenemos
uno de los problemas
que a mucha gente
pues le cuesta
que tenemos
los valores
falsi
por ejemplo
el 0 es falsi
pero tenemos
el false
es falsi
la cadena de texto vacía
el null
el undefined
y el null
estos
son todos
los valores
falsi
no hay más
ya está
con que te sepas esto
ya te vas a saber
los truci
porque los truci
son
todos los demás
todos los demás
que obviamente son
true
la cadena de texto
así
tendríamos el symbol
por ejemplo
el symbol
también sería truci
tendríamos
una cadena de texto
bueno
cadena de texto cualquiera
el array
el objeto
cualquier cosa
un new date
lo que te dé la gana
¿vale?
ahí lo tendríamos
estos serían
falsi y truci
¿vale?
falsi y truci
sí
también la cadena de texto
false
también sería truci
¿vale?
porque es una cadena de texto
que tiene algo
y ya está
el 0 es falsi
sí
el 0 es falsi
¿vale?
el 0 es falsi
el menos 1 es true
¿tú qué crees?
¿tú qué crees?
¿tú qué crees?
solo el 0 es falsi
solo el 0
es muy sencillo
es muy fácil
lo único que tenéis que
lo único que tenéis que acordaros
es de esto
es de los falsi
los falsi son estos
0
false
cadena de texto vacía
null
undefined
y none
no hay más
punto
ya está
esos son valores
falsi
son valores que
cuando utilizas
por ejemplo
el bolean
tú le pasas false
pues te da false
si das null
te da false
si le pasas un none
te da false
estos son los falsis
como ya he explicado
la cadena
el array vacío
también da true
y el objeto vacío
también da true
y esto es totalmente normal
¿vale?
es normal porque
el como lo entiende esto
es que no está vacío
por sé
¿vale?
porque tiene diferentes propiedades
que nosotros no vemos
y ya está
aparte de esto
y os voy a hacer
os voy a hacer un croquis
que esto ya os lo vais a poder guardar
en vuestra retina
por el resto de
vamos
para siempre
¿vale?
para siempre
os vais a poder
guardar esto
y nunca más
jamás
vais a tener problemas
de los boleanos
y la madre de los parios
mirad
tenemos aquí
todos los valores
de javascript
interpretación
boleana
de los valores
en javascript
pero es que
esta tabla ya
cuando tengáis esta tabla
vais a decir
¿por qué he tenido problemas
con esto en mi vida?
bueno
es que no sé si en vuestra vida
pero javascript logo
venga
vamos a ponerle el logo
de javascript
en un momento
yo sé que a mucha gente
le cuesta
hostia
ha salido javascript pálido
javascript pálido
yo sé que a mucha gente
le cuesta
pero es que
muchas veces
más que intuición
es acordarse de los falsi
y ya está
una vez que tenemos esto
solo tendríamos que pensar
en dos conjuntos
¿vale?
y ahora veremos
que tenemos un tercer conjunto
pero no os preocupéis
que es bastante sencillo
y en los conjuntos estos
tendríamos aquí
los falsi
que en los falsi
ya os he dicho
cuáles son los que tenéis
que tener en cuenta
¿vale?
vamos a ponerlos por aquí
tenemos el cero
este vacío
el false obviamente
el none
el
y tendríamos otro
otro dos más
¿vale?
pero por ahora
vamos a poner estos
estos
y tenemos
dos especiales
que son muy importantes
que recordéis
que voy a poner
marroncitos
que son
vale
ahora le digo
el nombre que tiene
antes del spoiler
¿vale?
pero primero os digo
null y undefined
¿vale?
null y undefined
también son falsi
¿vale?
también son falsi
por eso están
dentro del falsi
pero están dentro
de un subconjunto suyo
especial
que ahora veremos
y luego tendríamos aquí
los truci
truci
que serían
todos los demás
¿vale?
así que
ponemos aquí
todo lo
demás
y aquí pues podéis poner
todos los ejemplos
que queráis
el uno
el
el uno
el este
el uno
el true
el
array vacío
esto
yo que sé
cadena de texto
el símbolo
es que da igual
da igual
lo que penséis
da igual
lo tenéis aquí
todos los demás
o sea no importa
ya está
ya está
con esto
lo tenéis todo
lo tenéis todo
ahora
¿qué pasa con el null
y el undefined?
el null y el undefined
están en un tercer grupo
que es un subconjunto
de los falsi
que son los nullish
¿vale?
que son el null
y el undefined
¿vale?
pero todos los nullish
son falsi
pero todos los falsi
no son nullish
porque lo puedes ver aquí claramente
¿vale?
los nullish
son un subconjunto
de los valores falsi
por lo tanto
tú tienes todos estos
que son falsi
perfecto
y aparte de estos cuatro
hay dos falsi
que son el null y el undefined
que también
están en un subconjunto
llamado nullish
yo creo que
es que da igual esto
yo creo que aquí
lo importante es esto
todo lo demás
y así nunca vais a tener problemas
o sea ya
con que sepáis los falsi
que son estos
jamás vais a tener problemas
porque
da igual
lo que penséis
lo que entendáis
¿sabéis?
a mí hay gente
hay mucha gente
que se pelea
y dice
es que yo entiendo
que un objeto vacío
que es que
a javascript
le importa una mierda
lo que tú entiendas
no le importas
a javascript
¿lo entiendes?
no te quiere
no quiere saber
lo que tú opinas
no, da igual
lo que quiere
directamente
es que entiendas
que los falsi son cero
cadena de texto
vacía
false
none
null
y undefined
todo lo demás
no importa
esto no es un juego
joder
no, pero ahora en serio
que hay mucha gente
que se enfada
que se
que es broma
hay gente que se enfada
es que un arriba
tío
es que un objeto
pues no te enfades
abrázalo
ya está
punto
los truces
son todo lo que no sea
esto
entonces
null
y undefined
son primitivos
sí, son primitivos
pero bueno
aquí no estamos hablando
del primitivo
estamos hablando
del valor
no importa
entonces
una vez que sabemos esto
y ya tenemos
tanto los falsi
los truces
y los nullies
los tenemos
totalmente identificados
ahora ya
podríamos empezar
a entender
la asignación
de cada uno
de ellos
y es que
esto
con los operadores
lógicos
operadores
lógicos
que son
el ampersand
el or
y
el nullies
coalescing
operator
estos son
operadores
lógicos
vamos a tener
y esto ya
es que
esto
te va a salvar
la vida
en mil millones
de sitios
por ejemplo
el operador
lógico
este
esto lo que hace
es devolver
el primer
valor
falsi
o el último
truces
que quiere decir
esto
que si tú
haces
uno
and
true
and
cadena vacía
que es
falsi
and
true
esto devuelve
cadena vacía
lo podemos ver aquí
entonces
ahí lo tienes
el and
lo que hace es devolver
el primer valor
falsi
o el último
truces
aquí lo puedes ver
aquí lo tienes
aquí puedes ver
como está devolviendo
el primer falsi
ahora
a este
esta técnica
de java clip
se le llama
short circuit breaker
que básicamente
termina de evaluar
esto por ejemplo
no lo evalúa ya
si aquí yo pusiera
un console
log
hola
vais a ver
que este console
log hola
no aparece
porque lo que está pasando
aquí es que hay
un cortocircuito
cuando el and
b encuentra
un valor
falsi
deja de evaluar
lo que hay
a su derecha
por eso este console
log no aparece
si yo pusiera
aquí un true
fíjate
que este hola
sí que aparece
y aunque yo ponga
aquí más
otro true
pues vais a ver
que este hola
aparece
y lo que devolvería
todo esto
sería
el último valor
que hay aquí
a la derecha
el último valor
que hay a la derecha
vale
lo mismo tendríamos
con el or
pero el or
lo que hace es devolver
como podéis imaginar
el primer valor
true
o el último
false
vale
o el último false
es exactamente
la misma idea
false
or
cadena de texto
vacía
o
uno
que es true
o false
esto lo que va a hacer
es devolver
bueno
va a petar
porque
ah porque he puesto
este console log
y no le gusta
bueno
vamos a quitar
vamos a poner ahí
una cadena de texto vacía
y ya está
ah no
espérate
ah no
que se me ha olvidado aquí esto
vale vale
yo estoy
me estoy inventando el lenguaje
vale
lo que vemos aquí
es devolver el primer valor
true
lo veis aquí
pues aquí tenemos este
y aquí tenemos el primer valor
true
pues es uno
hostia
eso salía by
vale
tenemos aquí
el primer valor
true
es uno
si yo quitar a esto
por eso false
y este
esta cadena de texto
le dejo un espacio
que sería true
pues me devolvería este
¿veis?
y esto no lo evalúa
porque está a la derecha
del valor que ya ha devuelto
vale
y luego tendríamos
el interrogante
interrogante
que es el nullish
coalescing operator
que es la misma idea
que los dos
con una diferencia
y es que
esto lo que hace
es devolver
el primer valor
no nullish
o el último nullish
vale
o el último que sea nullish
esto que quiere decir
que si yo utilizo
undefined
undefined
uno
undefined
que me va a devolver
uno
¿vale?
porque el primer valor
no nullish
era el uno
y no nullish
también sería el false
por ejemplo
¿vale?
¿ves?
false
si yo aquí pusiera otro false
o bueno otro false no
porque no lo vamos a ver
pero vamos a poner otros valores
aquí
fijaos que el primero
que encuentra
es el que me devuelve
¿vale?
ahí lo tenemos
perfecto
hasta aquí
todo bien
minutamente faltó el void 0
o void
lo que sea
también es false
void es un operador
entonces void
no
no es nada
no
no es false
¿podrías explicar
por qué en react
cuando renderizamos algo
evaluamos history
y no entiendo
es como si estuviera
evaluando el primero
pero y el segundo?
ahora te lo explico
void es un operador
por lo tanto
void no puede ser false
¿vale?
porque es un operador
los operadores
no puedes pasarle
o sea si tú pruebas
claro
el tema es que si tú pones así esto
¿vale?
se va a quedar
como que estás haciendo
porque este operador
aquí dentro
no tiene ningún tipo de sentido
pero claro
si haces un void 0
claro que puede ser
que te dé false
porque es que directamente
lo que estás haciendo
es que lo está entendiendo
como undefined
no está devolviendo
absolutamente nada
entonces no es que void 0
sea false
es que aquí
lo que está pasando
es undefined
no estás devolviendo nada
¿entiendes?
o sea no es void
lo que sería false
entonces
¿podrías explicar por qué en React
cuando renderizamos algo
evaluamos si es true?
pues exactamente por esto
porque esto
cuando imagínate
que tenemos esta parte de aquí
que hemos dicho
esto devuelve el primer valor false
y o el último true see
y va evaluando a la derecha
¿no?
entonces
lo que va ocurriendo aquí
es que imagínate que tenemos
true
and
console.log
hola
claro
pues aquí tenemos este console.log
hola
lo tenemos aquí
entonces
si esto sería false
desaparece el console.log
ahora
imagínate que esto
lo que hace es renderizar
un componente
pues si esto
es true
entonces
evalúa esto a true
va al siguiente
y evalúa
el renderizar un componente
y aquí tendríamos
el renderizar un componente
eso que no entiendes
que dices
para qué se utiliza
y todo esto
justamente
Mr. Robot
es esto
aquí cuando tenemos
el
is
o
is
user
o
is
user
log
es true
cuando tenemos esto
lo que estamos haciendo
es jugar
con la evaluación lógica
y cuando
is
user
log
entonces tenemos
console.log
renderizar un componente
esto es lo que estamos logrando
cuando esto pasa a ser false
ya no evaluamos lo de la derecha
y ya está
y aquí tenemos también
uno de los problemas
en los que muchas veces
y también lo habréis visto
cuando se utilizan cosas
como por ejemplo
un array
¿no?
y tenéis aquí
un, dos, tres
y aquí utilizáis
el array.length
array.length
¿no?
y lo utilizáis
como si fuese algo
que podáis utilizar
de forma booleana
pero claro
si utilizáis el array.length
lo que muchas veces
os puede ocurrir
es que
os aparece
este cero
directamente
porque
esto
lo que devuelve
es cero
porque como hemos dicho
devuelve
el primer valor
false
o el último
true
el array.length
es false
es cero
y cuando renderizáis
esta parte de aquí
os aparece un cero
ahí en React
y ahora sabéis
la razón
por qué os aparece
un cero
porque lo estáis
haciendo mal
porque no podéis
utilizar aquí
un número
o cualquier cosa
que sea como
si los míticos
cero perdidos
y cosas así
o que aparece
una lista
y pone un cero
ahí grande
enorme
pues es por culpa
de que hacéis
estas cosas
y la razón
es porque
como devuelve
el primer valor
false
y este
primer valor
false
es cero
pues ya lo tenéis
ahora entendéis
por qué
lo que tenéis que hacer
aquí es mayor a cero
y entonces
como React
detecta
esto en realidad
también devuelve
un false
o sea lo vais a ver aquí
false
pero ya React
detecta que no quiere renderizar
un false
no tiene sentido
y ya está
vale
y ya lo tendríais
bueno
entonces
devuelve o ejecuta
esto no ejecuta
en todo caso evalúa
pero no ejecuta
porque no estamos hablando
de una función
entonces evalúa
y la expresión
porque esto es una expresión
devuelve
una expresión
devuelve
tiene que devolver algo
porque está expresando
entonces las expresiones
devuelven un valor
y esto lo puedes ver así
de claro
haces un console log
y esto
tiene el valor
false
esto significa
que está
la expresión
devuelve
un valor
en este caso
vale
muy bien
todo esto
para qué os he explicado
todo esto
os lo he explicado
para las
asignaciones
lógicas
porque una vez
que sabemos
todo esto
que es muy básico
en javascript
y muy muy muy importante
tenemos las asignaciones
lógicas
las asignaciones
lógicas
lo que nos van a servir
es si por ejemplo
tenemos aquí
una variable
pongamos que tengo
la variable
una variable
con un string vacío
pues
podemos hacer una asignación
muchas veces
y esto lo habréis visto
alguna vez
que dices
vale
quiero que a
sea a
o
pues que sea
default text
vale
y entonces esto
hace que el console
ahora lo que tenga
es default text
lo que estamos haciendo aquí
es vale
como hemos visto antes
que es lo que hace
el or
el or lo que hace
es
evaluar y devolver
el primer valor
truci
como esta expresión
lo que va a devolver
como el a
ahora mismo es
falsi
o false
si queréis poner false
o que queréis poner
un string vacío
o cero
o null
o undefined
o cualquier cosa
que sea falsi
vale
cualquier cosa
que sea falsi
cualquier cosa
que sea falsi
que pasa
que el or
lo primero
lo que
lo que devuelve
la expresión
lo que
cuando lo evalúa
es el primer
truci
y esto al ser false
lo que hace es
devolver esta
vale
porque esta expresión
devuelve el default text
por lo tanto
esto
lo que hace
es meter
en el
en el array
o sea
en el array
en la variable
esto lo que hace
es que esto
lo mete aquí dentro
y ya está
por lo tanto
el console.log
vamos a tener
el default text
esto también
lo podríamos hacer así
pero entonces veríamos
vale
que se queda con el 0
¿por qué?
porque esto lo que hace
es devolver el primer valor
falsi
que sería este
o el último truci
pero como primero
es el primer falsi
pues sería este
no lo solemos ver
tanto el and
para hacer asignaciones
pero en este caso sí
lo más interesante
de esta asignación
es que se puede hacer
más corta
podéis ir para aquí
y hacer esto
ahora podéis hacer esto
sería exactamente lo mismo
para que lo entendáis
esto
es exactamente
lo mismo
no es exactamente
lo mismo
hay una pequeña diferencia
muy pequeña
pero la idea
sería exactamente la misma
y es que básicamente
lo que está ocurriendo aquí
es que
si detecta que
A es falsi
entonces
le va a asignar
el valor
de la derecha
¿y cuál es la
pequeña diferencia?
la pequeña diferencia
es que la de arriba
aunque el objetivo final
es el mismo
la realidad
es que
hace la asignación
sí o sí
o sea
es un poquito
más lenta
un poquito
es una micro optimización
pero claro
en realidad
la asignación
la hace
sí o sí
pase lo que pase
la asignación
la hace
lo que pasa
es que le puede asignar
el mismo valor
que ya tenía
o un nuevo valor
por defecto
en cambio
lo que está pasando aquí
es que la asignación
sólo la hace
en el caso
que detecte
que la A
sea falsi
ahora
este caso
pasaría un poco
lo mismo
aquí haría
la asignación
sólo en el caso
que el valor
que tenía aquí
sea
truci
por ejemplo
si le pongo true
ahora de repente
es default text
si le pongo false
vamos a ver
que se queda
con false
¿por qué?
porque esto lo que hacía
era evaluar
y mirar
y devolvía
el primero que era falsi
como el primero que es falsi
es el que ya tiene
pues ya no va
a seguir evaluando
a la derecha
y luego tendríamos
el nullish
coalescing operator
que es el último
que hemos visto
que este es uno
de los más interesantes
por ejemplo
hay un error
muy común
en javascript
muy común
que sería
este de aquí
imaginad que queréis
esto se hace mucho
para configuraciones
imaginad que tenéis
limit
vamos a poner
limit
limit 0
¿vale?
imaginad
que el limit 0
significa
que no tiene límite
¿vale?
que no tiene límite
y
queremos
todos los resultados
¿vale?
claro
si yo ahora
le quiero poner
un valor por defecto
y digo vale
limit
y digo limit
o valor
default limit
limit
¿vale?
vamos a ponerlo
en una constante
para que lo veamos
muy claro
default limit
vamos a poner 10
¿vale?
¿cuál es el problema?
que ahora
el console.log
del limit
es 10
¿pero queríamos
realmente este valor
por defecto?
no creo
porque a lo mejor
queríamos que el límite
no tuviera límite
queríamos que realmente
fuese infinito
queríamos que
fuese infinito
pero que en el caso
que esto hubiera venido
undefined
entonces sí
que hubiera sido
el default limit
pero si nos pasan 0
pues queremos que no
que queremos que mostrar
todos los resultados
y esto
estaría causando
un error
para esto justamente
existe
el nullish
collection operator
para esto
lo que tenemos aquí
es que podríamos decirle
solo
en el caso
que el límite
venga
como null
o undefined
entonces es que quiero
que me asignes
el valor de la derecha
así este 0
lo va a dejar
pero si nos viene
undefined
entonces sí
le vamos a poner
el límite por defecto
y también
si viene null
pues también
el límite por defecto
pero si viene 1
si viene 5
si viene 0
lo que vamos a hacer
es poner
y dejar ese número
porque el 0
puede ser un valor válido
también para expresar
que queremos
o 0 resultados
o que es la paginación
número 0
o el índice 0
o que no queremos
que tenga ningún límite
y lo hacemos como 0
o sea que muchas veces
el 0
tiene un significado
que puede ser útil
lo mismo también
con un string vacío
también puede ser
un string vacío
por ejemplo
imaginad
esto
también lo hemos visto
muchas veces
que tengamos
el nombre de un usuario
o peor todavía
que algo que
se tenga que validar
no puede ser
pues un last name
¿no?
un last name
y resulta que no tiene
last name
¿vale?
y le ponemos un default
last name
y le ponemos aquí
tu last name aquí
por poner un ejemplo
¿no?
y venga
last name
last name
default last name
y lo utilizamos
con el or
claro
el problema
que tendríamos aquí
es que
imagínate
que el usuario
dice
no no
es que esto
está vacío
porque yo no tengo
last name
sí que tengo first name
porque me llamo
midu
pero no tengo last name
¿vale?
pues yo te voy a poner
un last name
por defecto
toma
pam
y en realidad
la cadena de texto vacía
tiene sentido
porque la ha dejado vacío
por lo que sea
así que aquí
lo que tendría sentido
es utilizar
el nullish
coalesin
para dejar este
y lo mismo
que hemos visto
con la asignación lógica
de antes
también aquí funcionaría
aquí podemos hacer
la asignación lógica
la podemos hacer
así
¿vale?
es una forma más corta
y lo que hace es que
en el caso
de que el last name
sea nullish
sea null
o undefined
entonces
asígname
el valor de la derecha
esto
no funcionaría también
con el ejemplo
lo que hemos hecho
antes del limit
para que lo veamos
rápidamente
¿vale?
esto lo podemos mover aquí
y aquí tendríamos
la asignación lógica
en el caso
que el limit
sea null
o undefined
entonces me pones
el default limit
claro
en este caso
es cero
que es un valor
falsi
pero no es nullish
recordemos
esto ¿vale?
interpretación booleana
falsi
cero
cadena vacía
false
none
pero
los nullish
son null
y undefined
sí que son falsi
pero los que son
pero todos los falsi
no son nullish
¿vale?
nullish
sí que son falsi
pero no todos los falsi
son nullish
y por eso
hay que hacer esta distinción
el cero
no es nullish
y por lo tanto
lo estamos detectando
como vale
no me hagas esta asignación
porque el limit
es nullish
ahí
porque el limit
es cero
no es nullish
pero en el caso
de que nos venga
undefined
entonces
ahora sí
hazme esta asignación
con un límite por defecto
y ya lo tendríamos
hermano
¿pero qué es eso?
o sea
si es corto
pero está raro
no está raro
pero a ver
puede ser que
esté raro
porque no lo entiendas
porque es la primera vez
que lo ves
y tal
pero todo
necesita tiempo
para asimilarse
para aprender
es normal
que tú veas una sintaxis
la primera vez
y que te quedas así
como
oh dios mío
pero es muy sencillo
el hecho de ir siguiendo
un poco el hilo
lo hemos ido haciendo
como al principio
de hacerlo así
hemos explicado aquí
toda la evaluación
y ahora también te queda
a ti un poco
un trabajo
un trabajo de practicarlo
lo que podéis ir haciendo
es jugar
es un poco de
ir probando
y decir
oye
¿qué es lo que yo espero
si yo pongo aquí un null?
¿vale?
y no miráis el console lock
¿vale?
esto no lo miráis
lo quitáis
y dices
vale
¿qué es lo que creo que tiene?
una vez que lo creas
lo que puedes hacer
¿cómo te puedo hacer una donación?
pues así como la estás haciendo
¿no?
entonces
una vez que lo entiendes
puedes ir diciendo
vale
ahora lo voy a intentar hacer
con la asignación
que es exactamente lo mismo
o sea
esta es
la forma corta
esto sería la forma corta
de hacer lo mismo
de la línea que tenemos arriba
default limit
con la pequeña diferencia
que os he explicado antes
¿no?
y ya está
es cuestión de también ir probando
y que entendáis
pero
esto creo que es clave
y con esto
os vais a evitar
un montón de errores
de vuestro día a día
en javascript
el hecho de entender
que una vez que entendáis
los falsi
y que truci
es todo lo demás
si no es falsi
es truci
pero que dentro
de los falsi
hay un subconjunto
que se llama nullish
que son null
y undefined
punto
y a partir de ahí
una vez que ya
tenéis claro esto
no vais a tener ningún problema
No
No