JavaScript es uno de los lenguajes de programación más populares en la actualidad. Cómo cualquier otro lenguaje, tiene docenas de trucos que puedes comenzar a usar hoy. Cada uno de estos trucos realiza tareas que la mayoría de los desarrolladores hace diariamente. Dependiendo de tu experiencia puede que ya los conozcas, mientras que otros te dejarán atónito.
En este artículo vamos a ver una lista de trucos que te harán un mejor desarrollador y mejoraron tus habilidades con JS.
1. Every and some
Las funciones every y some son funciones que no todos los desarrolladores conocen. Sin embargo, pueden ser muy útiles en ciertas situaciones. Comencemos con la función every. Podés utilizar esta función si querés saber si todos los elementos de un array pasan un determinado test. Esencialmente, lo que hace es recorrer el array y verificar si todos retornan true.
Esto puede sonar un poco abstracto, así que veamoslo con un ejemplo. No es tan complejo como suena
const random_numbers = [ 13, 2, 37, 18, 5 ]
const more_random_numbers = [ 0, -1, 30, 22 ]
const isPositive = (number) => {
return number > 0
}
random_numbers.every(isPositive); // returns true
more_random_numbers.every(isPositive); // returns false
La función every retorna un booleano. Si todos los elementos del array pasan el test, retornará true. Si un elemento no pasa el test, retornará false.
La función some funciona de manera muy parecida a every. Solo hay una diferencia, la función some verifica que al menos un elemento del array pase el test implementado.
Si miramos el ejemplo anterior y usamos la función some en lugar de every, ambos arrays retornarán true ya que ambos arrays contienen al menos un número positivo.
const random_numbers = [ 13, 2, 37, 18, 5 ]
const more_random_numbers = [ 0, -1, 30, 22 ]
const isPositive = (number) => {
return number > 0
}
random_numbers.some(isPositive); // returns true
more_random_numbers.some(isPositive); // returns true
2. Setear variables condicional mente
Setear un variable de manera condicional es fácil y a la vez hace que nuestro código sea más elegante. No hay necesidad de escribir una sentencia if cuando se utiliza este truco.
Entonces, cómo se utiliza esto?
const timezone = user.preferred_timezone || 'America/New_York'
En el ejemplo de arriba, chequeamos si el usuario tiene una zona horaria preferida. Si el usuario tiene una zona horario preferida, usamos esa zona horaria, sino usamos por defecto "América/New York". Éste código luce mucho más limpio que una sentencia if.
let timezone = 'America/New_York'
if (user.preferred_timezone) {
timezone = user.preferred_timezone
}
Se ve mejor, no?
3. Casting de valores en arrays
A veces quieres castear todos los valores en un array.Por ejemplo, cuando utilizas el operador de triple igual, para verificar que un determinado número existe en un array.
Cuando tienes un multiple-select en HTML, los valores que obtenemos del select son strings y no números. Por ejemplo:
let selected_values = [ '1', '5', '8' ]
La mejor solución para castearlos a números, es la siguiente;
selected_values = selected_values.map(Number) // [ 1, 5, 8 ]
4. Desestructuración de objetos
Una vez que sepa de la desestructuración de objetos, es probables que lo uses todos los dias.
Pero qué es exactamente esto?
Desestructurar es una expresión en JS que permite extraer datos de arreglos, objetos, maps y sets en variables propias. Permite extraer propiedades de un objeto desde un objetos o elementos desde un array, todos de una vez.
Miremos el siguiente ejemplo, donde tenemos un objeto usuario. Si quieres almancer el nombre de usuario en una variable, debes asignarla a una variable en una nueva línea. Y si también quieres almacenar su sexo , debes hacer lo mismo.
const usuario = {
nombre: 'Frank',
edad: 23,
sexo: 'M',
miembro: false
}
const nombre= usuario.nombre
const sexo= usuario.sexo
Con la desestructuración puede directamente tomar las variables de las propiedades del objeto usando la siguiente sintaxis:
const { nombre, edad, sexo, miembro} = usuario;
console.log(nombre) // Frank
console.log(edad) // 23
console.log(sexo) // M
console.log(miembro) // false
Comentarios
Publicar un comentario