 |
JavaScript è un linguaggio dinamico, in cui gli oggetti possono essere modificati liberamente dopo la loro creazione. Tuttavia, in alcuni scenari può essere utile o necessario limitare le modifiche a un oggetto per proteggere i dati o mantenere l'integrità di una struttura.
Per questo scopo, JavaScript mette a disposizione due metodi fondamentali:
Object.seal()Object.freeze()
In questo articolo vedremo la differenza tra i due, come usarli correttamente, e li illustreremo con esempi pratici.
🔐 Object.seal(): bloccare la struttura, ma non i valori
Cos’è?
Object.seal(obj) sigilla un oggetto: impedisce l’aggiunta o la rimozione di proprietà, ma consente la modifica dei valori delle proprietà già esistenti.
Quando usarlo?
Quando vuoi proteggere la struttura dell’oggetto, assicurandoti che nessuno aggiunga o rimuova campi, ma permettendo ancora modifiche ai dati interni.
Esempio:
const user = {
name: "Alice",
age: 30
};
Object.seal(user);
user.age = 31; // ✅ allowed
user.city = "London"; // ❌ won't be added
delete user.name; // ❌ won't be deleted
console.log(user);
// Output: { name: 'Alice', age: 31 }
Come puoi vedere:
- La proprietà
ageè stata aggiornata correttamente. - L’aggiunta di
cityè ignorata. - La cancellazione di
namenon ha effetto.
❄️ Object.freeze(): bloccare struttura e valori
Cos’è?
Object.freeze(obj) congela completamente un oggetto: non è possibile né aggiungere né rimuovere proprietà, né modificarne i valori.
Quando usarlo?
Quando vuoi creare un oggetto immutabile, per esempio per costanti di configurazione o per dati che non devono cambiare in nessun caso.
Esempio:
const config = {
host: "localhost",
port: 8080
};
Object.freeze(config);
config.port = 3000; // ❌ won't change
config.env = "production" // ❌ won't be added
delete config.host; // ❌ won't be deleted
console.log(config);
// Output: { host: 'localhost', port: 8080 }
🧪 Come verificare se un oggetto è sigillato o congelato?
JavaScript fornisce due metodi per controllare lo stato di un oggetto:
Object.isSealed(obj); // true if sealed
Object.isFrozen(obj); // true if frozen
Esempio:
const obj = {};
Object.seal(obj);
console.log(Object.isSealed(obj)); // true
console.log(Object.isFrozen(obj)); // false
🔁 Attenzione: seal e freeze sono shallow
Entrambe le tecniche agiscono solo sul primo livello dell’oggetto. Se un oggetto ha proprietà annidate (oggetti dentro oggetti), queste restano modificabili, a meno che non vengano anch'esse sigillate o congelate ricorsivamente.
Esempio:
const settings = {
theme: {
color: "blue"
}
};
Object.freeze(settings);
settings.theme.color = "red"; // ✅ allowed (nested object not frozen)
console.log(settings.theme.color); // Output: "red"
Come congelare un oggetto in profondità?
Puoi usare una funzione ricorsiva:
function deepFreeze(obj) {
Object.getOwnPropertyNames(obj).forEach(prop => {
if (typeof obj[prop] === 'object' && obj[prop] !== null) {
deepFreeze(obj[prop]);
}
});
return Object.freeze(obj);
}
const deepSettings = {
theme: {
color: "blue"
}
};
deepFreeze(deepSettings);
deepSettings.theme.color = "red"; // ❌ won't change
console.log(deepSettings.theme.color); // Output: "blue"
✅ Conclusione
Le tecniche seal e freeze sono strumenti potenti per controllare e proteggere lo stato degli oggetti JavaScript. Usali per:
- Evitare modifiche non intenzionali
- Rendere oggetti immutabili (con
freeze) - Proteggere API o configurazioni
- Migliorare la sicurezza e la stabilità del tuo codice
| Metodo | Aggiungere proprietà | Rimuovere proprietà | Modificare valori |
|---|---|---|---|
Object.seal |
❌ | ❌ | ✅ |
Object.freeze |
❌ | ❌ | ❌ |
Ricorda: per oggetti complessi o profondi, considera l’uso di funzioni ricorsive come deepFreeze() per una protezione completa.
Follow me #techelopment
Official site: www.techelopment.it
facebook: Techelopment
instagram: @techelopment
X: techelopment
Bluesky: @techelopment
whatsapp: Techelopment
youtube: @techelopment
