scenarios when attempting to slice and splice a multi-dimensional array in JavaScript
I've been banging my head against this for hours. I'm optimizing some code but I'm trying to configure I'm relatively new to this, so bear with me..... I'm working with an scenario when trying to manipulate a two-dimensional array in JavaScript. I have a matrix of numbers, and I'm attempting to slice a portion of it and then splice some new values into that section. However, I'm running into unexpected behavior where the original array is being modified, and I'm not sure why. Here's the code I'm using: ```javascript const matrix = [ [1, 2, 3], [4, 5, 6], [7, 8, 9] ]; // Attempting to slice the second row and splice new values into it const slicedRow = matrix[1].slice(); // I expect this to create a copy console.log('Sliced Row Before:', slicedRow); slicedRow.splice(1, 1, 50, 51); // Adding new values console.log('Sliced Row After:', slicedRow); console.log('Original Matrix After Splice:', matrix); ``` I expected that the original `matrix` should remain unchanged after splicing `slicedRow`, but it turns out that my original matrix is also being altered. The output shows that the second row of the original `matrix` is not what I expected. After some debugging, I realized that while I used `slice()` on the second row, the nested arrays within the `matrix` are still referring to the same objects in memory. This means changes to `slicedRow` are reflected in `matrix[1]`. Is there a good way to create a deep copy of this two-dimensional array, or is there a different approach I should take to manipulate the rows without affecting the original matrix? I'm using Node.js v14.17.0. Any advice on best practices for working with nested arrays in JavaScript would be greatly appreciated! What's the best practice here? This is for a mobile app running on macOS. I'm developing on macOS with Javascript. Has anyone dealt with something similar? For context: I'm using Javascript on Windows 10. What's the best practice here?