GAME_WIDTH, GAME_HEIGHT and gameWidth, gameHeight

I am learning how to make games with Vanilla JS. The instructor is using GAME_WIDTH, GAME_HEIGHT at the index.js; and gameWidth, gameHeight at the paddle.js. When he uses the latter, I see that there is an explanation pop-up near the latter one saying that it is considered GAME_WIDTH, GAME_HEIGHT when he hovers over gameWidth, gameHeight.

But when I try to hover over gameWidth, gameHeight; it says any. Could anyone explain the difference?

By the way the instructor uses Sandbox, I am using VS Code if that has anything to do with it.

index.js

import Paddle from './paddle.js';

let canvas = document.getElementById('gameScreen');
let ctx = canvas.getContext('2d');

const GAME_WIDTH = 800;
const GAME_HEIGHT = 600;

let paddle = new Paddle(GAME_WIDTH, GAME_HEIGHT);

paddle.js

export default class Paddle {
  constructor(gameWidth, gameHeight) {
    this.gameWidth = gameWidth;
    this.width = 150;
    this.height = 20;

    this.maxSpeed = 7;
    this.speed = 0;

    this.position = {
      x: gameWidth - 100 - this.width - 100,
      y: gameHeight - this.height - 10,
    };
  }

Answer

the capitalized constants (GAME_WIDTH) are the actual data containers that exist in the global scope. the camel-case variables are function arguments and only live within the function’s lifetime.

the script first sets the constants as default. Then later it uses them to initiate the Paddle’s constructor. But he could send any number to that constructor really. As such there’s no relation between the constants and the variables outside this one usage (afaics)

edit: the relation between them in your instructors editor is most likely a feature of said editor.