Arrays e o Operador Spread - JavaScript

O operador spread (operador ...) permite desmembrar um array em valores individuais. Para isso, colocamos três pontos antes do array:

Veja um exemplo simples:

const users = ["Tom", "Sam", "Bob"];
console.log(...users);  // Tom Sam Bob

Usando este operador, podemos preencher um array com valores de outro array:

const users = ["Tom", "Sam", "Bob"];
console.log(users);     // ["Tom", "Sam", "Bob"]

const people1 = [...users];
const people2 = new Array(...users);
const people3 = Array.of(...users);

console.log(people1);   // ["Tom", "Sam", "Bob"]
console.log(people2);   // ["Tom", "Sam", "Bob"]
console.log(people3);   // ["Tom", "Sam", "Bob"]

União de Arrays

Com o operador spread, ao criar um novo array, podemos inserir valores de vários arrays de uma vez. Por exemplo:

const men = ["Tom", "Sam", "Bob"];
const women = ["Kate", "Alice", "Mary"];
const people = [...men, "Alex", ...women];

console.log(people);    // ["Tom", "Sam", "Bob", "Alex", "Kate", "Alice", "Mary"]

Neste caso, o array people recebe valores dos arrays men e women, além de valores adicionais que não fazem parte desses arrays.

Passagem de Argumentos de Função

De modo similar, podemos passar valores de um array para parâmetros de função:

const people = ["Tom", "Sam", "Bob"];

function print(first, second, third) {
    console.log(first);
    console.log(second);
    console.log(third);
}
print(...people); 
// Tom
// Sam
// Bob

Aqui, a função print() recebe três parâmetros. A operação ...people na chamada da função permite distribuir o array people em valores individuais para os parâmetros da função.

Importante ressaltar que isso difere de passar o array diretamente para a função:

Neste caso, o array inteiro é passado para o primeiro parâmetro da função, first, e os outros parâmetros ficam como undefined.

Outro exemplo de passagem de valores de array para parâmetros de função:

function sum(a, b, c) {
    const d = a + b + c;
    console.log(d);
}
sum(1, 2, 3);
const nums = [4, 5, 6];
sum(...nums);

No primeiro caso, passamos os valores diretamente para a função. No segundo caso, passamos os valores de um array para a função.

Se o número de parâmetros da função for menor que o número de elementos do array, os elementos excedentes serão ignorados. Se for maior, os parâmetros sem valores correspondentes receberão undefined:

const people1 = ["Tom", "Sam", "Bob", "Mike"];
const people2 = ["Alex", "Bill"];
function print(first, second, third) {
    console.log(`${first}, ${second}, ${third}`);
}
print(...people1);  // Tom, Sam, Bob
print(...people2);  // Alex, Bill, undefined

Copiando Arrays

O operador spread é a forma mais simples de copiar elementos de um array para outro. Porém, é necessário cautela. Veja um exemplo:

const people = ["Sam", "Tom", "Bob"];
const employees = [...people];
employees[0] = "Dan";
console.log(employees);    // ["Dan", "Tom", "Bob"]
console.log(people);       // ["Sam", "Tom", "Bob"]

Aqui, dois arrays são criados, e os elementos do array people são passados para employees. Ao alterarmos o primeiro elemento de employees, observamos que a mudança não afeta o array original.

Porém, o cenário muda se copiarmos um array de objetos:

const people = [{name: "Sam"}, {name: "Tom"}, {name: "Bob"}];
const employees = [...people];
//employees[0] = {name: "Dan"};
employees[0].name = "Dan";
console.log(employees);    // [{name: "Dan"}, {name: "Tom"}, {name: "Bob"}]
console.log(people);       // [{name: "Dan"}, {name: "Tom"}, {name: "Bob"}]

Quando usamos o operador spread em JavaScript para copiar arrays que contêm objetos, estamos apenas copiando as referências para esses objetos, não os próprios objetos. Isso significa que alterações em um objeto no array copiado também afetarão o array original.

No entanto, se substituirmos completamente um elemento de um array por um novo objeto, a referência no outro array permanecerá inalterada:

const people = [{name: "Sam"}, {name: "Tom"}, {name: "Bob"}];
const employees = [...people];
employees[0] = {name: "Dan"};
console.log(employees);    // [{name: "Dan"}, {name: "Tom"}, {name: "Bob"}]
console.log(people);       // [{name: "Sam"}, {name: "Tom"}, {name: "Bob"}]