Dealing with mutable objects in Javascript
Posted By : Anil Kumar | 15-Nov-2017
Definition:
Mutable object are the objects, which value or state updating once applies to all references of those objects.
So changing the value of mutable object in one place, changes it for all references to that object.
Consider the example
$scope.btcMarketDataList = [];
$scope.usdMarketDataList = [];
$scope.inrMarketDataList = [];
$scope.kesMarketDataList = [];
$scope.i = 0;
$scope.j = 0;
$scope.k = 0;
$scope.l = 0;
$scope.getMarketDataByName = function(x) {
if (x.marketName.match("BTC")) {
var values = x.marketName.split("BTC");
if (values[0] != "") {
x.marketName = "BTC" + values[0];
}
$scope.btcMarketDataList[$scope.i] = x;
$scope.i++;
}
if (x.marketName.match("USD")) {
var values = x.marketName.split("USD");
if (values[0] != "") {
x.marketName = "USD" + values[0];
}
$scope.usdMarketDataList[$scope.j] = x;
$scope.j++;
}
if (x.marketName.match("INR")) {
var values = x.marketName.split("INR");
if (values[0] != "") {
x.marketName = "INR" + values[0];
}
$scope.inrMarketDataList[$scope.k] = x;
$scope.k++;
}
if (x.marketName.match("KES")) {
var values = x.marketName.split("KES");
if (values[0] != "") {
x.marketName = "KES" + values[0];
}
$scope.kesMarketDataList[$scope.l] = x;
$scope.l++;
}
}
In above example we have four different list. All lists are used to have different data according to the symbol.
Problem specification: We have declared four different list but all lists are getting data from a single object that is x.
x is the mutable object, If x changes then all lists values also changes due to the mutable property of objects.
Its create a problem, All lists value affected which gives improper result.
Solution: To solve this problem we have to replace muttable objects to immutable objects.
For the immutable data types, we have no way of changing the internal state of the data, so the reference always gets reassigned to a new object.
To create a immutable copy of the mutable object we have to use a json method that is
var objCopy = JSON.parse( JSON.stringify( x ) );
Complete Solution:
$scope.btcMarketDataList = [];
$scope.usdMarketDataList = [];
$scope.inrMarketDataList = [];
$scope.kesMarketDataList = [];
$scope.i = 0;
$scope.j = 0;
$scope.k = 0;
$scope.l = 0;
$scope.getMarketDataByName = function(x) {
if (x.marketName.match("BTC")) {
var values = x.marketName.split("BTC");
if (values[0] != "") {
x.marketName = "BTC" + values[0];
}
var objCopy = JSON.parse(JSON.stringify(x));
$scope.btcMarketDataList[$scope.i] = objCopy;
$scope.i++;
}
if (x.marketName.match("USD")) {
var values = x.marketName.split("USD");
if (values[0] != "") {
x.marketName = "USD" + values[0];
}
var objCopy = JSON.parse(JSON.stringify(x));
$scope.usdMarketDataList[$scope.j] = objCopy;
$scope.j++;
}
if (x.marketName.match("INR")) {
var values = x.marketName.split("INR");
if (values[0] != "") {
x.marketName = "INR" + values[0];
}
var objCopy = JSON.parse(JSON.stringify(x));
$scope.inrMarketDataList[$scope.k] = objCopy;
$scope.k++;
}
if (x.marketName.match("KES")) {
var values = x.marketName.split("KES");
if (values[0] != "") {
x.marketName = "KES" + values[0];
}
var objCopy = JSON.parse(JSON.stringify(x));
$scope.kesMarketDataList[$scope.l] = objCopy;
$scope.l++;
}
}
Its gives the desire result, All lists are updated according to the symbol.
Cookies are important to the proper functioning of a site. To improve your experience, we use cookies to remember log-in details and provide secure log-in, collect statistics to optimize site functionality, and deliver content tailored to your interests. Click Agree and Proceed to accept cookies and go directly to the site or click on View Cookie Settings to see detailed descriptions of the types of cookies and choose whether to accept certain cookies while on the site.
About Author
Anil Kumar
Anil is a Web Developer who specializes in creating dynamic and beautiful web projects and has good experience of working in distributed teams.