Iterative function calls with a loop causes unexpected troubles

Question

Now if I replace the lines :

for(i = 25;i<1000;i*=2){
    pen.DrawStar(i,ctx);
}

To this:

pen.DrawStar(25,ctx);
pen.DrawStar(50,ctx);
pen.DrawStar(100,ctx);
pen.DrawStar(200,ctx);
pen.DrawStar(400,ctx);
pen.DrawStar(800,ctx);

I get the desired output (as opposed to a broken page), although as I understand it the 2 snippets are functionally identical...

So here's the rest of the code the code. I have a pretty simple hello world js program that draws a doodle and an html file which references it.

the Java script is here:

var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
var pen = {
    DrawStar : function (size,ctx){
        ctx.lineWidth = 1;
        ctx.fillStyle = "black";
        for (i = 0; i < size/2; i+=10) {
            ctx.moveTo(size/2,i);
            ctx.lineTo(size/2-i,size/2);
            ctx.stroke();
        }
        for (i = 0; i < size/2; i+=10) {
            ctx.moveTo(size-i,size/2);
            ctx.lineTo(size/2,size/2-i);
            ctx.stroke();
        }
        for (i = 0; i < size/2; i+=10) {
            ctx.moveTo(i,size/2);
            ctx.lineTo(size/2,size/2+i);
            ctx.stroke();
        }
        for (i = 0; i < size/2; i+=10) {
            ctx.moveTo(size/2,size-i);
            ctx.lineTo(size/2+i,size/2);
            ctx.stroke();
        }   
    }
}
for(i = 25;i<1000;i*=2){ // This is the loops that seems to cause problems..
    pen.DrawStar(i,ctx);
}
ctx.font = "30px Arial";
ctx.fillText("Hello, World!",477,30);

I also tried with a while loop and seemed to get hung up in the same way.

here is the html:

<!DOCTYPE html>
<html>
    <head>
        <h1>This is some JavaScript</h1>
    </head>
    <body>
        <link rel='stylesheet' type='text/css' href='stylesheet.css'/>
        <canvas id='myCanvas' width='800' height='800'>
                Displayed if your browser does not support HTML5 Canvas.
        </canvas>
        <script type='text/javascript' src="first.js"></script>
    </body>
</html>

and the real long read, my style sheet...

canvas {
    border: 1px dotted black;
}

(P.s. this is the desired output)

You're spot on, I just realized that without a semi-colon at the end of my function the visibility of i get's all confused. From looking at it you wouldn't expect a "global variable" but due to a little syntax slip up it all hit the fan. Thanks for the reply : ) — kpie, Feb 16 '16 at 04:59
Functions do not take a semi-colon after the closing curly brace. It you do put one there, you are essentially adding an empty statement. In your case, the semi-colon appears in the middle of a list of object properties, where it is invalid, just as `{ o; }` would be invalid. The globality of `i` has nothing to do with the semicolon. All you need to do is to declare `i` inside your function. — , Feb 16 '16 at 05:41
Thanks for your input, all this has really helped me get my head around how JS handles variable scope. — kpie, Feb 16 '16 at 21:07

score 0 · Answer 1 · answered Feb 16 '16 at 18:27

Thanks for your input, as is obvious I am new to JS and after some looking I think I have this done the right way. I added the local variable I to my var pen and used that (this.i) for all my iterations within the call.

var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
var pen = {
    i : 0,
    DrawStar : function (size,ctx){
        ctx.lineWidth = 1;
        ctx.fillStyle = "black";
        for (this.i = 0; this.i < size/2; this.i+=10) {
            ctx.moveTo(size/2,this.i);
            ctx.lineTo(size/2-this.i,size/2);
            ctx.stroke();
        }
        for (this.i = 0; this.i < size/2; this.i+=10) {
            ctx.moveTo(size-this.i,size/2);
            ctx.lineTo(size/2,size/2-this.i);
            ctx.stroke();
        }
        for (this.i = 0; this.i < size/2; this.i+=10) {
            ctx.moveTo(this.i,size/2);
            ctx.lineTo(size/2,size/2+this.i);
            ctx.stroke();
        }
        for (this.i = 0; this.i < size/2; this.i+=10) {
            ctx.moveTo(size/2,size-this.i);
            ctx.lineTo(size/2+this.i,size/2);
            ctx.stroke();
        }
    }
}
for(this.i = 25; this.i < 1000; this.i*=2){
    pen.DrawStar(i,ctx);
}
ctx.font = "30px Arial";
ctx.fillText("Hello, World!",477,30);

score -2 · Answer 2 · answered Feb 16 '16 at 05:02

-2

I needed a semi-colon as at the end of the DrawStar Function as seen here:

var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
var pen = {
    DrawStar : function (size,ctx){
        ctx.lineWidth = 1;
        ctx.fillStyle = "black";
        for (i = 0; i < size/2; i+=10) {
            ctx.moveTo(size/2,i);
            ctx.lineTo(size/2-i,size/2);
            ctx.stroke();
        }
        for (i = 0; i < size/2; i+=10) {
            ctx.moveTo(size-i,size/2);
            ctx.lineTo(size/2,size/2-i);
            ctx.stroke();
        }
        for (i = 0; i < size/2; i+=10) {
            ctx.moveTo(i,size/2);
            ctx.lineTo(size/2,size/2+i);
            ctx.stroke();
        }
        for (i = 0; i < size/2; i+=10) {
            ctx.moveTo(size/2,size-i);
            ctx.lineTo(size/2+i,size/2);
            ctx.stroke();
        }   
    };
}
for(i = 25;i<1000;i*=2){ // This is the loops that seems to cause problems..
    pen.DrawStar(i,ctx);
}
ctx.font = "30px Arial";
ctx.fillText("Hello, World!",477,30);

answered Feb 16 '16 at 05:02

kpie

9,588
5
28
50

1

The semi-colon is not only unnecessary, it is syntactically invalid. – Feb 16 '16 at 05:39
I wouldn't call it unnecessary, see for yourself, w/ the semi colon it works, the browser changes the variable i in the loop to k, without the semi Colon the page breaks. So while it is syntactically invalid, it is necessary. – kpie Feb 16 '16 at 18:24
You're confused. The code doesn't even compile. Chrome generates the error "Uncaught SyntaxError: Unexpected token ;(…)". – Feb 16 '16 at 18:30
It ran in chrome, but obviously that don't make it valid js... Thanks for pointing this out for me. Also not that I had any trouble understanding what you mean but js is interpreted not compiled. – kpie Feb 16 '16 at 18:35
By "doesn't compile", I mean the interpreter chokes on the code even before running it. Please paste the following code into your console: `var pen = { DrawStar: function() { }; };`. – Feb 16 '16 at 19:03

Iterative function calls with a loop causes unexpected troubles

2 Answers2