5 dicas de JavaScript para economizar tempo!

Neste artigo vamos lhe dar 5 dicas de javascript de nível avançado para você economizar tempo, não subestime esse artigo, ele tem muito a te ensinar, DevJS

Destruturação de Objetos (Dicas Javascript)

A desestruturação é um recurso que foi introduzido no ES6. É um dos recursos que você usará diariamente quando souber como.

Ajuda você a lidar com três questões principais:

• Repetição. Cada vez que você deseja extrair uma propriedade do objeto e criar uma nova variável, você cria uma nova linha.

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;

• Acessibilidade. Cada vez que você deseja acessar uma propriedade do objeto, você deve escrever o caminho para ele. ( Exemplo: user.firstName , user.family.sister, e assim por diante).
• Uso. Por exemplo, quando você cria uma nova função e está trabalhando apenas com uma propriedade de um objeto.

Agora que você viu quais são esses três problemas com objetos, como você acha que pode resolvê-los?

Como resolver o problema de repetição (Dicas Javascript)

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

A desestruturação é o processo de extrair uma propriedade de um objeto por meio de sua chave. Ao pegar uma chave existente em seu objeto e colocá-la entre dois colchetes ( { firstName }), você informa ao JavaScript:

“Ei JavaScript, eu quero criar uma variável com o mesmo nome da minha propriedade. Eu quero criar uma variável firstNamepara a firstNamepropriedade do meu objeto.”

Nota: Se você quiser desestruturar um objeto, você deve sempre usar uma chave existente. Caso contrário, não funcionará.

Como resolver o problema de acessibilidade

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'

Quando você trabalha com objetos aninhados, pode se tornar bastante repetitivo e perder muito tempo acessando a mesma propriedade muitas vezes.

Usando a desestruturação, em apenas uma linha, você pode reduzir o caminho da propriedade a uma variável.

Como resolver o problema de uso

Agora que você sabe como desestruturar um objeto, deixe-me mostrar como extrair propriedades diretamente em sua definição de parâmetro de função.

Se você conhece React, provavelmente já está familiarizado com ele.

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

No exemplo acima, temos uma função getUserFirstName e sabemos que ela usará apenas uma propriedade do nosso objeto firstName,.

Em vez de passar o objeto inteiro ou criar uma nova variável, podemos desestruturar os parâmetros da função do objeto.

Leia Também: React Javascript: Guia para Iniciantes

Como mesclar objetos no ES6 (Dicas Javascript)

Na programação, geralmente você precisa lidar com problemas com estruturas de dados. Graças ao operador de propagação introduzido no ES6, as manipulações de objetos e matrizes são mais diretas.

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

Vamos imaginar que temos dois objetos:

• Do utilizador. Um objeto que define informações gerais sobre o usuário.
• UserJob. Um objeto que define as informações do trabalho do usuário.

Queremos criar um objeto que contenha apenas as propriedades desses dois 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 o operador spread ( …), podemos extrair todas as propriedades de um objeto para outro.

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

Como mesclar matrizes (Dicas Javascript)

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 objetos, o operador spread ( …) extrai todos os elementos de um array para outro

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

Como Remover Duplicatas de Matriz

Como os arrays são listas, você pode ter muitos itens com o mesmo valor. Se você deseja remover duplicatas em seu array, você pode seguir um dos exemplos abaixo.

Um deles terá apenas uma linha graças ao ES6, mas deixei o exemplo “antigo” aí para que você possa comparar.

Como remover duplicatas de array “da maneira antiga”

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

No exemplo acima, queremos limpar a matriz animals removendo todas as duplicatas.

Podemos fazer isso usando a função filtercom indexOfdentro dele.

A função filter leva todos os elementos do animalsarray ( animals.filter). Então, para cada ocorrência, ele fornece:

o valor atual ( exemplo duck 🙂
o índice ( exemplo: 0)
a matriz inicial ( exemplo: a animalsmatriz => [‘owl’, ‘frog’, ‘canary’, ‘duck’, ‘duck’, ‘goose’, ‘owl’])
Aplicaremos indexOf no array original para cada ocorrência e daremos como parâmetro a variável animal (o valor atual).

indexOf retornará o primeiro índice do valor atual ( exemplo: para ‘owl’ o índice é 0).

Então, dentro do filtro, comparamos o valor de indexOf ao índice atual. Se for o mesmo, voltamos de trueoutra forma false.

filter irá criar uma nova matriz com apenas os elementos onde estava o valor retornado true.

Então, no nosso caso: [‘owl’, ‘frog’, ‘canary’, ‘duck’, ‘goose’].

Como remover duplicatas de array “do novo jeito”

Bem, a “maneira antiga” é interessante de entender, mas é longa e um pouco difícil. Então, vamos verificar a nova maneira agora:

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

Vamos separar as diferentes etapas:

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

Temos um array animals e o convertemos em um Set, que é um tipo especial de objeto no ES6.

A diferença é que permite criar uma coleção de valores únicos.

Nota: Set é uma coleção de valores únicos, mas não é um Array.

Assim que tivermos nosso Set objeto com valores únicos, precisamos convertê-lo de volta em um array.

Para fazer isso, usamos os operadores de propagação para desestruturá-lo e enviar todas as propriedades para um novo Array.

Como o Set objeto tem propriedades exclusivas, nosso novo array também terá apenas valores exclusivos.

Como usar operadores ternários (Dicas Javascript)

Você já ouviu falar sobre uma maneira de escrever pequenas condições em apenas uma linha?

Se não, é hora de remover um monte de seus blocos if e else e convertê-los para operações ternários pequenas.

Vejamos um exemplo para começar console.log . A ideia é verificar o valor de uma variável e exibir condicionalmente uma saída.

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

Este exemplo é um caso típico em que você pode usar o operador ternário para reduzir essas 5 linhas ife else a apenas um!

Uma linha para governar todos eles!

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

Operadores ternários substituem para if e else pequenas condições

Nota: Não é recomendado criar condições complexas com operadores ternários porque isso pode reduzir a legibilidade.

Abaixo está outro exemplo que usa operadores ternários, mas desta vez na forma de uma função return.

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

Conclusão

Espero que você tenha aprendido algumas coisas novas sobre JavaScript ao ler este post.

Adoro compartilhar conteúdo em diferentes plataformas. É interessante variar os tipos de publicação e se adaptar a cada plataforma.