JavaScript class property inside vs outside constructor

user_7092900 0
Viewed 3446

I'm struggling to understand the difference between defining a property inside vs outside the constructor. In the below example both properties are accessible on the instance in the same way, what is the difference?

class Foo {
  constructor() {
    this.bar = 1;
  }
  baz = 1;
}
const foo = new Foo();
console.log(foo.bar, foo.baz); // 1 1
es6-class javascript
3 Answers

They do the same thing.

Defining the property outside the constructor is new class field syntax. If you need to support older browsers, either use the constructor method, or use Babel to transpile the code first down to older syntax.

Note that class fields run before the constructor finishes - either right after the super call, if there is one, or at the very beginning of the constructor.

class Foo {
  prop = console.log('Class field running');
  constructor() {
    this.prop2 = console.log('Constructor running');
  }
}
const foo = new Foo();

Related: Private fields (also very new syntax) must be initialized outside of the constructor, so that the class can understand which fields are private at compile time:

class Foo {
  constructor() {
    this.bar = 1;
    // Not OK:
    // this.#foo = 1;
  }
  // OK:
  #baz = 1;
}
const foo = new Foo();

user_95152070

Constructor initialisation allows for using values from the class instantiation, so they may be different for each instance, while properties defined in the class scope are global to all instances.

If you want to initialise a property with values from the instance, you need to do it in the constructor. Normally, if you want an attribute to be general to all instances, you would define it outside of the constructor, but you can also do it inside if you want.

Admin1

Actually, defining this.bar within the constructor is considered dirty code in ES6. You can expand any object by adding a property just the way you did. This is the way how it is done in ES5 and lower.

ES6 is mainly just syntactic sugar, meaning all you class definitions get boiled down to "native" JavaScript code. Behind the scenes, your definition of baz will end up in the transcript exactly the way you defined bar. However, for readability, the syntactic sugar was added in ES6 to define a property in a more class-like fashion.

user_76079700
Related