Feature-source gets overwritten? - Openlayers-3

Question

I am trying to change the coordinates of a polygon, because it is not aligned with the OSM map.

The strange thing here is that I change a variable which has the same source as the original one, but the original changes values too???

var source = {
"type": "FeatureCollection",
"crs": { "type": "name", "properties": { "name": "urn:ogc:def:crs:OGC:1.3:CRS84" } },

"features": [
{ "type": "Feature", "properties": { "Id": 0 }, "geometry": { "type": "Polygon", "coordinates": [ [ [ 4.312497420496546, 52.087764298370551 ], [ 4.315994732766763, 52.084063278148605 ], [ 4.317642192128438, 52.084674475252591 ], [ 4.320608848035389, 52.082281575536982 ], [ 4.327033152182147, 52.084900298963809 ], [ 4.328872102882754, 52.083397786263042 ], [ 4.330725684097025, 52.08240116910455 ], [ 4.325075250447352, 52.080380908509774 ], [ 4.323651284246982, 52.079818067037131 ], [ 4.325278968702005, 52.078496195100399 ], [ 4.321190073109551, 52.076178045997416 ], [ 4.320102040082559, 52.075934886151501 ], [ 4.317288641554634, 52.074833560798105 ], [ 4.312908126298761, 52.073303114853402 ], [ 4.308277131337725, 52.071705401721594 ], [ 4.306504867796185, 52.073672248830235 ], [ 4.301101667610923, 52.071833856683703 ], [ 4.298725430371779, 52.074404204430166 ], [ 4.297645015234362, 52.074718248719236 ], [ 4.295159154754657, 52.077456010120798 ], [ 4.299552298327635, 52.079324230292976 ], [ 4.303905313618718, 52.081127107504358 ], [ 4.301341005513178, 52.083630969227791 ], [ 4.304256594257713, 52.084863226731358 ], [ 4.305241778217361, 52.085014857054816 ], [ 4.312497420496546, 52.087764298370551 ] ] ] } }
]
};

var xDeviation = 1;
var yDeviation = 1;
var deviation= 0.01;
var afbakeningBinnenstadFeatures = null;
var sourceOriginal;
var sourceChange = source;

//Create vector
var afbakeningBinnenstadObject = new ol.layer.Vector ({
  source: deviationSourceFunction(),
  minResolution:4,
  style: [new ol.style.Style({
                stroke: null,
                fill: new ol.style.Fill({
                    color: '#797979'
                })
    })],
  opacity:0.3
});

function deviationSourceFunction () {
  afbakeningBinnenstadFeatures = new ol.format.GeoJSON().readFeatures(sourceChange, {
    featureProjection: 'EPSG:3857'
  });
  return new ol.source.Vector ({features: afbakeningBinnenstadFeatures});  

}


function changeDeviation () {
  console.log(source['features'][0]['geometry']['coordinates'][0][1]);

  for(var i= 0; i < source['features'][0]['geometry']['coordinates'][0].length;  i++) {
        sourceChange['features'][0]['geometry']['coordinates'][0][i][0] = source['features'][0]['geometry']['coordinates'][0][i][0] * xDeviation;
        sourceChange['features'][0]['geometry']['coordinates'][0][i][1] = source['features'][0]['geometry']['coordinates'][0][i][1] * yDeviation;
    }
  console.log(sourceChange['features'][0]['geometry']['coordinates'][0][1]);
  afbakeningBinnenstadObject.setSource(deviationSourceFunction());

}

How is it possible that my "source" variable changes values? I want my source to stay the same, because else my deviations are useless?

Answer 1

Make a clone instead of an assignment (var sourceChange = source;):

var sourceChange = clone(source);

function clone(obj) {
    var copy;

    // Handle the 3 simple types, and null or undefined
    if (null === obj || "object" != typeof obj) return obj;

    // Handle Date
    if (obj instanceof Date) {
        copy = new Date();
        copy.setTime(obj.getTime());
        return copy;
    }

    // Handle Array
    if (obj instanceof Array) {
        copy = [];
        for (var i = 0, len = obj.length; i < len; i++) {
            copy[i] = clone(obj[i]);
        }
        return copy;
    }

    // Handle Object
    if (obj instanceof Object) {
        copy = {};
        for (var attr in obj) {
            if (obj.hasOwnProperty(attr)) {
                copy[attr] = clone(obj[attr]);
            }
        }
        return copy;
    }

    throw new Error("Unable to copy obj! Its type isn't supported.");
}