ES7 Classes: Declaring Properties Outside of Constructor

Question

Is there any difference between declaring variables inside the constructor vs. outside?

For functions, 'this' is bound differently, but for variables, I cannot figure out if there is a difference.

class Widget {
    constructor(constructorName) {
    this.constructorName = constructorName;
  }
  nonConstructorName = "nonConstructorName1";
}



var myWidget = new Widget("myConstructorName1");

console.log(myWidget.constructorName); // "myConstructorName1"
console.log(myWidget.nonConstructorName); // "nonConstructorName1"

myWidget.constructorName = "myConstructorName2";
myWidget.nonConstructorName = "nonConstructorName2";

console.log(myWidget.constructorName); // "myConstructorName2"
console.log(myWidget.nonConstructorName); // "nonConstructorName2"

console.log(myWidget.prototype.constructorName); // "undefined"
console.log(myWidget.prototype.nonConstructorName); // "undefined"

console.log(myWidget.__proto__.constructorName); // "undefined"
console.log(myWidget.__proto__.nonConstructorName); // "undefined"

var myNewWidget = new Widget("myConstructorName3");

console.log(myNewWidget.nonConstructorName); // "nonConstructorName1"

Answer 1

Answer in comments by @merianos-nikos...

"The approach here is to use the scope of the constructor function, which is private, to store private data. For methods to have access to this private data they must be created within the constructor as well, meaning you're recreating them with every instance. This is a performance and memory penalty, but some believe the penalty is acceptable."

Private properties in JavaScript ES6 classes