In programmeren houdt objectmutatie in dat de staat of gegevens van een object worden gewijzigd na creatie. Met andere woorden, de operatie die de attributen van een object in JavaScript verandert, staat bekend als objectmutatie. Objectmutatie verandert de waarden van een object direct, wat het uitdagend maakt, met name in toepassingen waar meerdere operaties tegelijkertijd van of naar een object proberen te lezen of schrijven.
Dit artikel presenteert een discussie over objectmutatie in JavaScript met relevante codevoorbeelden waar nodig.
Datatypes in JavaScript
Datatypes geven het type gegevens aan dat een variabele of een object kan bevatten. JavaScript ondersteunt twee verschillende categorieën datatypes: primitieve en door de gebruiker gedefinieerde of referentietypes.
Primitieve Datatypes
In JavaScript zijn alle primitieve datatypes van nature immuun, d.w.z. je kunt ze niet wijzigen nadat ze zijn gemaakt. Getallen, Booleans, Strings, Bigints, Undefineds, Nulls, Symbolen en Objecten zijn voorbeelden van primitieve typen.
Door de Gebruiker Gedefinieerde of ReferentieDatatypes
Door de gebruiker gedefinieerde datatypes of referentiedatatypes zijn objecten die zijn gemaakt met behulp van primitieve typen of een combinatie van primitieve en door de gebruiker gedefinieerde typen. Typische voorbeelden van door de gebruiker gedefinieerde of referentietypes zijn objecten en arrays.
Hoe Variabelen Worden Toegewezen en Opnieuw Toegewezen in JavaScript
Wanneer je een primitief type variabele toewijst aan een primitief type variabele, bevatten de twee variabelen vergelijkbare waarden, maar ze worden op verschillende opslaglocaties opgeslagen. Stel bijvoorbeeld dat je twee variabelen varA en varB hebt en je wijst de ene variabele aan de andere toe op de volgende manier:
var varA = 100;
var varB = varA;
console.log(varB);
Wanneer je het bovenstaande stuk code uitvoert, zal het getal 100 op de console worden weergegeven. Nu wijzig je de waarden van een van de twee variabelen (laten we zeggen varB) zoals hier weergegeven.
var varA = 100;
var varB = varA;
varB = 500;
console.log(varA);
Let op hoe de waarde van de variabele varB is veranderd in 500. Wanneer je de waarde van varA afdrukt, zal deze nog steeds 100 weergeven. Dit komt omdat deze variabelen varA en varB in twee verschillende geheugenlocaties zijn opgeslagen. Dus, als je een van hen wijzigt, zal de nieuwe of gewijzigde waarde niet op de andere variabelen worden weergegeven.
Wat is Objectmutatie in JavaScript?
In JavaScript kan het datatype van een object tot een van de twee categorieën behoren: primitief of niet-primitief. Terwijl primitieve types onveranderlijk zijn, dat wil zeggen dat je ze niet kunt veranderen nadat je ze hebt aangemaakt, kun je niet-primitieve types, dat wil zeggen, objecten en arrays, wijzigen. Objecten staan altijd toe dat hun waarden worden veranderd. Daarom kun je de staat van velden voor een mutabel type veranderen zonder een nieuwe instantie te creëren.
Objectmutaties kunnen verschillende problemen veroorzaken, zoals de volgende:
- Gemuteerde objecten kunnen vaak leiden tot racecondities vanwege problemen met gelijktijdigheid en thread-veiligheid.
- Mutatie kan complexiteit introduceren in de broncode vanwege voorspelbaarheid en problemen met threadveiligheid
- Mutatie kan vaak leiden tot bugs die moeilijk te identificeren zijn in de broncode van de toepassing
- Mutatie maakt het testen en debuggen van de code moeilijk omdat het bijhouden van code die mutatie gebruikt een uitdaging wordt
Voorbeelden van code die objectmutatie aantonen
Objectmutatie kan voorkomen in een van de volgende scenario’s:
- Toevoegen, bewerken of verwijderen van eigenschappen
- Het gebruik van methoden die mutatie kunnen vertonen
Wanneer u de eigenschappen van een object wijzigt, direct of indirect, muteert u in feite het object. Het volgende codefragment toont hoe u een object kunt muteren door de eigenschap te wijzigen.
const author = { id: 1, name: "Joydip Kanjilal"};
author.id = 2; author.city = "Hyderabad, INDIA";
console.log(author);
In het voorgaande stuk code creëren we een object met de naam auteur dat twee eigenschappen bevat, namelijk, id en name. Terwijl de id-eigenschap wordt gebruikt om het id van het auteur record op te slaan, slaat de name-eigenschap de naam van de auteur op. Let op hoe we het auteur object muteren door de waarde met betrekking tot de id-eigenschap te veranderen. Vervolgens voegen we een nieuwe eigenschap toe, genaamd stad, aan het auteur object en wijzen een waarde toe aan de eigenschap.
Wanneer u het voorgaande codefragment uitvoert, zullen de eigenschappen en hun waarden van het auteur object worden weergegeven zoals hieronder getoond:
{ name: 'Joydip Kanjilal', city: 'Hyderabad, INDIA' }
Wanneer je een object doorgeeft aan een functie of toewijst aan een variabele in JavaScript, geef je in feite de referentie naar het object door en niet een kopie ervan. Dit houdt in dat elke wijziging die je aanbrengt in het nieuwe object dat is gemaakt door het doorgeven van een object of het toewijzen ervan aan de variabele, van toepassing zal zijn op alle referenties van het daadwerkelijke object.
Overweeg het volgende stuk code dat laat zien hoe je een object kunt maken in JavaScript en het vervolgens toewijzen aan een variabele.
const objA = { id: 1, name: 'Joydip Kanjilal',
city: 'Hyderabad, INDIA', pincode: 500089 }
const objB = objA;
objB.pincode = 500034;
console.log(objA);
In het voorgaande stuk code is het object objA toegewezen aan objB, en de waarde van het pincode-eigenschap van objA is gewijzigd, d.w.z., het object objA is gemuteerd. Wanneer je het programma uitvoert, zal de volgende gegevens worden weergegeven.
{ id: 1, name: 'Joydip Kanjilal', city: 'Hyderabad, INDIA', pincode: 500034 }
Merk op dat de waarde van het pincode-eigenschap is gewijzigd.
Voorkomen van Objectmutatie in JavaScript
In JavaScript, kun je mutatie voorkomen op verschillende manieren, zoals de volgende:
- Gebruik objectkloons door gebruik te maken van de
Object.assign()methode of de spread-operator (…) - Gebruik de
Object.seal()methode om het toevoegen of verwijderen van eigenschappen van een object te voorkomen - Gebruik de
Object.freeze()methode om het toevoegen, bewerken of verwijderen van eigenschappen van een object te voorkomen
Gebruik van Klonen
Zie het volgende stuk code dat laat zien hoe je een object kunt klonen in JavaScript met behulp van de spread-operator.
let originalObj = { x: 10, y: 100 }; let clonedObj = { originalObj };
Hier is de naam van het gekloonde object clonedObj, en het is identiek aan het originele object genaamd originalObj. Dus, als je de waarden van de twee eigenschappen van deze twee objecten weergeeft, zullen de resultaten hetzelfde zijn.
Nu, verander de waarde van een van de eigenschappen van het gekloonde object genaamd clonedObj naar de gewenste waarde, zoals getoond in onderstaande code.
clonedObj.x = 50;
Schrijf nu de volgende code om de waarde van de eigenschap genaamd x weer te geven met betrekking tot de twee objecten originalObj en clonedObj.
console.log(originalObj.x);
console.log(clonedObj.x);
Wanneer je het programma uitvoert, zul je merken dat de waarde van de eigenschap x in het originele object onveranderd is. De waarden worden weergegeven in de console zoals hieronder getoond:
10
50
Gebruikmakend van de Object.freeze() Methode
De Object.freeze() methode kan een object onveranderlijk maken door wijzigingen aan een van zijn eigenschappen te voorkomen.
const author = { id: 1, name: "Joydip Kanjilal",
city: "Hyderabad", state: "Telengana",
country: "India", pincode: 500089};
Object.freeze(author);
author.city = "Bangalore";
author.state = "Karnataka";
author.pincode = 560010;
console.log(author);
Wanneer je de voorgaande code uitvoert, zullen de resultaten vergelijkbaar zijn met dit:
{
id: 1,
name: 'Joydip Kanjilal',
city: 'Hyderabad',
state: 'Telangana',
country: 'India',
pincode: 500089
}
Zoals je kunt zien aan de output, zelfs als je waarden hebt toegewezen aan de eigenschappen stad, staat en postcode, is er geen effect. Dus, er zijn geen wijzigingen aangebracht in de gegevens die zijn opgeslagen in een van de eigenschappen van het object.
Gebruikmakend van de Object.seal() Methode
Je kunt ook de Object.seal() methode gebruiken om objectmutatie in JavaScript te voorkomen. Met deze methode kun je de waarden van bestaande eigenschappen wijzigen, maar je kunt geen eigenschappen van het Object wijzigen of verwijderen. Het volgende codevoorbeeld illustreert dit:
const author = { id: 1, name: "Joydip Kanjilal",
city: "Hyderabad", state: "Telangana",
country: "India", pincode: 500089};
Object.seal(author);
author.city = "Bangalore";
author.state = "Karnataka";
author.pincode = 560005;
author.booksauthored = 3;
console.log(author);
In de voorafgaande codefragment, terwijl wijzigingen in de eigenschappen van het object genaamd author toegestaan zullen zijn, zal het toevoegen of verwijderen van de eigenschappen van het object niet toegestaan zijn. Wanneer je het programma uitvoert, zul je zien dat de waarden van de gewijzigde eigenschappen worden weergegeven in het resultaat, maar de verklaringen die eigenschappen toevoegen of verwijderen worden genegeerd. Hier is hoe de uitvoer eruit zou zien in de console:
{
id: 1,
name: 'Joydip Kanjilal',
city: 'Bangalore',
state: 'Karnataka',
country: 'India',
pincode: 560005
}
Gebruikmakend van de Object.defineProperty() methode
Je kunt ook gebruikmaken van de Object.defineProperty() methode in JavaScript om de wijzigbaarheid van de individuele eigenschappen van een object te beheersen. Het volgende codefragment toont hoe je deze methode kunt gebruiken om wijzigingen aan de waarde van een eigenschap waarvan de wijzigbaarheid is beperkt, te verbieden.
const author = { id: 1, name: "Joydip Kanjilal"};
Object.defineProperty(author, "booksauthored",
{
value: 3,
writable: false,
});
author.booksauthored = 5;
console.log(author.booksauthored);
Wanneer je het bovenstaande stuk code uitvoert, zul je zien dat het getal 3 in de console wordt weergegeven.
Belangrijke punten
- JavaScript categoriseert objecttypen in twee verschillende categorieën: primitieve (wijzigbaar) en objecten (onwijzigbaar).
- De term objectmutatie verwijst naar de bewerkingen die een object wijzigen of veranderen nadat het is aangemaakt.
- Terwijl primitieve waarden zoals getallen, enz., niet kunnen worden gewijzigd, kun je objecten altijd wijzigen nadat ze zijn aangemaakt.
- Aangezien strings in JavaScript onwijzigbaar zijn, kun je ze niet veranderen zodra ze zijn aangemaakt.
- Hoewel mutatie op zich niet zo slecht is, moet je het zorgvuldig beheren om fouten in je applicaties te verminderen.
- Je kunt mutatie in JavaScript verminderen of elimineren door de aanbevolen praktijken te volgen en gebruik te maken van onwijzigbare datastructuren.
Source:
https://dzone.com/articles/an-introduction-to-object-mutation-in-javascript