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
– Danny Mcwaves, Commented Dec 24, 2017 at 11:27
because it's need to be declared as an instance property not a variable — Niladri
– Niladri, Commented Dec 24, 2017 at 11:28
@AmitChauhan if it's instance property you need to use this.gender to access it — Niladri
– Niladri, Commented Dec 24, 2017 at 11:30

Jonas Wilms · Accepted Answer · 2017-12-24 12:08:29Z

13

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.

answered Dec 24, 2017 at 12:08

Jonas Wilms

139k20 gold badges164 silver badges164 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Niladri Over a year ago

very nice explanation , this should be the accepted answer .

Amit Chauhan Over a year ago

This one clear my all doubts about properties and variables thanks you so much

codejockie · Accepted Answer · 2017-12-24 11:46:44Z

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`

Ahmed Bassell · Accepted Answer · 2017-12-24 11:44:44Z

2

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

answered Dec 24, 2017 at 11:44

Ahmed Bassell

465 bronze badges

Collectives™ on Stack Overflow

variable and function declaration in classes in ES6

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related