variable and function declaration in classes in ES6

Question

I am learning es6 js and found a way to declare class and use its method.

but one thing is confusing which i want to know.

class myGender {
 var gender = "male";
 printMyGender(){
  console.log(gender);
 }
}

const gender = new myGender();
gender.printMyGender();

In the above code i am getting error why i can't access the gender variable in the same class and other scenario

class myGender {
   constructor(){
   this.gender = "male";
   }
   printMyGender(){
   console.log(this.gender);
   }
 }

  const gender = new myGender();
  gender.printMyGender();

this works as charm !.

in the first code, do not declare a variable. `gender = 'male'` not `var gender = 'male'`. and you can access it using `this.gender` — Danny Mcwaves, Dec 24 '17 at 11:27
because it's need to be declared as an instance property not a variable — Niladri, Dec 24 '17 at 11:28
@AmitChauhan if it's instance property you need to use `this.gender` to access it — Niladri, Dec 24 '17 at 11:30
You can access class variables using this keyword. You can declare variables using var or let keywords. — Pradeep Rajput, Dec 24 '17 at 11:31
check this out @Niladri please correct me if i am wrong in jsbin — Amit Chauhan, Dec 24 '17 at 11:31
The constructor allows you to create an instance of that class, or an object. With that object, you have the property that you instantiated. That's why the second one works I believe. — Dream_Cap, Dec 24 '17 at 11:38
let's just forget constructor , i want to create property whose value is male how can i do it ? without using constructor and then use it in the method — Amit Chauhan, Dec 24 '17 at 11:39
It is simply how the Ecmascript grammar is defined: class element can only be a methodDefinition (eventually preceded with the "static" keyword) https://tc39.github.io/ecma262/#prod-ClassElement. Your question is equivalent to "why english speakers do not understand when I speak spanish) — laurent, Dec 24 '17 at 11:55
@AmitChauhan You can't do it without the constructor. You have to initialize all instance variables in the constructor. There is no such thing as an instance variable in a sense like a statically typed language would have it. — Balázs Édes, Dec 24 '17 at 11:55

score 10 · Accepted Answer · answered Dec 24 '17 at 12:08

In javascript there is a huge difference between variables and properties. Variables get declared using var, let, const, then they you can assign values to them using the assignment operator (=). Variables are part of the current scope (everything between { and }), they are not related to objects. Properties are part of an object. They dont get declared, they exist after a value gets assigned to them until they are deleted. So actually you don't need to initialize them. However, this can lead to some very funny behaviour:

class Counter {
   increase(){
     this.count += 1;
   }
}

const count = new Counter;
count.increase()
console.log(count.count); //NaN

Therefore it is a good practise to initialize them inside of the constructor:

class Counter {
   constructor(){
     this.count = 0;
   }
   increase(){
     this.count += 1;
   }
}

To beautify this and make it more familar for developers from other languages, there is a proposal (it might be a feature in the future) for class properties:

class Counter {

   count = 0;

   increase(){
     this.count += 1;
   }
}

however thats just syntactic sugar for the code above.

very nice explanation , this should be the accepted answer . — Niladri, Dec 24 '17 at 12:13
This one clear my all doubts about properties and variables thanks you so much — Amit Chauhan, Dec 24 '17 at 15:42

score 3 · Answer 2 · answered Dec 24 '17 at 11:46

When using ES6 class, you can't declare a variable using var, let or const but you can define instance variables and static variables.

The basic difference been that instance variables can't be accessed outside the class without creating an instance of that class, and in the case of static variable you simply access by the className.staticVariable.

In your failing code, it should be:

class myGender {
 gender;

 constructor() {
  this.gender = "male"; 
 }

 printMyGender(){
  console.log(this.gender);
 }
}

const gender = new myGender();
gender.printMyGender(); // `male`

For static variables:

class myGender {
 static gender = "female";

 printMyGender(){
  console.log(this.gender);
 }
}

console.log(myGender.gender); // `female`

score 2 · Answer 3 · answered Dec 24 '17 at 11:44

well, in es6 or es2015 you have to define variables inside the constructor function or any other function you create,and you need to use this to access them,

however to declare variables like you did outside functions maybe allowed in up coming ecma script versions or languages like typescript

variable and function declaration in classes in ES6

3 Answers3

Linked