Siempre quise crear vídeos en torno a mi afición por la programación. Pero no soy un hablante nativo de inglés y tenía miedo de intentarlo.
Pero hace unas semanas, mientras preparaba algunos consejos de JavaScript para comenzar mi jornada en YouTube, escribí esta lista de consejos para ahorrar tiempo. Espero que te ayuden como me han ayudado a mí.
En este artículo, voy a compartir contigo 5 consejos útiles de JavaScript (¿estás listo para sumergirte? ?).
Y ahora, ¿adivina qué? ¡Algunos de estos consejos están en mi canal de YouTube?! (aquí está la lista de reproducción).
Desestructuración de objetos
La desestructuración es una característica que se introdujo en ES6. Es una de las funcionalidades que utilizarás a diario una vez que sepas cómo hacerlo.
Te ayuda a lidiar principalmente con tres problemas:
- Repetición. Cada vez que quieres extraer una propiedad de un objeto y crear una nueva variable, tienes que crear una nueva línea.
const user = {
nombre: "John",
apellido: "Doe",
password: "123",
};
const nombre = user.nombre;
const apellido = user.apellido;
const password = user.password;
- Accesibilidad. Cada vez que quieres acceder a la propiedad de un objeto, tienes que escribir la ruta a la misma. (Ejemplo:
user.nombre,user.family.sister, etc.). - Uso. Como ejemplo, cuando creas una nueva función, y solo estás trabajando con una sola propiedad de un objeto.
Ahora que has visto cuáles son estos tres problemas con los objetos, ¿cómo crees que puedes resolverlos?
Como resolver el problema de la repetición
const user = {
nombre: "John",
apellido: "Doe",
password: "123",
};
const { nombre, apellido, password } = user;
console.log(nombre, apellido, password);
// Resultado: 'John', 'Doe', '123'
Desestructuración es el proceso de extraer una propiedad de un objeto mediante su clave. Al tomar una clave existente en su objeto, y luego colocarla entre dos corchetes ({ nombre }) le dices a JavaScript:
"Oye JavaScript, quiero crear una variable con el mismo nombre que mi propiedad. Quiero crear una variable nombre para la propiedad nombre de mi objeto".
Nota: Si quieres aplicar desestructuración en un objeto, siempre debes usar una clave existente. De lo contrario, no funcionará.
Cómo resolver el problema de accesibilidad
const user = {
nombre: "John",
apellido: "Doe",
password: "123",
familia: {
hermana: {
nombre: "Maria",
},
},
};
// Accedemos al objeto anidado `hermana`
// y extraemos la propiedad `nombre`
const { nombre } = user.familia.hermana;
console.log(nombre);
// Resultado: 'Maria'
Cuando trabajas con objetos anidados, puede volverse bastante repetitivo y perder mucho tiempo accediendo a la misma propiedad muchas veces.
Usando desestructuración, en una sola línea, puede reducir la ruta de la propiedad a una variable.
Cómo resolver el problema del uso
Ahora que sabes como hacer desestructuración de un objeto, déjame mostrarte como extraer propiedades directamente en la definición de parámetros de tus funciones.
Si ya sabes React esto te parecerá familiar.
function getUserFirstName({ nombre }) {
return nombre;
}
const user = {
nombre: "John",
apellido: "Doe",
password: "123",
};
console.log(getUserFirstName(user));
// Resultado: 'John'
En el ejemplo de arriba, tenemos una función getUserFirstName, y sabemos que solo vamos a usar una propiedad de nuestro objeto, nombre.
En vez de pasar el objeto completo o crear una variable nueva, podemos aplicar desestructuración al objeto que pasamos como parámetro en la función.
Como Combinar Objetos en ES6
En programación, a menudo debes enfrentar problemas con las estructuras de datos. Gracias al operador spread introducido en ES6, las manipulaciones de objetos y arreglos son más sencillas.
const user = {
nombre: "John",
apellido: "Doe",
password: "123",
};
const userJob = {
jobName: "Developer",
jobCountry: "France",
jobTimePerWeekInHour: "35",
};
Imaginemos que tenemos dos objetos:
- User. Un objeto que define información general sobre el usuario.
- UserJob. Un objeto que define la información acerca del trabajo del usuario.
Queremos crear un objeto que solo contenga las propiedades de estos dos objetos.
const user = {
firstName: "John",
lastName: "Doe",
password: "123",
};
const userJob = {
jobName: "Developer",
jobCountry: "France",
jobTimePerWeekInHour: "35",
};
const myNewUserObject = {
...user,
...userJob,
};
console.log(myNewUserObject);
// Output:
//{
// firstName: 'John',
// lastName: 'Doe',
// password: '123',
// jobName: 'Developer',
// jobCountry: 'France',
// jobTimePerWeekInHour: '35'
//}
Usando el operador spread (...), podemos extraer todas las propiedades de un objeto hacia otro.
const user = {
firstName: "John",
lastName: "Doe",
password: "123",
};
const myNewUserObject = {
...user,
// We extract:
// - firstName
// - lastName
// - password
// and send them to
// a new object `{}`
};
Como combinar arreglos
const girlNames = ["Jessica", "Emma", "Amandine"];
const boyNames = ["John", "Terry", "Alexandre"];
const namesWithSpreadSyntax = [...girlNames, ...boyNames];
console.log(namesWithSpreadSyntax);
// Output: ['Jessica', 'Emma', 'Amandine', 'John', 'Terry', 'Alexandre']
Al igual que con los objetos, el operador spread (...) puede extraer todos los elementos de un arreglo hacia otro.
const girlNames = ["Jessica", "Emma", "Amandine"];
const newNewArray = [
...girlNames,
// We extract:
// - 'Jessica'
// - 'Emma'
// - 'Amandine'
// and send them to
// a new array `[]`
];
Como remover duplicados de un arreglo
Debido a que los arreglos son listas, puedes tener muchos elementos con el mismo valor. Si deseas eliminar duplicados en tu arreglo, puedes seguir uno de los ejemplos a continuación.
Uno de ellos será solo una línea gracias a ES6, pero les dejo el ejemplo "antiguo" aquí para que puedas comparar.
Como remover duplicados de la manera "antigua"
const animals = ["owl", "frog", "canary", "duck", "duck", "goose", "owl"];
const uniqueAnimalsWithFilter = animals.filter(
// Parameters example: 'owl', 0, ['owl', 'frog', 'canary', 'duck', 'duck', 'goose', 'owl']
(animal, index, array) => array.indexOf(animal) == index
);
console.log(uniqueAnimalsWithSet);
// Output: ['owl', 'frog', 'canary', 'duck', 'goose']
En el ejemplo de arriba, queremos limpiar el arreglo animals removiendo todos los duplicados.
Podemos hacer eso usando la función filter y usando la función indexOf dentro de la primera.
La función filter toma todos los elementos del arreglo animals (animals.filter) y provee lo siguiente para cada elemento:
- el valor actual (ejemplo:
duck) - el índice (ejemplo: 0)
- el arreglo original (ejemplo: el arreglo
animals=>['owl', 'frog', 'canary', 'duck', 'duck', 'goose', 'owl'])
Aplicaremos indexOf en el arreglo original para cada elemento y usaremos como parámetro la variable animal (el valor actual).
indexOf retornará el primer índice parea el valor actual (ejemplo: para el valor 'owl' el índice es 0).
Luego dentro de la función filter, comparamos el valor de indexOf con el índice actual. Si es el mismo, retornamos true de lo contrario false.
filter creará un nuevo arreglo conteniendo solo los valores para los cuales el valor retornado fue true.
Entonces, en nuestro caso: ['owl', 'frog', 'canary', 'duck', 'goose'].
Como remover duplicados de un arreglo de la manera "nueva"
Bueno, la "forma antigua" es interesante de entender, pero es larga y un poco difícil. Entonces, ahora echemos un vistazo a la nueva forma:
const animals = ["owl", "frog", "canary", "duck", "duck", "goose", "owl"];
const uniqueAnimalsWithSet = [...new Set(animals)];
console.log(uniqueAnimalsWithSet);
// Output: ['owl', 'frog', 'canary', 'duck', 'goose']
Separemos los diferentes pasos:
// 1
const animals = ["owl", "frog", "canary", "duck", "duck", "goose", "owl"];
// 2
const animalsSet = new Set(animals);
console.log(animalsSet);
// Output: Set { 'owl', 'frog', 'canary', 'duck', 'goose' }
// 3
const uniqueAnimalsWithSet = [...animalsSet];
console.log(uniqueAnimalsWithSet);
// Output: ['owl', 'frog', 'canary', 'duck', 'goose']
Tenemos el arreglo animals, y lo convertimos en un Set, que es un tipo especial de objeto en ES6.
Lo que es diferente es que te permite crear una colección de valores únicos.
Nota: Set es una colección de valores únicos, pero no es un arreglo.Una vez que tenemos nuestro objeto Set con valores únicos, necesitamos convertirlo de nuevo a un arreglo.
Para hacer eso, usamos el operador spread para aplicar desestructuración sobre él y copiar todas las propiedades a un nuevo arreglo.
Ya que el Set tiene propiedades únicas, nuestro nuevo arreglo también contendrá valores únicos.
Como utilizar operadores ternarios
¿Has oído hablar de una forma de escribir pequeñas condiciones en una sola línea?
Si no es así, es hora de eliminar muchos de tus bloques if - else y convertirlos en pequeñas operaciones ternarias.
Veamos un ejemplo con console.log para comenzar. La idea es verificar el valor de una variable y mostrar condicionalmente una salida.
const colour = "blue";
if (colour === "blue") {
console.log(`It's blue!`);
} else {
console.log(`It's not blue!`);
}
¡Este ejemplo es un caso típico donde puedes usar el operador ternario para reducir esas 5 líneas con if y else a una sola!
¡Una línea para gobernarlas a todas!
const colour = "blue";
colour === "blue" ? console.log(`It's blue!`) : console.log(`It's not blue!`);
// [condition] ? [if] : [else]
El operador ternario remplaza el if y el else para condicionales pequeñas.
Nota: No es recomendado crear condiciones complejas usando operadores ternarios ya que reduce la legibilidad.
Abajo tenemos otro ejemplo que usa operadores ternarios, pero esta vez en el return de una función.
function sayHelloToAnne(name) {
return name === "Anne" ? "Hello, Anne!" : "It's not Anne!";
}
console.log(sayHelloToAnne("Anne"));
// Output: 'Hello, Anne!'
console.log(sayHelloToAnne("Gael"));
// Output: "It's not Anne!"
¿Quieres contribuir? Acá esta como.
Eres bienvenido/a contribuir a este repositorio en GitHub. Se agradece cualquier contribución, ya que permitirá que cada uno de nosotros mejore sus habilidades con JavaScript. GitHub: JavaScript Awesome Tips.
Conclusión
Espero que hayas aprendido algunas cosas nuevas sobre JavaScript con este artículo y te sea de utilidad en el futuro.
Si quieres puedes mantenerte en contacto conmigo en Twitter. Trato de compartir cosas interesantes sobre tecnología, en lo que estoy trabajado y más.
Traducido del artículo 5 JavaScript Tips That'll Help You Save Time de Gaël Thomas.