Tips en JavaScript
Formatear la salida de un JSON Stringify
Uso clásico de JSON.stringify() y el uso para dar formato JSON.stringify(object, null, 2)
Obtener el índice de una iteración en un bucle for-of
Un bucle for…of, introducido en ES6, es una excelente manera de iterar sobre una matriz:
¿Cómo se puede obtener el índice de una iteración?
El bucle no ofrece ninguna sintaxis para hacer esto, pero puede combinar la sintaxis de desestructuración introducida en ES6 con llamar al entries() método en el Array.prototype.entries():
Intercambiar variable
Los valores de dos variables se pueden intercambiar en una expresión de desestructuración:
Ordenar arreglos
Si intentas ordenar arreglos con el método sort() notaras que no da el resultado esperado.
Te muestro una pequeña forma de hacerlo y esperar el resultado de la forma correcta.
Edita páginas web directamente en el navegador sin tocar los elementos HTML
- Abres tu navegador
- Buscas la pagina web a editar
- Ingresas a las herramientas de desarrollo (click derecho inspect o tecla F12)
- Ingresas a la pestaña Consola o Console.
- Escribes el comando para encender la edición o apagarla. document.designMode=’on’ o document.designMode=’off’`
Copiando objetos desde las herramientas de desarrollo o developer tools
- Abres tu navegador
- Ingresas a las herramientas de desarrollo (click derecho inspect o tecla F12)
- Ingresas a la pestaña Consola o Console.
- Supongamos que tenemos un console.log(object) en nuestro código y cuando vamos a la consola lo vemos.
- Lo puedes copiar haciendo clic derecho en el objeto y copiar objeto.
- o puedes utilizar Store object as global variable y después el método copy de la siguiente forma:
Utilizar las propiedades, métodos y eventos de un elemento HTML por medio de su id
Si tienes un elemento en el DOM con un id, este se almacena en window y puedes obtener este elemento con javascript o desde la consola como se muestra en la siguiente imagen.
- window.app te devuelve el elemento html.
- window.hi.getAttribute(‘for’) estas utilizando el método getAttribute para obtener el valor del atributo for del elemento `label`
- window.hi.textContent estas obteniendo el valor de la propiedad textContent del elemento label
Desplácese hasta un elemento específico con una animación de desplazamiento suave
¿Sabías que puedes desencadenar un desplazamiento en un elemento específico utilizando una sola llamada a una función en JavaScript?
Incluso puedes añadir un comportamiento para conseguir una bonita animación de desplazamiento suave.
Nota: En IE11 no funciona.
Agregando propiedades dinámicas a un objeto
Eliminar los duplicados de un array
Utilizando Set y spread operator
Filtrar los valores considerados falsos
Arguments en funciones tradicionales o normales
Cuando utilizas una función tradicional o normal, estas tienen incluido un objeto arguments que es similar a un arreglo y digo similar porque tiene un índice numerado y la propiedad `length`, pero en verdad no es un arreglo porque no posee todos los métodos de manipulación de los arreglos.
Esto puede ser muy útil, porque puedes llamar a la función pasándole más parámetros de los que formalmente declaraste o de pronto no declaraste, es decir, a simple vista la función no recibe parámetros o argumentos.
Con Spread operator (…) podemos copiar el contenido del objeto arguments a una variable y esta nueva variable ya puede ser manipulada.
Nota: Esta es una de las tantas principales diferencias entre una arrow functions y una función normal, las arrow functions no tienen arguments.
Actualizar el estado mediante la composición de funciones en React
Si utilizas composición de funciones, te pueden ser muy útiles para diferentes propósitos.
En el siguiente ejemplo: se compone una función para crear diferentes funciones de setter para actualizar el estado.
Utilizar objetos literales en lugar de if anidados o switch
En JavaScript estamos acostumbrados a utilizar objetos para casi todo, entonces cuando hay varias condiciones, pienso que los objetos literales son la forma más legible de estructurar el código.
Imaginemos que tenemos una función que te devuelve una frase dependiendo del tiempo atmosférico.
Nota: Para nuestro ejemplo quiero utilizar mayúsculas .toUpperCase() para resaltar el clima, pero se puede utilizar minúsculas .toLowerCase().
Si utilizamos la sentencia if/else, se vería algo como esto:
Definitivamente creo que no es algo muy legible, por ende, pensamos utilizar switch para mejorar:
Ya comienza a verse un poco mejor, pero se puede presentar un inconveniente, por ejemplo si nos olvidamos de colocar el break o return dependiendo el caso, seguirá ejecutando las lineas siguientes de código y esto puede ser un problema. Entonces dicho esto, es posible que sea mucho mejor utilizar objetos literales ya que se vería de la siguiente forma:
o puedes utilizar nullish coalescing para asignar una respuesta predeterminada:
Si deseas colaborar para agregar más tips aquí comparto el repositorio https://github.com/corteshvictor/tips-javascript
En este enlace puedes también realizar la lectura. https://corteshvictor.github.io/tips-javascript/
