how to use a class's method in another function outside the class?

Question

I want to use the class Coordinates's methods compX and compY outside the class and inside another function how can I do this I am getting the error ReferenceError: xy is not defined

I tried making the object inside the other function drawGraph() but it still gives an error.

<script>
var c =document.getElementById("myCanvas"); 
var ctx = c.getContext("2d");
//function call
drawGraph(ctx,-10,10);
drawAxis(ctx,10);

function f(x){
        return x*x;
}

class Coordinates {
    Coordinates(){}
    compX(x){
        originX = myCanvas.width/2;
        mag = 20;
        return(originX + mag*x);
    }
    compY(y){
        originY = myCanvas.height/2;
        mag = 20;
        return(originY - mag*y);
    }
}

xy = new Coordinates();
function drawGraph(ctx, a, b){
//make lines that trace coordinates of the function in an interval
    var n = 50;
    var dx  = (b-a)/n;
    for(x=a; x<=b; x+=dx){
    var pointAx=x;
    var pointAy=f(x);
    var pointBx=x+dx;
    var pointBy=f(x+dx);
    console.log(`[${pointAx}, ${pointAy}],[${pointBx}, ${pointBy}]`)


    ctx.moveTo(xy.compX(pointAx), xy.compY(pointAy)); //this is where the error occurs
    ctx.lineTo(xy.compX(pointBx), xy.compY(pointBy));
    ctx.stroke();
    ctx.strokeStyle = "#0000ff"
    ctx.lineWidth = 1;
    } 
}

function drawAxis(ctx, axisLength){
    ctx.strokeStyle = "#000000";
    ctx.moveTo(xy.compX(0), xy.compY(axisLength));
    ctx.lineTo(xy.compX(0), xy.compY(-axisLength));
    ctx.moveTo(xy.compX(axisLength), xy.compY(0));
    ctx.lineTo(xy.compX(-axisLength), xy.compY(0));
    ctx.stroke();
    ctx.lineWidth = 1;
}

</script>

I am getting the error ReferenceError: xy is not defined I was expecting a graph to be plotted but nothing got displayed please also tell how i can make the code better(neat)

`drawGraph` is called before `xy` is defined, but `drawGraph` uses `xy`. — Sebastian Simon, Oct 05 '19 at 19:41
Please use `var xy = new Coordinates();` instead of just `xy = ...`. Then in the class, use the `constructor` method, not the `Coordinates(){}`. — Dragos Strugar, Oct 05 '19 at 19:44
@DragosStrugar I did that but it's still giving error `TypeError: xy is undefined` at the same line — Manik, Oct 05 '19 at 19:50
@DragosStrugar This will just make `xy` undefined when `drawGraph` is called. The variable needs to be declared and defined _before_ `drawGraph` is called. — Sebastian Simon, Oct 05 '19 at 19:51
@SebastianSimon I got it thanks but it's still giving error `ReferenceError: assignment to undeclared variable originX` — Manik, Oct 05 '19 at 19:53
@SebastianSimon yes I know but overall not declaring variables in JS is bad practise and should be avoided. My answer encapsulates your notes, and I added several tips/things to avoid. — Dragos Strugar, Oct 05 '19 at 19:57
@DragosStrugar Yes, but just declaring isn’t enough. The declarations and calls needed to be moved as well. — Sebastian Simon, Oct 05 '19 at 20:02
@Manik `const`. If you can’t use `const`, `let`. If you [can’t use `let`](https://stackoverflow.com/a/42704874/4642212), `var`. — Sebastian Simon, Oct 05 '19 at 20:03

score 2 · Accepted Answer · answered Oct 05 '19 at 19:54

Several things are wrong here, here is the better version of the code:

var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");

class Coordinates {
    compX(x) {
        var originX = myCanvas.width / 2;
        var mag = 20;
        return originX + mag * x;
    }
    compY(y) {
        var originY = myCanvas.height / 2;
        var mag = 20;
        return originY - mag * y;
    }
}

var xy = new Coordinates();

drawGraph(ctx, -10, 10);
drawAxis(ctx, 10);

function f(x) {
    return x * x;
}

function drawGraph(ctx, a, b) {
    //make lines that trace coordinates of the function in an interval
    var n = 50;
    var dx = (b - a) / n;
    for (x = a; x <= b; x += dx) {
        var pointAx = x;
        var pointAy = f(x);
        var pointBx = x + dx;
        var pointBy = f(x + dx);
        console.log(`[${pointAx}, ${pointAy}],[${pointBx}, ${pointBy}]`);

        ctx.moveTo(xy.compX(pointAx), xy.compY(pointAy)); //this is where the error occurs
        ctx.lineTo(xy.compX(pointBx), xy.compY(pointBy));
        ctx.stroke();
        ctx.strokeStyle = "#0000ff";
        ctx.lineWidth = 1;
    }
}

function drawAxis(ctx, axisLength) {
    ctx.strokeStyle = "#000000";
    ctx.moveTo(xy.compX(0), xy.compY(axisLength));
    ctx.lineTo(xy.compX(0), xy.compY(-axisLength));
    ctx.moveTo(xy.compX(axisLength), xy.compY(0));
    ctx.lineTo(xy.compX(-axisLength), xy.compY(0));
    ctx.stroke();
    ctx.lineWidth = 1;
}

First, get used to writing var/let/const before variable assignment. That was causing your some of the erros you've had. Second, as several people mentioned in the comments, you were getting the error because the function drawGraph() called xy before xy got assigned. Moving xy higher in the definition should solve your problem of xy unassigned.

Then, do not use empty constructor like you did. If you have something in the constructor, define it as constructor() and not className().

can i somehow declare `originX` , `originY` and `mag` outside the function? — Manik, Oct 05 '19 at 20:01
yes, add it to the global scope (before `class` declaration) — Dragos Strugar, Oct 05 '19 at 20:04

how to use a class's method in another function outside the class?

1 Answers1