Métodos clássicos de array como sort(), reverse() e splice() sempre tiveram um efeito colateral incômodo: eles alteram o array original. O ES2023 trouxe as versões "por cópia" desses métodos — toSorted(), toReversed(), toSpliced() e with() — que fazem a mesma coisa, mas devolvendo um array novo e deixando o original intacto.
O problema da mutação
const numeros = [3, 1, 4, 1, 5];
const ordenado = numeros.sort();
console.log(ordenado); // [1, 1, 3, 4, 5]
console.log(numeros); // [1, 1, 3, 4, 5] — o original também mudou!
Isso é uma fonte clássica de bugs: você espera criar um array novo para exibir ordenado, mas acaba corrompendo silenciosamente o array que outra parte do código ainda usa como referência.
toSorted()
Funciona exatamente como sort(), aceitando a mesma função de comparação, mas sem tocar no array original:
const numeros = [3, 1, 4, 1, 5];
const ordenado = numeros.toSorted((a, b) => a - b);
console.log(ordenado); // [1, 1, 3, 4, 5]
console.log(numeros); // [3, 1, 4, 1, 5] — intacto
toReversed()
const passos = ['login', 'carrinho', 'pagamento', 'confirmação'];
const emOrdemReversa = passos.toReversed();
console.log(emOrdemReversa); // ['confirmação', 'pagamento', 'carrinho', 'login']
console.log(passos); // inalterado
toSpliced()
Assim como splice(), remove, insere ou substitui elementos a partir de um índice — mas devolve um array novo em vez de alterar o original e retornar os itens removidos:
const tarefas = ['revisar', 'testar', 'publicar'];
const comExtra = tarefas.toSpliced(1, 0, 'documentar');
console.log(comExtra); // ['revisar', 'documentar', 'testar', 'publicar']
console.log(tarefas); // ['revisar', 'testar', 'publicar'] — inalterado
with()
Substitui um único item em um índice específico, devolvendo um array novo. É a versão imutável de arr[i] = valor:
const carrinho = ['camiseta', 'boné', 'meia'];
const atualizado = carrinho.with(1, 'jaqueta');
console.log(atualizado); // ['camiseta', 'jaqueta', 'meia']
console.log(carrinho); // ['camiseta', 'boné', 'meia'] — inalterado
Índices negativos também funcionam, contando a partir do final do array, como em carrinho.with(-1, 'luvas').
Quando usar
- Atualizar estado em frameworks como React ou Vue, onde mutar um array diretamente quebra a detecção de mudanças.
- Ordenar ou reordenar dados para exibição sem afetar a fonte original (ex: um cache ou um array vindo de props).
- Escrever funções puras que recebem um array e devolvem outro, sem efeitos colaterais.
- Evitar bugs sutis quando o mesmo array é compartilhado entre múltiplas partes do código.
Cuidado com a confusão de nomes
É fácil esquecer qual método muta e qual não muta, já que os nomes são parecidos. Uma forma de lembrar: os métodos novos sempre começam com to (exceto with()), sinalizando "transforme isso em um array novo", em vez de alterar o que já existe.
Compatibilidade
Esses métodos fazem parte do ECMAScript 2023 e já têm suporte amplo nos navegadores modernos e no Node.js recente. Ainda assim, vale conferir antes de usar em produção se o projeto precisar suportar ambientes mais antigos, ou usar um polyfill nesse caso.
Conclusão
As versões "por cópia" de sort(), reverse(), splice() e da atribuição por índice tornam o código mais previsível, eliminando uma classe inteira de bugs causados por mutações inesperadas — sem exigir bibliotecas externas ou truques como [...array] antes de cada operação.
0 Comentário
Deixe seu Comentário!