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.

Request for Proposal

Recaptcha is required.

Sending message..