Array Changes When A Function is Called (Debugging)

console.clear();
function hori_resolveOverlaps(lines) {
  if (lines.length <= 1) return lines;

  // Sort the lines ascending by start value
  lines.sort((a, b) => a[0][0] - b[0][0]);

  let outLines = [lines[0]];
  let last = outLines[0];
  // Iterate over the lines, skipping the first one
  lines.slice(1).forEach((line) => {
    // There's an overlap, so extend the current segment's end
    if (line[0][0] <= last[1][0]) {
      last[1][0] = Math.max(last[1][0], line[1][0]);
    } else {
      // No overlap, start a new segment
      outLines.push(line);
      last = outLines[outLines.length - 1];
    }
  });
  return outLines;
}
const input=[ [[1,4],[40,4]] , [[1,5],[40,5]] , [[4,7],[4,24]] , [[1,9],[4,1]] , [[1,2],[6,4]] , [[4,1],[4,2]] , [[4,35],[4,29]] , [[4,28],[4,35]] , [[30,4],[190,4]] , [[5,3.6],[9,5.2]] , [[1,20],[30,1]] , [[15,10.82758],[20,7.55172]]  ];

// a function to get the slope and intercept of the line formed by a pair of points
function describeLine([[x1, y1], [x2, y2]]) {
  if (x1 == x2) { // vertical line
    return {m: "vertical", x: x1}
  }
  const p1 = x1 > x2 ? { x: x1, y: y1 } : { x: x2, y: y2 }
  const p2 = x1 < x2 ? { x: x1, y: y1 } : { x: x2, y: y2 }
  
  const m = (p1.y - p2.y) / (p1.x - p2.x)
  const y = y1 - m * x1
  return { m, y }
}
const maps = input.reduce((acc, line) => {
    const desc = describeLine(line)
    const m = acc[desc.m] || { }
    if (desc.x) { // vertical line
      x = m[desc.x] || []
      return { ...acc, [desc.m]: { ...m, [desc.x]: [ ...x, line ]}}
    } else {
      y = m[desc.y] || []
      return { ...acc, [desc.m]: { ...m, [desc.y]: [ ...y, line ]}}
    }
}, {})
const sameLines = Object.values(maps).flatMap(Object.values)
console.log(sameLines)
console.log(hori_resolveOverlaps(sameLines[0]) )

at this particular line, if hori_resolve_Overlaps is not called which means you can comment with (//) to prevent it from running, sameLines arrays which has length of 7 , at its first index array, the value highlighted below weirdly changes without any reason. May I know how to solve this bug? Why the sameLines array can change when hori_resolve_Overlaps() function is called? Any help will be greatly appreciated 🙂

enter image description here

console.log(sameLines)

console.log(hori_resolveOverlaps(sameLines[0]) )

I have tried to change or clear the variable scope at the beginning of hori_resolve_Overlaps() function, but it does not solve this issue.

>Solution :

The bug is because the input to hori_resolveOverlaps function is mutable, meaning that any changes made to the input will persist after the function call. In other words, the lines array passed to the hori_resolveOverlaps function is the same object in memory as the sameLines[0] array, so any changes made to lines will also be reflected in sameLines[0].

To prevent this, you can make a copy of the input before passing it to the function, for example by using Array.slice or Array.map. This way, the original array remains unchanged, and the function only operates on a copy of the data.

const sameLines = Object.values(maps).flatMap(Object.values)
const copyOfSameLines0 = sameLines[0].slice();
console.log(hori_resolveOverlaps(copyOfSameLines0))

Leave a Reply