Conceitos de JavaScript para React

Alguns conceitos importantes para se trabalhar com o React.

Destructuring

A sintaxe de atribuição via desestruturação (destructuring assignment) é uma expressão JavaScript que possibilita extrair dados de arrays ou objetos em variáveis distintas. Vamos verificar um exemplo, imagine que temos o objeto previsao abaixo retirado de uma consulta a API https://brasilapi.com.br/api/cptec/v1/clima/previsao/2580/3

const previsao = {
  cidade: "Itapetininga",
  estado: "SP",
  atualizado_em: "2024-05-19",
  clima: [
    {
      data: "2024-05-20",
      condicao: "pn",
      condicao_desc: "Parcialmente Nublado",
      min: 16,
      max: 29,
      indice_uv: 5,
    },
    {
      data: "2024-05-21",
      condicao: "pn",
      condicao_desc: "Parcialmente Nublado",
      min: 15,
      max: 31,
      indice_uv: 5,
    },
    {
      data: "2024-05-22",
      condicao: "pn",
      condicao_desc: "Parcialmente Nublado",
      min: 15,
      max: 30,
      indice_uv: 5,
    },
  ],
};

Para conseguir recuperar as informações das variáveis precisaríamos acessar cada uma das propriedades do objeto e atribuir a uma nova variável porém com a desestruturação é possível fazer isso de uma só vez.

//sem destructuring
const cidade = previsao.cidade;
const estado = previsao.estado;
const clima = previsao.clima;

//com destructuring
const { cidade, estado, clima } = previsao;

É possível fazer isso também com vetores. Partindo do mesmo exemplo, na propriedade clima temos um vetor. Imagine que gostaríamos de recuperar os dados do clima.

//sem destructuring
const dia1 = clima[0];
const dia2 = clima[1];
const dia2 = clima[2];

//com destructuring
const [dia1, dia2, dia3] = clima;

Rest/Spread operators

O operadores Rest/Spread são representados pelo caractere .... Segundo a definição do MDN:

A sintaxe de rest parameter (parâmetros rest) nos permite representar um número indefinido de argumentos como um array.

Permite que um objeto iterável, como uma expressão de array ou uma string seja expandido para ser usado onde zero ou mais argumentos (para chamadas de funções) ou elementos (para arrays literais) são esperados, ou que um objeto seja expandido onde zero ou mais pares propriedade:valor (para objetos literais) são esperados. (MDN: sintaxe de espalhamento)

Exemplificando, vamos recuperar o mesmo objeto utilizando anteriormente, vamos apenas modificar o número de dias de previsão retornados com a URL https://brasilapi.com.br/api/cptec/v1/clima/previsao/2580/6 (veja o 6 no final, é ele que indica a quantidade de dias).

Já vimos que poderíamos recuperar os valores do clima usando a sintaxe de destructuring, porém agora temos 6 valores para o clima, como poderíamos armazenar o “resto” desses valores? Pois bem, poderíamos utilizar o operador rest

rest-syntax.js

const [dia1, dia2, dia3, ...demaisDias] = clima;

Quanto ao espalhamento a ideia é literalmente espalhar os objetos fora de sua estrutura. Veja um exemplo para entender melhor. Imagine que temos nosso array clima normal com vários objetos clima dentro dele, porém gostaríamos de criar um novo array com os objetos do array anterior mais um novo objeto. Para simplificar vamos alterar os objetos do dia apenas por Strings.

spread-syntax-array.js

const clima = ["dia1", "dia2", "dia3"];
const novoClima = [clima, "dia4"];
console.log(novoClima); //Resultado: [ [ 'dia1', 'dia2', 'dia3' ], 'dia4' ]

const novoClimaSpread = [...clima, "dia4"];
console.log(novoClimaSpread); //Resultado: [ 'dia1', 'dia2', 'dia3', 'dia4' ]

A mesma ideia se aplica a objetos. Imagine que queremos criar um novo objeto a partir do objeto anterior porém com um novo atributo. Confira o exemplo a seguir.

spread-syntax-object.js

const previsao = {
  cidade: "Itapetininga",
  estado: "SP",
};

const novaPrevisao = { previsao, atualizado_em: "2024-05-19" };
console.log(novaPrevisao); //Resultado: { previsao: { cidade: 'Itapetininga', estado: 'SP'}, atualizado_em: "2024-05-19"}

const novaPrevisaoSpread = { ...previsao, atualizado_em: "2024-05-19" };
console.log(novaPrevisaoSpread); //Resultado: { cidade: 'Itapetininga', estado: 'SP', atualizado_em: '2024-05-19' }

Template strings

Template Strings são strings que permitem expressões embutidas. São envolvidas por (acentos graves) (` `) em vez de aspas simples ou duplas. Template strings podem possuir placeholders. Estes são indicados por um cifrão seguido de chaves ${expressao}.

template-strings.js

const { cidade, estado } = previsao;
const mensagem = `Verificando o clima para ${cidade}, ${estado}`;
console.log(mensagem);

Operador condicional ternário

Operador frequentemente utilizado como um atalho para a instrução IF. Ele possui três operandos: uma condição seguida pelo caractere ?, uma expressão para ser executada caso a condição seja verdadeira seguida por dois pontos :, e por fim, uma expressão caso a condição seja falsa. Veja novamente o exemplo abaixo:

ternary-operator.js

let maxima = 28;
const tempoHoje = maxima > 23 ? "Vai fazer calor" : "Vai fazer frio";
console.log(tempoHoje);

Arrow functions

Uma função de seta é uma alternativa compacta ás funções tradicionais. Imagine que temos uma função que a partir de uma string no formato 2024-05-19 retorna apenas o ano. Veja o exemplo abaixo:

normal-functions.js

function getAno(data) {
  return data.split("-")[0];
}

const ano = getAno("2024-05-19");
console.log(ano);

Agora vamos ver a mesma função utilizando a sintaxe de arrow functions.

arrow-functions.js

const getAno = (data) => data.split("-")[0];
const ano = getAno("2024-05-19");
console.log(ano);

Vamos fazer a decomposição de uma função tradicional, veja o exemplo abaixo:

arrow-functions-decomposition.js

//função tradicional JS
(function (data) {
  return data.split("-")[0];
});

//1. Remova a palavra-chave function
(data) => {
  return data.split("-")[0];
};

//2. Remova as chaves e a palavra-chave return
(data) => data.split("-")[0];

Corpo da função

Arrow functions podem ter tanto um corpo de bloco quanto um corpo de expressão. No corpo de bloco, é necessário usar uma instrução return explicitamente, enquanto no corpo de expressão, o valor de retorno é implícito. Caso você tenha mais de uma instrução no corpo da função, você deve usar o corpo de bloco.

arrow-functions-body.js

//corpo de bloco
const getAno = (data) => {
  return data.split("-")[0];
};

//corpo de expressão
const getAno = (data) => data.split("-")[0];

Funções de arrays

O JavaScript possui várias funções de arrays bastante utilizadas para manipulação de dados. Vamos ver algumas delas: map, filter, reduce. Importante lembrar que essas funções não alteram o array original, elas retornam um novo array.

A função map() é utilizada para transformar os elementos de um array. Ela recebe uma função de callback que será executada para cada elemento do array. Essa função de callback recebe três argumentos: o valor do elemento, o índice do elemento e o array original. Veja um exemplo abaixo:

map-function.js

const novoArray = [1, 2, 3, 4, 5].map((item) => item + 1);
console.log(novoArray);

A função filter() é utilizada para filtrar os elementos de um array. Ela recebe uma função de callback que será executada para cada elemento do array, mas dessa vez espera que a função de callback retorne um valor booleano para decidir se o elemento deve ou não ser incluído no novo array. Veja um exemplo abaixo:

filter-function.js

const novoArray = [1, 2, 3, 4, 5].filter((item) => item % 2 === 0);
console.log(novoArray);

A função reduce() é utilizada para reduzir os elementos de um array a um único valor. Ela recebe uma função de callback que será executada para cada elemento do array. Essa função de callback recebe quatro argumentos: o acumulador, o valor do elemento, o índice do elemento e o array original. Veja um exemplo abaixo:

reduce-function.js

const soma = [1, 2, 3, 4, 5].reduce((acc, item) => acc + item, 0);
console.log(soma);

Array imutável

O conceito de imutabilidade é bastante utilizado em programação funcional e consiste em não alterar o valor de uma variável após sua atribuição. Para trabalhar com o React vai ser bastante utilizado as funções de adicionar, remover e alterar elementos de um array sem alterar o array original. Abaixo temos um exemplo de cada operação:

immutable-array.js

const clima = [
  { id: 1, condicao: "pn", condicao_desc: "Parcialmente Nublado", min: 16, max: 29, indice_uv: 5 },
  { id: 2, condicao: "pn", condicao_desc: "Parcialmente Nublado", min: 15, max: 31, indice_uv: 5 },
  { id: 3, condicao: "pn", condicao_desc: "Parcialmente Nublado", min: 15, max: 30, indice_uv: 5 },
];

const novoClima = {
  id: 4,
  condicao: "pn",
  condicao_desc: "Parcialmente Nublado",
  min: 15,
  max: 30,
  indice_uv: 5,
};
//adicionar um novo clima
const climaAdicionar = [...clima, novoClima];
console.log(climaAdicionar);

//remover um clima
const climaRemover = clima.filter((item) => item.id !== 1);
console.log(climaRemover);

//atualizar um clima
const climaAtualizado = clima.map((item) => (item.id === 1 ? { ...item, condicao_desc: "Ensolarado" } : item));

Anterior: Uma olhada no React · Próximo: Primeiro projeto: MiniPokedex