How do I assign the same array values to 2 different variables

Question

I have:

• path array, that is containing pairs of x,y coordinates
• config dictionary contains with the only current path (of course config actually containing some parameters, so please do not try to remove it)
• initialPath, that should constantly contain initial path values without any changes

I want my current (config) path to change its x values relatively from its initial values:

// create config which should store some params
var config = {};

// initial array
var path = [[0,0], [10,10], [20,20]];

// initialPath is an array that I want to stay constant
// because new position of the path will be calculated by initial path 
// (not current that is in config) multiply on some koefficient

var initialPath = [...path]; // deep copy path
config.path = [...path]      // deep copy path

console.log("initialPath before", initialPath );

for (var i = 0; i < config.path.length; i++) {
    for (var j = 0; j < config.path[i].length; j++) {
        // I want initial path do NOT change here, but it does
        config.path[i][0] = initialPath[i][0] * 2;     
    }
}

console.log("initialPath after", initialPath );

So every time I multiply x coords they should change relatively from initialPath, not current.

Output I have:

// initialPath before:
// Array(3)
// 0: (2) [0, 0]
// 1: (2) [40, 10]
// 2: (2) [80, 20]

// initialPath after:
// Array(3)
// 0: (2) [0, 0]
// 1: (2) [40, 10]
// 2: (2) [80, 20]

As we see initialPath is changed its values

Output I want:

// initialPath before:
// Array(3)
// 0: (2) [0, 0]
// 1: (2) [10, 10]
// 2: (2) [20, 20]

// initialPath after:
// Array(3)
// 0: (2) [0, 0]
// 1: (2) [10, 10]
// 2: (2) [20, 20]

PS Probably title is confusing for that question, so please change it if you know exactly how this problem is named

Answer 1

You are not making a deep copy of the array. It is still a shallow copy. Here is how you can make a deep copy:

function deepCopy(array) {
    return array.map(element => {
        if (Array.isArray(element))
            return deepCopy(element);
        return element;
    });
}

var a = [1, 2, [3, 4], [5, 6]];
var b = deepCopy(a);
console.log('before');
console.log('a', a);
console.log('b', b);
b[2][0] = 7;
b[3][1] = 8;
console.log('after');
console.log('a', a);
console.log('b', b);

Answer 2

you can do (for this case)

const path = [[0,0], [10,10], [20,20]];

const copyvaluesPath = path.map(x=>[...x]); // real deep copy path

copyvaluesPath[0][0] = 15

console.log( JSON.stringify(path) )
console.log( JSON.stringify(copyvaluesPath) )

.as-console-wrapper { max-height: 100% !important; top: 0; }

Answer 3

Both your new arrays point to path directly (by reference),

so your config.path doesn't only mutate initialPath, but path aswell, which then gets propagated to initialPath.

i removed the reference by editing the arrays declarations like this var initialPath = Array([...path]); config.path = Array([...path])

and the code runs correctly all the rest being the same.

Cheers!