5 consejos de JavaScript que te ayudarán a ahorrar tiempo

Siempre quise crear videos en torno a mi afición a 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 viaje a 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, ¿adivinen 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 funciones que utilizará a diario una vez que sepa cómo hacerlo.

Le ayuda a lidiar con tres problemas principales:

  • Repetición. Cada vez que desee extraer una propiedad de objeto y crear una nueva variable, cree una nueva línea.
const user = { firstName: "John", lastName: "Doe", password: "123", }; // Wow... should we display // John's password like that? const firstName = user.firstName; const lastName = user.lastName; const password = user.password; 
  • Accesibilidad. Cada vez que desee acceder a una propiedad de objeto, debe escribir la ruta a la misma. ( Ejemplo:user.firstName , user.family.sistery así sucesivamente).
  • Uso. Como ejemplo, cuando crea una nueva función y solo está trabajando con una propiedad de un objeto.

Ahora que ha visto cuáles son estos tres problemas con los objetos, ¿cómo cree que puede resolverlos?

Cómo resolver el problema de la repetición

const user = { firstName: "John", lastName: "Doe", password: "123", }; const { firstName, lastName, password } = user; console.log(firstName, lastName, password); // Output: 'John', 'Doe', '123' 

La desestructuración es el proceso de extraer una propiedad de un objeto mediante su clave. Al tomar una clave existente en su objeto, luego colocarla entre dos corchetes ( { firstName }) le dice a JavaScript:

"Hey JavaScript, quiero crear una variable con el mismo nombre que mi propiedad. Quiero crear una variable firstNamepara la firstNamepropiedad de mi objeto".

Nota: Si desea desestructurar un objeto, siempre debe usar una clave existente. De lo contrario, no funcionará.

Cómo resolver el problema de accesibilidad

const user = { firstName: "John", lastName: "Doe", password: "123", family: { sister: { firstName: "Maria", }, }, }; // We access to the nested object `sister` // and we extract the `firstName` property const { firstName } = user.family.sister; console.log(firstName); // Output: 'Maria' 

Cuando trabaja con objetos anidados, puede volverse bastante repetitivo y perder mucho tiempo accediendo a la misma propiedad muchas veces.

Con la desestructuración, en una sola línea, puede reducir la ruta de la propiedad a una variable.

Cómo resolver el problema de uso

Ahora que sabe cómo desestructurar un objeto, permítame mostrarle cómo extraer propiedades directamente en la definición de su parámetro de función.

Si conoce React, probablemente ya esté familiarizado con él.

function getUserFirstName({ firstName }) { return firstName; } const user = { firstName: "John", lastName: "Doe", password: "123", }; console.log(getUserFirstName(user)); // Output: 'John' 

En el ejemplo anterior, tenemos una getUserFirstNamefunción, y sabemos que sólo utilizará una propiedad de nuestro objeto, firstName.

En lugar de pasar todo el objeto o crear una nueva variable, podemos desestructurar los parámetros de función del objeto.

Cómo fusionar objetos en ES6

En programación, a menudo debe abordar problemas con las estructuras de datos. Gracias al operador de propagación introducido en ES6, las manipulaciones de objetos y matrices son más sencillas.

const user = { firstName: "John", lastName: "Doe", password: "123", }; const userJob = { jobName: "Developer", jobCountry: "France", jobTimePerWeekInHour: "35", }; 

Imaginemos que tenemos dos objetos:

  • Usuario. Un objeto que define información general sobre el usuario.
  • UserJob. Un objeto que define la información 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 de propagación ( ...), podemos extraer todas las propiedades de un objeto a otro.

const user = { firstName: "John", lastName: "Doe", password: "123", }; const myNewUserObject = { ...user, // We extract: // - firstName // - lastName // - password // and send them to // a new object `{}` }; 

Cómo fusionar matrices

const girlNames = ["Jessica", "Emma", "Amandine"]; const boyNames = ["John", "Terry", "Alexandre"]; const namesWithSpreadSyntax = [...girlNames, ...boyNames]; console.log(namesWithSpreadSyntax); // Output: ['Jessica', 'Emma', 'Amandine', 'John', 'Terry', 'Alexandre'] 

Como los objetos, el operador de propagación ( ...) extrae todos los elementos de una matriz a otra.

const girlNames = ["Jessica", "Emma", "Amandine"]; const newNewArray = [ ...girlNames, // We extract: // - 'Jessica' // - 'Emma' // - 'Amandine' // and send them to // a new array `[]` ]; 

Cómo eliminar los duplicados de matriz

Como las matrices son listas, puede tener muchos elementos del mismo valor. Si desea eliminar duplicados en su matriz, puede seguir uno de los ejemplos a continuación.

Uno de ellos será sólo una línea gracias a ES6, pero dejo el ejemplo "antiguo" ahí para que puedas comparar.

Cómo eliminar matrices duplicadas "a la 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 anterior, queremos limpiar la animalsmatriz eliminando todos los duplicados.

Podemos hacer que el uso de la función filtercon indexOfsu interior.

La filterfunción toma todos los elementos de la animalsmatriz ( animals.filter). Luego, para cada ocurrencia, proporciona:

  • the current value (example:duck)
  • the index (example: 0)
  • the initial array (example: the animals array =>['owl', 'frog', 'canary', 'duck', 'duck', 'goose', 'owl'])

We will apply indexOf on the original array for each occurrence and give as a parameter the animal variable (the current value).

indexOf will return the first index of the current value (example: for 'owl' the index is 0).

Then inside of the filter, we compare the value of indexOf to the current index. If it's the same, we return true otherwise false.

filter will create a new array with only the elements where the returned value was true.

So, in our case: ['owl', 'frog', 'canary', 'duck', 'goose'].

How to remove array duplicates "the new way"

Well, the "old way" is interesting to understand, but it's long and a bit hard. So let's check out the new way now:

const animals = ["owl", "frog", "canary", "duck", "duck", "goose", "owl"]; const uniqueAnimalsWithSet = [...new Set(animals)]; console.log(uniqueAnimalsWithSet); // Output: ['owl', 'frog', 'canary', 'duck', 'goose'] 

Let's separate out the different steps:

// 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'] 

We have an animals array, and we convert it into a Set, which is a special type of object in ES6.

The thing that's different about it is that it lets you create a collection of unique values.

Note:Set is a collection of unique values, but it's not an Array.

Once we have our Set object with unique values, we need to convert it back to an array.

To do that, we use the spread operators to destructure it and send all the properties to a new Array.

Because the Set object has unique properties, our new array will also have unique values only.

How to Use Ternary Operators

Have you already heard about a way to write small conditions in only one line?

If not, it's time to remove a lot of your if and else blocks and convert them to small ternary operations.

Let's look at an example with console.log to start. The idea is to check the value of a variable and conditionally display an output.

const colour = "blue"; if (colour === "blue") { console.log(`It's blue!`); } else { console.log(`It's not blue!`); } 

This example is a typical case where you can use the ternary operator to reduce these 5 if and else lines to only one!

One line to rule them all!

const colour = "blue"; colour === "blue" ? console.log(`It's blue!`) : console.log(`It's not blue!`); // [condition] ? [if] : [else] 

Ternary operators replace if and else for small conditions.

Note: It's not recommended to create complex conditions with ternary operators because it can reduce readability.

Below is another example that uses ternary operators, but this time in the return of a function.

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!" 

Want to Contribute? Here's How.

You are welcome to contribute to this GitHub repository. Any contribution is appreciated, and it will help each of us improve our JavaScript skills.

GitHub: JavaScript Awesome Tips

Conclusion

I hope you learned some new things about JavaScript while reading this post.

You can stay in touch with me by following my Twitter account here. I post tweets about my new content, programming in general, and my journey as a web developer.

You can also check out HereWeCode on Instagram

I love to share content on different platforms. It's interesting to vary the publication types and adapt to each platform.

If you want to learn JavaScript with catchy visuals, I'm publish programming tutorials on my Instagram.