Uncaught ReferenceError: candle1 is not defined at <anonymous>:1:1 (anonymous) @ VM12033:1-CodePudding

I'm trying to figure out why I am able to console.log candle1, but I cannot type it directly into the console without an error.

Here is the Candle.js code:

class Candle {
  constructor(scent, material, color, numWicks, waxColor) {
    this.scent = scent;
    this.container = {
      material: material,
      color: color,
      numWicks: numWicks,
    };
    this.waxColor = waxColor;
  }
  newNumWicks(numWicks) {
    this.container.numWicks = numWicks;
  }
  newMaterial(material) {
    this.container.material = material;
  }
  newScent(scent) {
    this.scent = scent;
  }
  newColor(color) {
    this.container.color = color;
  }
  newWaxColor(waxColor) {
    this.waxColor = waxColor;
  }
}

export default Candle;

Here is the script.js code:

import Candle from "./Candle.js";

const candle1 = new Candle(
    "Midnight Blue Citrus", 
    "Glass", 
    "Blue", 
    3, 
    "White");

console.log(candle1);

console.log(candle1.container.material);

Here is my index.html:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Practice: Making classes and objects</title>
    <script type="module" src="Candle.js"></script>
    <script type="module" src="Backpack.js"></script>
    <script type="module" src="script.js"></script>
  </head>
  <body></body>
</html>

This is the result of running the code: console.log results

The red error message is me trying to type candle1 directly into the console.

Please ignore the two yellow messages, they are due to a couple of extensions that I use.

CodePudding user response：

This is an issue with ES6 modules and their variables being access limited to the script (CS term: scoping).

You can make the make candle1 accessible everywhere by adding window.candle1 = candle1 to the bottom of the script. window being the global scope in this case.

The window interface is home to a variety of functions, namespaces, objects, and constructors which are not necessarily directly associated with the concept of a user interface window. However, the window interface is a suitable place to include these items that need to be globally available. (...)

See this question for more information about this problem.

CodePudding user response：

You are using modules.

Every module has its own scope. So, the object candle1 is only available inside the module it was declared in, not globally.
Thus, the console.log in the js file works since it's in the same scope, but doesn't work on dev tools because that is the global scope.

ES6 has these kinds of scopes (top to bottom):

Global scope
Module scope
Function scope
Block scope

If you want to access something globally, you can create a global object.
Example: window.candle1 = candle1;