Question about recursion in JavaScript

Question

JavaScript

Recently I had to learn a little about drawing with Canvas and JavaScript. Everything was smooth, but I came across one unpleasant (or pleasant) feature of JavaScript'a - the strange behavior of functions during recursion in the presence of local variables.

Consider an example.

function write(x) {
    if (x != 0) {
        document.write(x);
  //х1 = х
  write(x-1);
  write(x-1);
    }
}

In this case, the sequence “3211211” will appear on our page, which is very logical. However, if you uncomment the line “x1 = x”, which, from my point of view, does not affect the operation of the function, then only “3” will appear on the page.

Now a little more, maybe a little different, and related to drawing :)

The task was to recursively draw a "tree". Essentially draw a line with three lines coming out of the end at different angles, and so on n times. The task is very easy, but in the end I ran into problems.

Here is the function code (please do not kick the code, it was written with the aim of learning how to work with canvas):

function drawall() {
    canvas = document.getElementById("canvas");
    context = canvas.getContext('2d');
    canvas.width = $(document).width(); //Беру размеры документа при помощи jQuery, но можно задать произвольные 
    canvas.height = $(document).height();
    depth = 4;

    context.lineWidth = depth;
    context.beginPath();
    context.moveTo(0,0);
    context.lineTo(100,100);
    context.stroke();
    
    draw(context, 100, 100, depth-1);
}

function draw(context, x, y, depth) {
    if (depth!=0) {  
        context.lineWidth = depth; // Задаем толщину, которая по ходу будет уменьшаться
        context.beginPath();
    
        length = 200;
    
        context.moveTo(x, y);
        angle = Math.random()*(Math.PI/2); //Выбираем произвольный угол от 0 до 90 градусов
        newx = Math.cos(ugol)*angle+x; //считаем координаты новых точек
        newy = Math.sin(ugol)*angle+y;
        context.lineTo(newx, newy); // и рисуем до них
        context.stroke();
    
        draw(context, newx, newy, depth-1); //И продолжаем наше дело :)
        draw(context, newx, newy, depth-1);
        draw(context, newx, newy, depth-1);

    }
}

It seemed to me that this was a normal implementation, but I was very surprised when I saw the result - instead of a “tree” on the screen, all the “branches” were one after another. It was like calling "child" functions overwrites the values ​​in newx and newy everywhere, and as a result, the next steps start from the last values ​​of newx and newy.

The final question is how to make sure that the values ​​​​of variables are not overwritten?

Answer 1

Firstly, in the first example, you have the Russian letter “x” in the commented line, so after the first start of write everything breaks. If you write a normal x, the result will be normal.
Second, local variables need to be defined as "var x1=x;" and what you have now is the global variable x1 (also known as window.x1). Read about JS scopes.

Answer 2

//x1 = x - where is the semicolon? error, only 3 and write.

Answer 3

it is not very clear who ugol is and why he is not angle

Answer 4

draw(context, newx, newy, depth-1); //И продолжаем наше дело :)
draw(context, newx, newy, depth-1);
draw(context, newx, newy, depth-1);

It must be understood that it will never reach the 2nd and 3rd lines.
If this becomes clear, then it should become clear what is happening with the variables.