How to redefine JavaScript (NOT CSS) classes, in t

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? :D

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

Answer 1

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

Answer 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
}

Answer 3

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