My script is failing in JSLint

Question

I would have a question. The following script is not going through JSLint without error. Please do not vote me down. This script is only for learning purposes to understand better the closures. If you know it better than please post your solution.

The problem is when I check the code with JSLint I get the following error message:

JSLint was unable to finish. 43.8Expected ';' and instead saw '}'

Here is my script

var c = document.querySelector("#c");
    var ctx = c.getContext("2d");
    var path = function () {
        return {
            innerTri: function (x, y, width, height, fill, stroke) {
                x = x || 0;
                y = y || 0;
                fill = fill || "yellow";
                stroke = stroke !== undefined ? stroke : fill;
                if (width === undefined || height === undefined) {
                    alert("You need to provide width and height");
                    return false;
                }
                ctx.beginPath();
                ctx.moveTo(x, y);
                ctx.lineTo(x = x + width, y);
                ctx.lineTo(x, y = y + height);
                ctx.closePath();
                ctx.fillStyle = fill;
                ctx.strokeStyle = stroke;
                ctx.fill();
                ctx.stroke();

            },

            outRect: function (x, y, width, height, stroke) {
                x = x || 0;
                y = y || 0;
                stroke = stroke || "black";
                if (width === undefined || height === undefined) {
                    alert("You need to provide width and height");
                    return false;
                }
                ctx.beginPath();
                ctx.moveTo(x, y);
                ctx.lineTo(x = x + width, y);
                ctx.lineTo(x, y = y + height);
                ctx.lineTo(x = x - width, y);
                ctx.strokeStyle = stroke;
                ctx.closePath();
                ctx.stroke();
            }
        }
    } //this is the position 43.8
    var a = path();
    a.innerTri(225, 225, 50, 50, "yellow", "green");
    a.outRect(200, 200, 100, 100, "blue");

If I put there a semicolon then I get error message to every each line. The script works as I expected but I can not do anything with this error.

Thank you

Answer 1

Okay, so you were working with extremely strict linting rules.

Here's a list of things I needed to change to get the linter to be happy:

• Put semicolons after the return statement and the path function declaration
• Put a "use strict"; statement at the top of the path function
• Remove inline variable assignments inside lineTo() parameter list
• State that you are using window as a global object (in JSLint settings)
• Call window.alert() instead of just alert()
• State for JSLint to assume this code will be used in a browser (in JSLint settings)
• Ensure that each level of indentation is exactly 4 spaces from the previous level of indentation

Here's what the resulting code would look like:

var c = document.querySelector("#c");
var ctx = c.getContext("2d");
var path = function () {
    "use strict";
    return {
        innerTri: function (x, y, width, height, fill, stroke) {
            x = x || 0;
            y = y || 0;
            fill = fill || "yellow";
            if (stroke === undefined) {
                stroke = fill;
            }
            if (width === undefined || height === undefined) {
                window.alert("You need to provide width and height");
                return false;
            }
            ctx.beginPath();
            ctx.moveTo(x, y);
            x = x + width;
            ctx.lineTo(x, y);
            y = y + height;
            ctx.lineTo(x, y);
            ctx.closePath();
            ctx.fillStyle = fill;
            ctx.strokeStyle = stroke;
            ctx.fill();
            ctx.stroke();

        },

        outRect: function (x, y, width, height, stroke) {
            x = x || 0;
            y = y || 0;
            stroke = stroke || "black";
            if (width === undefined || height === undefined) {
                window.alert("You need to provide width and height");
                return false;
            }
            ctx.beginPath();
            ctx.moveTo(x, y);
            x = x + width;
            ctx.lineTo(x, y);
            y = y + height;
            ctx.lineTo(x, y);
            x = x - width;
            ctx.lineTo(x, y);
            ctx.strokeStyle = stroke;
            ctx.closePath();
            ctx.stroke();
        }
    };
};
var a = path();
a.innerTri(225, 225, 50, 50, "yellow", "green");
a.outRect(200, 200, 100, 100, "blue");