Como corrigir o erro TypeError: Cannot modify property 'X' of a read-only object?

O erro TypeError: Cannot modify property 'X' of a read-only object ocorre quando você tenta alterar uma propriedade de um objeto que foi declarado como imutável ou somente leitura. Em JavaScript, existem várias maneiras de criar objetos imutáveis, e tentar modificar propriedades desses objetos resultará nesse erro.

Aqui está um exemplo de como esse erro pode ocorrer:

const obj = Object.freeze({ name: 'John' });
obj.name = 'Jane'; // TypeError: Cannot modify property 'name' of a read-only object

Neste exemplo, o método Object.freeze() é usado para tornar o objeto obj imutável. Depois de aplicar Object.freeze(), qualquer tentativa de modificar as propriedades do objeto resultará em um erro.

Como resolver?

Para resolver esse erro, você precisa garantir que o objeto não seja imutável ou criar um novo objeto com a propriedade modificada. Aqui está como corrigir o exemplo acima:

let obj = Object.freeze({ name: 'John' });
obj = { ...obj, name: 'Jane' }; // Correto!

Aqui, usamos o operador de espalhamento (...) para criar um novo objeto com a propriedade name modificada, preservando o valor original do objeto imutável.

Como evitar o erro ao modificar objetos imutáveis em JavaScript

Quando você estiver lidando com objetos imutáveis, certifique-se de não tentar modificar suas propriedades diretamente. Em vez disso, crie um novo objeto e faça as alterações necessárias nesse novo objeto. Em JavaScript, métodos como Object.freeze() e const são frequentemente usados para criar objetos imutáveis, o que pode ser útil quando você deseja evitar modificações acidentais.

Algumas aplicações:

• Use o operador de espalhamento (...) para criar novos objetos com as propriedades modificadas.
• Evite modificar propriedades de objetos congelados ou imutáveis.
• Se precisar de um objeto mutável, use let em vez de const e não aplique Object.freeze().

Dicas para quem está começando

• Sempre verifique se o objeto foi congelado usando Object.freeze() antes de tentar modificar suas propriedades.
• Se você precisar modificar um objeto imutável, crie um novo objeto e copie as propriedades com o operador de espalhamento.
• Evite usar Object.freeze() se precisar modificar as propriedades de um objeto no futuro.

Contribuições de

Ricardo Vasconcellos

Desenvolvedor full stack especialista em PHP, JavaScript, Node.js, Python e SQL.

Mais sobre o autor

Compartilhe este tutorial