6

I'm fairly new to JS classes, and am doing mostly back-end work.

I was playing around with the new JS classes and so I started going through the examples here: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Classes

I went to the chrome (chromium) developer tools console and I wrote the Polygon class:

class Polygon {
  constructor(height, width) {
    this.height = height;
    this.width = width;
  }
}

Then I wanted to redefine the class, according to the example containing the methods, so I wrote:

class Polygon {
  constructor(height, width) {
    this.height = height;
    this.width = width;
  }

  get area() {
    return this.calcArea();
  }

  calcArea() {
    return this.height * this.width;
  }
}

This raises an error: Uncaught SyntaxError: Identifier 'Polygon' has already been declared(…)

Now I understand there's a new scoping in ES6, and that classes automatically use the new scoping and so on... but really, how do I redefine my class? :D

I'm writing Python usually, so I'm used being able to redefine everything I want.

13
  • So when you wrote that second part, you got an error? Nov 7, 2016 at 17:29
  • I'm not following. Are you trying to have two classes named Polygon but one defined with a third property and method? Nov 7, 2016 at 17:29
  • I'm trying to do something like this: var Polygon = <my class>; Polygon = <redefine the class>. I'm trying to redefine the class, which means I want to forget the old definition, and use the new one. Nov 7, 2016 at 17:30
  • 1
    You should be able to do Polygon = class { ... } to reassign the class. Nov 7, 2016 at 17:34
  • 2
    Correct. class Foo {} is exactly like let Foo = class Foo {}; so you can reassign Foo if you want, but you can't do a second declaration because you can't let-declare the same thing twice. Nov 7, 2016 at 17:40

4 Answers 4

12

None of the answers provide a solution without changing original code... So here is refined solution.

If in code you have something like this:

class Polygon {
  constructor(height, width) {
    this.height = height;
    this.width = width;
  }
}

Then this means you've created a let variable named Polygon. You cannot redeclare Polygon, but you can reassign it.

So if you need to experiment in e.g. JS console just do:

Polygon = class {
  //... new stuff here
}

This will replace the original class but will not violate let restrictions.

You can try this out by pasting above code in the console, and then try new Polygon(1,2).

6

Block scope declarations (let, const, class) cannot be redeclared.

Class expression and var can be used to re-use and re-declare variables in console:

var Polygon = class Polygon  { ... };
new Polygon();
var Polygon = class Polygon  { ... };
new Polygon();
2
  • My problem is that I have already used a class declaration.... So after doing that, I can simply reuse the variable name, but not use the name in another declaration. That means class Polygon{}; ... Polygon = (class Polygon {}) works. Nov 7, 2016 at 17:41
  • Just reload window and use var every time when pollution of console scope may be undesirable. Nov 7, 2016 at 17:47
2

I'm on Version 54.0.2840.71 (64-bit) of Chrome, and although I can open up the console and declare a new class, I can't redefine a class (you'll get the error: VM272:1 Uncaught SyntaxError: Identifier 'Thing' has already been declared, since I tried to redefine my class Thing).

If you simply want to add methods onto the class later, you can add them to the class's prototype:

Polygon.prototype.area = function() {
  // do some stuff
}

In that case, however, it won't be a getter method like in your example.

Edit

To get around the syntax error, if you just reassign a class as a variable, it should do what you want:

// in your original code

var Polygon = class{}

// in the console

var Polygon = class {
  // with new stuff
}
11
  • I want real methods.... I want to just forget the old definition, and have a new one. Nov 7, 2016 at 17:33
  • 1
    @vlad-ardelean they are "real" methods. A class uses JavaScript prototypes under the hood.
    – Josh Beam
    Nov 7, 2016 at 17:34
  • @vlad-ardelean see my edit, you should just be able to use variable re-assignment to accomplish what you want
    – Josh Beam
    Nov 7, 2016 at 17:35
  • @Iwrestledabearonce. yes I just opened up my Chrome console and tried it and it works fine (note that my answer specifically mentions Chrome as the browser I'm using, and I haven't tried it on ff)
    – Josh Beam
    Nov 7, 2016 at 17:37
  • 1
    @vlad-ardelean - I disagree. I do full stack and work with a handful of languages and JS is by far the most syntactically flexible. There are dozens of ways to build classes and similar constructs, the one you happen to be using (which is still pretty new and very poorly supported) doesn't have that functionality. there are several other ways that do. Nov 8, 2016 at 13:33
-2

Nice,

So now all of my class files begin like this:

if(typeof(someClass)== undefined){
  class someClass{}
}
someClass= class{
  constructor(){
    console.log(typeof(someClass));
  }
}
const newobject= new someClass();

Blockquote

1
  • Please add how exactly this solves the problem. Dec 5, 2022 at 10:09

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.