JavaScript Constructor usage

Question

I am using the below line of code for one of the requirement -

class App {
  constructor(){
    this.obj = { val1: null, val2: '' };
  }  

}

And changed the above code to something below:

class App {
  obj = { val1: null, val2: '' };
}

I could not see any difference between the above two code for the functionality aspects and both code snippets work the same way. I tried the same in the babeljs playground with preset "stage-3" and they are producing the same results.

Can you please let me know if any other differences between the above code and issues using one over the other?

Answer 1

They are not the same. In the first code, you're assigning to a standalone variable named obj. (Hopefully you defined it beforehand, eg let obj;, otherwise an error will be thrown; constructors always run in strict mode)

let obj;
class App {
  constructor(){
    obj = { val1: null, val2: '' };
  }  
}
const app = new App();
console.log(obj);
console.log(app.obj);

class App {
  constructor(){
    obj = { val1: null, val2: '' };
  }  
}
const app = new App();
console.log(app.obj);

class App {
  obj = { val1: null, val2: '' };
}
const app = new App();
console.log(app.obj);

In the second code, you're assigning an obj property to the instance at the beginning of the constructor. The second code is equivalent to:

class App {
  constructor(){
    this.obj = { val1: null, val2: '' };
  }  
}

Browser compatibility is also a concern. Class field syntax (which is what your second code is using) is very new; if you want to use it and have anything other than very recent browsers be able to understand the code, make sure to use Babel before serving it to clients.

Answer 2

Assuming the lack of this. to be a typo, which I'm inclined to believe it is in order to take this question seriously, there aren't any functional differences but code comprehension is easier with the latter. As the MDN documentation points out,

By declaring fields up-front, class definitions become more self-documenting, and the fields are always present.

Programmers can see at a glance what the class variables are without having to refer into and read through the constructor. It also gives a "default" value to the field.

It also prevents errors that could happen due to misodering of initialization within the constructor. It's a best practice to use "Public field declarations".

class A {

  constructor() {
    this.obj.foo <--- // error
    this.obj = { foo: 1 }
  }
}

class A {
  obj = { foo: 1 } // <-- self-documenting

  constructor() {
    this.obj.foo   // <-- no error
  }
}