Uncaught ReferenceError: candle1 is not defined at :1:1 (anonymous) @ VM12033:1

Question

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.

Because the `console.log(candle1);` is in the same scope (module's scope). — Ergis, Apr 07 '22 at 16:23
Does this answer your question? [ES6 module scope](https://stackoverflow.com/questions/30287977/es6-module-scope) — Niklas E., Apr 07 '22 at 16:24

Ergis · Answer 1 · 2022-04-07T17:16:13.903

-1

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;

edited Apr 07 '22 at 17:16

answered Apr 07 '22 at 16:22

Ergis

1,105
1
7
18

Why am I able to console.log it? Shouldn't the console.log also throw an error? – potstickerNut Apr 07 '22 at 16:24
1

Please do not answer common and frequently asked questions. Instead of linking or quoting a duplicate answer, just flag it. It helps our system to stay clean. Flags on Stack Overflow are not meant to punish people, they are educational and will not subtract reputation from them (except spam flags or abusive flags). If you still wanna answer to gain some reputation, do it, but keep in mind: Authors will probably delete their answer with many down votes to get their reputation back and that will also apply to you too, but negatively. You encourage people to not research their problems themselves – Niklas E. Apr 07 '22 at 16:27
1

@NiklasE. This is a DIRECT answer to the question in topic !! It is not an answer to "what is module scope". It's an answer to "why the error" !! – Ergis Apr 07 '22 at 16:27
1

@Ergis But it's the exact same (induced) problem with the exact same solution as [this answer shows](https://stackoverflow.com/a/58594093/7638119). – Niklas E. Apr 07 '22 at 16:28

Niklas E. · Accepted Answer · 2022-04-07T16:48:41.057

-1

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.

edited Apr 07 '22 at 16:48

answered Apr 07 '22 at 16:30

Niklas E.

1,848
4
13
25

So, even though candle1 was declared in script.js, it's not globally scoped because it is importing from a class in Candle.js. Am I understanding this right? – potstickerNut Apr 07 '22 at 16:38
@potstickerNut Yes. The variable is declared inside the module and therefore is only accessable there. This is different from scripts that are not embedded with `type="module"`. Variables of regular/old (non-module) scripts' are globally accessible. This confuses many people (me once as well). Your not alone – Niklas E. Apr 07 '22 at 16:42
This is why I am able to console.log it, but cannot type it directly into the console? I apologize if my questions are basic, but I am still in the early stages of learning. – potstickerNut Apr 07 '22 at 16:47
@potstickerNut No need to apologize. Some friendly advice, since you're new here: It's okay to ask seemingly silly questions on StackOverflow (tho this is controversial). The things that are mainly important here are: 1. Make it clear that you tried to help yourself and asking is your last resort. 2. Narrow the problem down as good as you can and don't just dump your code and error here. 3. Strictly adhere to the ["How do I ask?" Guide](https://stackoverflow.com/help/how-to-ask). – Niklas E. Apr 07 '22 at 17:01

Uncaught ReferenceError: candle1 is not defined at :1:1 (anonymous) @ VM12033:1

2 Answers2