Atualizações de matriz imutável com Array.prototype.with

Os navegadores ganharam recentemente um novo método interoperável que pode ser chamado em matrizes: Array.prototype.with()

Compatibilidade com navegadores

  • Chrome: 110
  • Borda: 110.
  • Firefox: 115
  • Safari: 16.

Origem

Neste artigo, explicamos como esse método funciona e como usá-lo para atualizar uma matriz. sem mudar a matriz original.

Introdução ao Array.prototype.with(index, value)

O método Array.prototype.with(index, value) retorna uma cópia da matriz chamado com o index definido para o novo value fornecido.

O exemplo a seguir mostra uma matriz de idades. Você gostaria de criar uma nova cópia de a matriz enquanto altera a segunda idade de 15 para 16:

const ages = [10, 15, 20, 25];

const newAges = ages.with(1, 16);
console.log(newAges); // [10, 16, 20, 25]
console.log(ages); // [10, 15, 20, 25] (unchanged)

Detalhando o código: ages.with(...) retorna uma cópia da variável ages. sem modificar a matriz original. ages.with(1, …) substitui o segundo item index = 1). ages.with(1, 16) atribui o segundo item a 16.

É assim que foi possível criar uma nova cópia da matriz com uma modificação.

Isso é muito útil quando você quer garantir que a matriz original permaneça inalterado e este artigo aborda alguns dos casos de uso para isso. Mas, por enquanto, dê uma olhada no que teria acontecido se você tivesse usado a notação por colchetes:

const ages = [10, 15, 20, 25];

const newAges = ages;
newAges[1] = 16;
console.log(newAges); // [10, 16, 20, 25]
console.log(ages); // [10, 16, 20, 25] (Also changed 🙁)

Como você pode notar, a variável ages também foi modificada nesse exemplo. Está porque quando você atribui ages = newAges, o JavaScript não copia a matriz, mas cria uma referência à outra matriz. Então, qualquer mudança em um também afetam o outro, já que ambos apontam para a mesma matriz.

Array.prototype.with() e imutabilidade

A imutabilidade é a base de muitas bibliotecas e frameworks de front-end, alguns: React (e redux) e Vue.

Além disso, outras bibliotecas e frameworks não exigem necessariamente imutabilidade, mas incentive-o para melhorar o desempenho: Angular e Lit

Assim, os desenvolvedores frequentemente precisavam usar outros métodos que retornassem cópias de matrizes o que sacrificou a legibilidade do código:

const ages = [10, 15, 20, 25];

const newAges = ages.map((age, index) => {
    if (index === 1) {
         return 16;
    }
    return age;
});

console.log(newAges); // [10, 16, 20, 25]
console.log(ages); // [10, 15, 20, 25] (Remains unchanged)

Confira um exemplo de Codepen de como o .with() pode ser usado em combinação no React Use useState para atualizar uma matriz de itens de forma imutável:

Como o método .with() retorna uma cópia da matriz, é possível encadear vários chamadas .with() ou até mesmo outros métodos de matriz. O exemplo a seguir demonstra incrementando a segunda e a terceira idades a partir da matriz:

const ages = [10, 15, 20, 25];

const newAges = ages.with(1, ages[1] + 1).with(2, ages[2] + 1)

console.log(newAges); // [10, 16, 21, 25]
console.log(ages); // [10, 15, 20, 25] (unchanged)

Outros métodos imutáveis novos

Três outros métodos se tornaram interoperáveis recentemente:

De acordo com a MDN, esses três métodos são a cópia da versão parceiros. Esses métodos também podem ser usados quando a imutabilidade é esperada ou de preferência.

Em resumo, atualizações imutáveis podem ser alcançadas mais facilmente em JavaScript por um dos quatro métodos apresentados neste artigo. Especificamente: o método .with() facilita a atualização de um único elemento da matriz sem mudar a matriz original.