Javascript switch statement does not work

Question

This code works perfectly. But if I uncomment the switch statement, it fails completely. The switch statement seems to be correct. Any help will be greatly appreciated.

function draw(n) {

  let canvas = document.querySelector('#my-canvas');
  let context = canvas.getContext('2d');
  context.fillStyle = 'black'

  let contourInterval = 1500
  let contourWidth = 500
  let fsize = 1000
  let x0 = fsize / 2
  let y0 = fsize / 2

  for (j = 0, y = -y0; j < fsize; j++, y++) {
    for (i = 0, x = -x0; i < fsize; i++, x++) {
      /*    
        switch(n) {
          case 0:
            let fun = (x*x + y*y)
            break;
          case 1:
            let fun = (x*x - y*y)                       
            break;
          case 2:
            let fun = 1.0/(x*x + y*y)
            break;
          default:
            let fun = (x*x + y*y)
        }
      */

      let fun = (x * x + y * y)
      if (Math.abs(fun % contourInterval) < contourWidth) {
        context.fillRect(x + x0 / 2, y + y0 / 2, 1, 1)
      }
    }
  }
}

draw(1)

<canvas id="my-canvas" width="500" height="500"></canvas>

Answer 1

The problem is that you're declaring the fun variable inside the switch statement and then trying to use it outside later.

Try updating your code to the following:

function draw(n) {

  let canvas = document.querySelector('#my-canvas');
  let context = canvas.getContext('2d');
  context.fillStyle = 'black'

  let contourInterval = 1500
  let contourWidth = 500
  let fsize = 1000
  let x0 = fsize / 2
  let y0 = fsize / 2

  for (j = 0, y = -y0; j < fsize; j++, y++) {
    for (i = 0, x = -x0; i < fsize; i++, x++) {
      let fun = 0 // declare this here outside the scope of the switch statement

      switch(n) {
        case 0:
          // remember to get rid of the `let` keywords in your `case` statments
          fun = (x*x + y*y)
          break;
        case 1:
          fun = (x*x - y*y)                       
          break;
        case 2:
          fun = 1.0/(x*x + y*y)
          break;
        default:
          fun = (x*x + y*y)
      }

      // now `fun` can be used here without scope problems
      if (Math.abs(fun % contourInterval) < contourWidth) {
        context.fillRect(x + x0 / 2, y + y0 / 2, 1, 1)
      }
    }
  }
}

draw(1)

<canvas id="my-canvas" width="500" height="500"></canvas>

This way you declare the variable in the outer scope and use the switch statement to set it. Now it can be used in the outer scope.

Answer 2

Declare fun first

function draw(n) {

  let canvas = document.querySelector('#my-canvas');
  let context = canvas.getContext('2d');
  context.fillStyle = 'black'

  let contourInterval = 1500
  let contourWidth = 500
  let fsize = 1000
  let x0 = fsize / 2
  let y0 = fsize / 2

  for (j = 0, y = -y0; j < fsize; j++, y++) {
    for (i = 0, x = -x0; i < fsize; i++, x++) {
        let fun = 0
        
        switch(n) {
          case 0:
            fun = (x*x + y*y)
            break;
          case 1:
            fun = (x*x - y*y)                       
            break;
          case 2:
            fun = 1.0/(x*x + y*y)
            break;
          default:
            fun = (x*x + y*y)
        }
      if (Math.abs(fun % contourInterval) < contourWidth) {
        context.fillRect(x + x0 / 2, y + y0 / 2, 1, 1)
      }
    }
  }
}

draw(1)

<canvas id="my-canvas" width="500" height="500"></canvas>