How to redefine JavaScript classes, in the console?

Question

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?

I'm not following. Are you trying to have two classes named Polygon but one defined with a third property and method? — Stephen Gilboy
– Stephen Gilboy, Commented 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. — vlad-ardelean
– vlad-ardelean, Commented Nov 7, 2016 at 17:30
You should be able to do Polygon = class { ... } to reassign the class. — loganfsmyth
– loganfsmyth, Commented Nov 7, 2016 at 17:34
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. — loganfsmyth
– loganfsmyth, Commented Nov 7, 2016 at 17:40

Nux · Accepted Answer · 2018-07-18 21:23:53Z

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).

answered Jul 18, 2018 at 21:23

Nux

10.2k6 gold badges63 silver badges80 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Estus Flask · Accepted Answer · 2016-11-07 17:38:51Z

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();

answered Nov 7, 2016 at 17:38

Estus Flask

227k79 gold badges478 silver badges621 bronze badges

2 Comments

vlad-ardelean Over a year ago

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.

Estus Flask Over a year ago

Just reload window and use var every time when pollution of console scope may be undesirable.

Josh Beam · Accepted Answer · 2016-11-07 17:35:38Z

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
}

edited Nov 7, 2016 at 17:35

answered Nov 7, 2016 at 17:31

Josh Beam

19.9k5 gold badges48 silver badges69 bronze badges

11 Comments

vlad-ardelean Over a year ago

I want real methods.... I want to just forget the old definition, and have a new one.

Josh Beam Over a year ago

@vlad-ardelean they are "real" methods. A class uses JavaScript prototypes under the hood.

Josh Beam Over a year ago

@vlad-ardelean see my edit, you should just be able to use variable re-assignment to accomplish what you want

Josh Beam Over a year ago

@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)

I wrestled a bear once. Over a year ago

@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.

|

Chris · Accepted Answer · 2022-11-30 06:13:46Z

-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

edited Nov 30, 2022 at 6:13

answered Nov 29, 2022 at 17:51

Chris

273 bronze badges

1 Comment

Ingo Steinke Over a year ago

Please add how exactly this solves the problem.

Collectives™ on Stack Overflow

How to redefine JavaScript classes, in the console?

4 Answers 4

Comments

2 Comments

11 Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

2 Comments

11 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related