Synchronization problem

[ci-bus]

I have some functions that create SVG elements, for example lines, these functions return the last position x, y. When I pass x and y from one function to another it does not update the x and y values, however if I put a console log in between or encapsulate the call within an IIFE this works fine, there is really a problem here

OSX 14.6.1 (23G93) Chrome version: 127.0.6533.120 (Build oficial) (arm64)

  function lineToRight(svg, x, y, size, color) {
      let x2 = x + size;
      let y2 = y;
      pintarLinea(svg, x, y, x2, y2, color);
      return [x2, y2];
  }

  function lineToLeft(svg, x, y, size, color) {
      let x2 = x - size;
      let y2 = y;
      pintarLinea(svg, x, y, x2, y2, color);
      return [x2, y2];
  }

  function lineToUp(svg, x, y, size, color) {
      let x2 = x;
      let y2 = y - size;
      pintarLinea(svg, x, y, x2, y2, color);
      return [x2, y2];
  }

  function lineToDown(svg, x, y, size, color) {
      let x2 = x;
      let y2 = y + size;
      pintarLinea(svg, x, y, x2, y2, color);
      return [x2, y2];
  }

  function drawNutHole(x, y, color) {
      const svg = document.getElementById("idSvgElement");
      [x, y] = lineToDown(svg, x, y, 2, color);
      [x, y] = lineToLeft(svg, x, y, 2, color);
      [x, y] = lineToDown(svg, x, y, 3, color);
      [x, y] = lineToRight(svg, x, y, 3, color);
      [x, y] = lineToUp(svg, x, y, 3, color);
      [x, y] = lineToLeft(svg, x, y, 2, color);
      [x, y] = lineToUp(svg, x, y, 2, color);
  }
  drawNutHole(10, 10, 'red')

This doesn't work well, the x and y variables are not updated

  function drawNutHole(x, y, color) {
      const svg = document.getElementById("idSvgElement");
      [x, y] = lineToDown(svg, x, y, 2, color);
      console.log(x, y);
      [x, y] = lineToLeft(svg, x, y, 2, color);
      console.log(x, y);
      [x, y] = lineToDown(svg, x, y, 3, color);
      console.log(x, y);
      [x, y] = lineToRight(svg, x, y, 3, color);
      console.log(x, y);
      [x, y] = lineToUp(svg, x, y, 3, color);
      console.log(x, y);
      [x, y] = lineToLeft(svg, x, y, 2, color);
      console.log(x, y);
      [x, y] = lineToUp(svg, x, y, 2, color);
      console.log(x, y);
  }
  drawNutHole(10, 10, 'red')

Now it works fine, but the code is practically the same, I think there is an evaluation problem.

It also works well if instead of the console.log I do some operation without repercussions, for example:

  let _ = x + y

It also works fine if I encapsulate the function calls in IIFE, example:

  (() => [x, y] = lineToDown(svg, x, y, 2, color))()

I share the complete script with you

index.html.json

OK

BUG