Ayer publicamos el tutorial gratuito Astro desde cero 🚀
Hoy ya tenéis disponible el repo con el código fuente (pasos 03 al 14), cada uno con su README y listo para arrancar.
🔗 github.com/lemoncode/as...
🙏 ¡Muy agradecidos si RT!
Inventó la higiene diaria también, se lavaba todos los días con saponaria, y los dientes con una ramita, si no recuerdo mal. Joer qué recuerdos! 😅 La tía inventó la humanidad.
😬 La abuela se ofende un poco, pero tú estás abrigado, porque no era ni null ni undefined.
Así funciona ??, te da un valor por defecto solo si el tuyo no existe para nada.
Te lo explico con código:
Tú buscas en tu mochila y:
➡️ Si no traes ninguno (null o undefined): tu abuela te da uno suyo, calentito, de los que pican.
➡️ Si traes algo, aunque sea un chaleco sin mangas o una bufanda enorme (0, false, "", etc.): te pones lo que hayas traído. Tu abuela no insiste.
Y la metáfora:
Estás en casa de tu abuela y te dice “¿Tienes frío? ¿Te trajiste un jersey?”
⚠️𝗢𝗝𝗢: Sólo funciona con 𝗻𝘂𝗹𝗹 o 𝘂𝗻𝗱𝗲𝗳𝗶𝗻𝗲𝗱, no se activa con ningún otro falsy (NaN, 0, false, “”, etc) . Si quieres que funcione con falsys, usa el operador OR ( | | ).
Ahora en serio. El 𝗻𝘂𝗹𝗹𝗶𝘀𝗵 𝗰𝗼𝗮𝗹𝗲𝘀𝗰𝗶𝗻𝗴 (??) es un operador lógico que evalúa dos valores. Devuelve el de la derecha si el de la izquierda es null o undefined. Si no, devuelve el de la izquierda. Es útil para asignar un valor por defecto cuando no se tiene uno. Útil sobre todo en formularios.
Hoy toca metáfora para explicarte qué es nullish coalescing (si lo dices bien a la primera te doy una piruleta 🤣). Su sintaxis es ?? , muy apropiado porque es lo que piensas la primera vez que escuchas el nombrecito. 😁
Así de simple y así de complicado al mismo tiempo, como las relaciones humanas! 🤣
Te lo explico con código, por capítulos:
2️⃣ Luego se hicieron novios. Donde iba uno, iba el otro.
(Jennifer && Brad) → inseparables.
3️⃣ Pero llegó el drama. Angelina, titulares, corazones rotos... Desde entonces, nada de aparecer juntos. Si uno está, el otro no.
(!Brad) → No queremos a Brad.
Tienes dos amigos que se llaman Jennifer y Brad (totalmente al azar):
1️⃣ Jennifer y Brad eran amigos.
(Jennifer | | Brad) → puedes quedar con uno u otro.
Te los voy a explicar con un culebrón, porque los cotilleos no se olvidan. Nada como un poco de drama para entender lógica booleana.
Los operadores lógicos sirven para evaluar condiciones:
👉 𝗔𝗡𝗗 (&&) Se cumple solo si ambas condiciones son verdaderas.
👉 𝗢𝗥 ( | | ) Se cumple si al menos una es verdadera.
👉 𝗡𝗢𝗧 ( ! ) Niega lo que viene después. Si algo es true, lo convierte a false, y viceversa.
Hoy te explico con una metáfora los siguientes operadores lógicos en JavaScript, AND( &&), OR ( | | ) y NOT ( ! ). Es sencillo, pero a veces puede resultar lioso.
⭐ Y os animo a que juguéis con el rest operator y el spread operator, que probéis combinaciones, usándolos con objetos y arrays. Se les puede sacar mucho partido si entiendes bien cómo funcionan.
¿Que tienes una carpeta con varios papeles? El funcionario te dice que los quiere todos menos el DNI, así que sacas el dni, y el resto (…rest) lo guardas en otra carpeta que le das al funcionario.
Te dejo un ejemplo en código, con arrays, pero también se puede usar con objetos.
Así que vamos a seguir con el ejemplo de la declaración de hacienda, que alguno todavía no la ha presentado. 😅
Tienes cita con el funcionario, y le entregas las fotocopias sueltas que hiciste el otro día de los documentos que te pidió. Las recoge y las mete en una carpeta (con rest operator).
En realidad, la diferencia entre los dos es dónde y para qué se utilizan. 🤔
El rest operator se puede usar:
➡️ 𝗘𝗻 𝗹𝗮 𝗱𝗲𝗰𝗹𝗮𝗿𝗮𝗰𝗶𝗼́𝗻 𝗱𝗲 𝘂𝗻𝗮 𝗳𝘂𝗻𝗰𝗶𝗼́𝗻: Se usa como parámetro para agrupar argumentos recibidos.
➡️ 𝗘𝗻 𝗱𝗲𝘀𝘁𝗿𝘂𝗰𝘁𝘂𝗿𝗶𝗻𝗴: para recoger el resto de valores.
Esta semana toca explicar el 𝗿𝗲𝘀𝘁 𝗼𝗽𝗲𝗿𝗮𝘁𝗼𝗿, que tiene la misma sintaxis, los 3 puntitos (…), pero hace lo contrario. En vez de sacar hojas sueltas, las agrupa en una carpeta (array).
La semana pasada puse una metáfora para explicar el 𝘀𝗽𝗿𝗲𝗮𝗱 𝗼𝗽𝗲𝗿𝗮𝘁𝗼𝗿, los famosos 3 puntitos (…), que funciona como una fotocopiadora: abre una carpeta y saca hoja por hoja lo que hay dentro.
Recuerda: que tu confianza no se venga muy arriba.
✴️ ¿Has visto esos 3 puntitos y no te cuadra con lo que te digo? Claro, porque hay otro caso en el que se usan, el 𝗿𝗲𝘀𝘁 𝗼𝗽𝗲𝗿𝗮𝘁𝗼𝗿, que se parece pero que hace justo lo contrario. Pero eso ya te lo explicaré la semana que viene. 🤓
¿Y cómo usarlo en funciones? Si Hacienda te pide varias fotocopias, puedes usar spread operator para introducirlas. Eso sí, mejor que coincidan los parámetros con el número de elementos del array, si no puede dar errores.
➡️ Te pongo un ejemplo en código con arrays, pero funciona igual con objetos.
El 𝘀𝗽𝗿𝗲𝗮𝗱 𝗼𝗽𝗲𝗿𝗮𝘁𝗼𝗿 (…) es como una fotocopiadora que imprime todo lo que hay dentro de las carpetas, cada elemento. No crea ninguna carpeta nueva, si no que imprime cada hoja que hay dentro de la carpeta y quedan esas hojas sueltas. Después, tú puedes meter esas hojas en otra carpeta que tú elijas.
Imagina que en tu casa tienes diferentes carpetas (objetos o arrays) para tus documentos y tienes que hacer la declaración de la renta. Hacienda te pide fotocopias de todo, pero no quiere que le lleves tus carpetas , quiere hojas sueltas.
Puedes usarlo para copiar objetos o arrays, combinarlos, y para pasar varios argumentos a una función fácilmente. ¿Cómo? Te lo explico con la declaración de la renta, que estamos en época. 💰😅
Si cambias algo dentro del anidamiento, se cambiará también en el original. Por eso, te recomiendo usarlo con arrays y objetos planos, sin anidamientos. Al igual que lo harías con un bucle.
⚠️¡𝗢𝗝𝗢!⚠️ Cuando haces una copia con spread operator es una copia superficial. Es decir, si hay algún objeto o array anidado, no lo copia, si no que apunta a la misma referencia de memoria.
El spread operator se usa con los 3 puntitos (…) y sirve para extraer elementos de un array, objeto o incluso una cadena de texto sin necesidad de iterar con un bucle ("for" por ejemplo) expresamente.
