Rest Operator
Transforma argumentos da função em array.
O que era um elemento independente se torna parte de um array.
Permite receber quantidade indefinida de argumentos, independente da definição da função.
Receber argumentos em uma função
Exemplo ES5
Usa-se o objeto "arguments" para receber os argumentos.Inexistente em Arrow Functions.
function fn(a, b, c, d){
console.log(arguments);
for(var i=0; i < arguments.length; i++){
console.log(arguments[i])
}
}
Exemplo ES6
// Regular Function
function sum(...args){
console.log(args);
return args.reduce((total, nextValue) => total + nextValue, 0);
}
// Arrow Function
const sum = (...args) => {
console.log(args);
return args.reduce((total, nextValue) => total + nextValue, 0);
}
// Pode ser usado para pegar argumentos restantes
function sum(a, b, ...args){
console.log(a, b, args);
return a + b + args.reduce((total, nextValue) => total + nextValue, 0);
}
Spread Operator
Transforma objetos e arrays em argumentos.
O que era parte de um array/object se torna um elemento independente.
Permite quebrar os itens do array e repassar para algum lugar.
Usabilidade
- Functions Parameters (Enviando argumentos: Objetos Iterables (Array, String))
- Construção de NOVAS estruturas (Objetos Iterables e Literais)
Functions Parameters
Arrays (Object Iterable)
var arr = [1, 2, 3];
function fn(x, y, z){
console.log(x, y, z)
};
fn(...arr);
String (Object Iterable)
const str = 'Digital Innovation One';
function logArgs(...args){
console.log(args);
}
logArgs(...str);
Construção de NOVAS estruturas
Arrays (Iterable Objects)
var arr1 = [1, 2, 3];
var arr2 = [4, 5, 6];
// ES5
var arr3 = [4, 5, 6].concat(arr1); // [4, 5, 6, 1, 2, 3]
var arr3 = arr1.concat(arr2); // [1, 2, 3, 4, 5, 6]
// ES6
var arr3 = [4, 5, 6, ...arr1]; // [4, 5, 6, 1, 2, 3]
var arr3 = [...arr1, 4, 5, 6]; // [1, 2, 3, 4, 5, 6]
var arr3 = [...arr1, ...arr2]; // [1, 2, 3, 4, 5, 6]
var arr3 = ['x',...arr1,'y']; // ['x', 1, 2, 3, 'y']
var arr3 = [...arr1,...arr2,...arr3]
var arr3 = [...arr1]; // [1, 2, 3]
Objetos (literal Objects)
const obj1 = { test1: 123 };
// Construção de NOVOS objetos (NÃO altera objetos já definidos)
const obj2 = { ...obj1, test2: 456 }; // { test1: 123, test2: 456 }
const obj3 = { ...obj1, test2: 'teste' }; // { test1: 789, test2: 'teste' }
// Objetos literables não podem ser usados para construir objetos iterables.
var arr = [...obj1]; // Uncaught TypeError: obj1 is not iterable
// A ORDEM importa (Propriedades com mesmo nome) = Prevalece o último
const obj4 = {...obj1, test1: 456}; // { test1: 456 }
const obj5 = {test1: 456, ...obj1}; // { test1: 123 }
const obj6 = {...obj4, ...obj5}; // { test1: 123 }
Rest Operator vs Spread Operator
Rest transforma argumentos em array. Usa quando está declarando a função.
Spread transforma array em argumentos. Usa quando está chamando a função.
Ambos possuem a mesma sintaxe: ...ope
Boa Prática
Tipos de referência NUNCA devem ser copiados diretamente, porque a referência também é copiada, assim sempre que um for alterado, será replicado para o outro também.Sendo assim, é RECOMENDADO sempre criar NOVAS estruturas, e o Spread é uma das boas formas de fazer isso em um formato não verbosa, mais simples e legível.
Destructuring Assigment ou Destructuring Object
Atribuição via desestruturação de um objeto ou array.
Atribuição de uma estrutura composta (object/array) para estruturas simples (variáveis).
Expressão que possibilita extrair itens de arrays/objetos em variáveis distintas.
Usa-se chaves {} para filtrar apenas os itens desejados.
Usabilidade
- Declaration of variables
- Functions Arguments
Exemplo com objeto
Lista nomeada, o que importa são os nomes, e não a ordenação.
const obj = { name: 'Heviane', lastName: 'Bastos', age: 39 };
const { age, name } = obj;
function fn( {name} ){
console.log(name);
};
const user = {
id: 1,
age: 39,
fullName: {
firstName: 'Heviane',
lastName: 'Bastos'
}
}
const { fullName: { firstName, lastName } } = user;
function fn( {fullName: { firstName, lastName } } ){
console.log(firstName, lastName);
};
Exemplo com array
Lista indexada, o que importa é a ordenação, e não os nomes.
const arr = [ 'Heviane', 'Bastos', 39];
const [ name , , age ] = arr;