0

My code is as follows:

class Rectangle {
  constructor(height, length) {
    this.height = height;
    this.length = length;
  }
  area() {
    return this.height * this.length;
  }
}

const square = new Rectangle(10, 10);

console.log(square);
console.log(square.area());

However, my console is showing the following:

Screenshot of console overview.

I'm trying to understand a few things.

  1. Why is the console saying square is undefined?
  2. Why doesn't the console denote the class of square in the log, demoting it to a generic Object rather than a Rectangle?
  3. What processes can I adopt in my workflow to help me answer these questions before asking Stack Overflow?

I've checked my Firefox version and reviewed this on Safari as well, and the problem is the same. Initially, I was using a separate .js file to define a more complicated class, but after more and more simplification, I realized that even this basic case isn't working for me.

I've also noticed that other posts are about the reverse problem: something showing up in console but not in code.

jonrsharpe
  • 115,751
  • 26
  • 228
  • 437
cbitt
  • 11
  • 1
  • 3
  • Your code is working just fine, no problems. regex_list must be for other code as it isn't used in the code provided. And the favicon.ico just means there isn't a favicon.ico file, it isn't a problem. – imvain2 Apr 27 '23 at 22:15
  • 3
    Presumably you're not actually _running_ that code in the console, i.e. the `const` is defined in a scope _other than_ the one that's being evaluated when you then type `square` in the console. This is the expected behaviour, `let`/`const` are scoped, not global like `var` - see e.g. https://stackoverflow.com/q/762011/3001761. – jonrsharpe Apr 27 '23 at 22:16
  • I can't reproduce the error with given code sample, only thing i can think of square is being called somewhere else not shown in the given sample – Nonik Apr 27 '23 at 22:19
  • For those not understanding the issue. The code in the snippet runs probably in a script as part of a (localhost) website. Then OP types `square` in the JavaScript developer tools console and gets the `ReferenceError`. – 3limin4t0r Apr 27 '23 at 22:21
  • @3limin4tor is correct – Jon Sharpe notes that I'm not running code in the console, but the HTML I'm looking at is associated with a script housing only the above block of code. I'm able to get regular objects without this error – it only comes up when I introduce classes. – cbitt Apr 27 '23 at 22:29
  • I'm also still concerned about the class of `square` in the console log. – cbitt Apr 27 '23 at 22:37
  • 1
    @cbitt How are you including the code in your html? Is a script or a module? – Bergi Apr 27 '23 at 23:23
  • @cbitt Can you share the "working" code (without classes) for comparison? Please [edit] your question to include this info – Bergi Apr 27 '23 at 23:24
  • @jonrsharpe top-level `let` and `const` declarations in a script do introduce global variables just fine, which should be accessible from the console as well. It's only that they do not create properties of the global object, and of course in block scopes they behave differently. – Bergi Apr 27 '23 at 23:26
  • @Bergi I've been using "module". Tried "script" and saw no difference. The working code is just setting a const and returning that – it worked before, but even now I'm seeing "Uncaught ReferenceError: 'example' is not defined" – cbitt Apr 27 '23 at 23:46
  • 1
    If you mean ` – Bergi Apr 27 '23 at 23:49
  • *I'm also still concerned about the class of `square` in the console log.* - you're running it in [Firefox](https://bugzilla.mozilla.org/show_bug.cgi?id=1526688), that's why. In Chrome/Edge you'd see `> Rectangle` (but would not see the fields without "opening" it). But Firefox still correctly lists `area()` and the constructor, so nothing is really lost. – tevemadar May 08 '23 at 12:33

0 Answers0