Diário de bordo #4

Spreat Operator

Trazendo uma definição mais objetiva e simples de para que serve o Spreat Operator, é imaginando um cenário na qual você, desenvolvedor precisa reaproveitar os dados de um Vetor ou uma Função em outras partes de seu código, que porventura poderia ser feito de uma maneira 'menos eficiente', extendendo para mais linhas de código o que poderia ter sido feita em uma, por exemplo. E basicamente é isso que o Spreat Operator faz, ele serve para que você consiga copiar os dados de um Objeto ou Array e realizar uma espécie de concatenação destas informações em outros lugares do seu código, como por exemplo dentro de outros Objetos, Arrays ou Funções, através do ...nomeDoObjeto ou ...nomeDoArray, na qual o ... serve para indicar que todos os dados dentro deste objeto/array serão copiados e inseridos em um outro lugar, acompanhado de mais outros tipos de informações com base na necessidade de cada programa. Veja um exemplo prático abaixo:

const dataUser = [
    'Ana Luisa', 'Desenvolvedora Front-End', 20, 2002
]; 

const newDataUser = [...dataUser, 'Geek', 'Mãe de pet']; 

console.log(newDataUser); 

/* Resultado da impressão do console.log()
[
    'Ana Luisa',
    'Desenvolvedora Front-End',
    20,
    2002,
    'Geek',
    'Mãe de pet'
  ]*/

O que foi feito no bloco de código acima foi a criação de uma variável chamada dataUser que recebe um vetor na qual contém os dados de um usuário.

Caso quisermos criar uma nova variável que receba um Vetor com informações diferentes e quisermos realizar uma especie de concatenação destes dados utilizamos o ... do Spreat Operator que tem a função de coletar todos os dados de um Objeto ou Vetor e adicionar onde for cabivel para você. Como estou trazendo o newDataUser como exemplo, o que fiz foi exatamente como feito nesta explicação, trazer todos os dados do vetor dataUser, adiciona-los dentro do newDataUser e inserir novos valores.

Além disso, podemos utilizar o spreat operator para funções, veja o exemplo abaixo:

function sum(a, b, c) {
    return a + b + c
};

const numbers = [15, 20, 45];

console.log(sum(...numbers)); // retorna o resultado da soma: 80

Rest Operator

Como o próprio nome sugere, o Rest Operator é utilizado para quando temos a necessidade de fazer uma recuperação do resto dos dados de um array ou objetos.
Veja um exemplo prático abaixo:

const person = ['Ana Luisa', 2002, 'Desenvolvedora Front-End', '1.64m'];

const [name, yearBirth, ...personData] = person;

console.log(name); // Ana Luisa

console.log(yearBirth); // 2002

console.log(personData); // ['Desenvolvedora Front-End' , '1.64m']

Cada identificador dado na segunda linha de código tem que ser relacionados a ordem de cada posição dos itens do nosso vetor person, onde a posição[0], recebe o name como variável para identificar essa informação, e assim sucessivamente, já o ...personData irá trazer todo o resto dos dados que faltavam ser informados.

Veja outro exemplo utilizando objetos:

const employee = {
    firstName: 'Ana',
    lastName: 'Luisa',
    city: 'Salvador',
    country: 'Brazil',
    age: 20
};

const {firstName, lastName, ...theRest} = employee;

console.log(firstName); // Retorna 'Ana'

console.log(lastName); // Retorna 'Luisa'

console.log(theRest); // Retorna { city: 'Salvador', country: 'Brazil', age: 20 }