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.

About Author

Author Image
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.

Request for Proposal

Name is required

Comment is required

Sending message..