Amit Chauhan
Amit Chauhan

Reputation: 93

variable and function declaration in classes in ES6

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 !.

Upvotes: 9

Views: 9467

Answers (3)

Jonas Wilms
Jonas Wilms

Reputation: 138567

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.

Upvotes: 12

codejockie
codejockie

Reputation: 10912

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`

Upvotes: 3

Ahmed Bassell
Ahmed Bassell

Reputation: 46

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

Upvotes: 2

Related Questions