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"

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"

• javascript
• ecmascript-2016

• Is this referencing my scenario? "There is (intentionally) no direct declarative way to define either prototype data properties (other than methods) class properties, or instance property." wiki.ecmascript/… – M. Walker Wells Commented Jan 20, 2016 at 8:30
• 1 I am not sure if you can have properties inside the class definition in the way you are going to define it. Based on this : babeljs.io/docs/learn-es2015/#classes there is no property definition outside the constructor method, as well if you try your ES6 code here : babeljs.io/repl you will see that the ES6 transpiler produces an error for the property defnitition outside the constructor method. – KodeFor.Me Commented Jan 20, 2016 at 8:31
• In case you like to have some private properties outsite the class construction then, maybe it's fine to read this question : goo.gl/qzau3o that has several good answers. – KodeFor.Me Commented Jan 20, 2016 at 8:37
• @merianos-nikos: I'm transpiling with Babel 6, which doesn't throw an error, interestingly enough. – M. Walker Wells Commented Jan 20, 2016 at 8:42
• 1 @merianos-nikos: The Babel REPL hasn't been upgraded to Babel 6 yet. – M. Walker Wells Commented Jan 20, 2016 at 8:48

1 Answer 1

Answer in ments 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