Properties and Methods in JavaScript

Back to: ReactJS Tutorials

Properties and Methods in JavaScript:

In this article, I am going to discuss Properties and Methods in JavaScript with Examples. Please read our previous article where we discussed Classes in JavaScript.

Properties and Methods in JavaScript:

Now the next-generation JavaScript also offers a different syntax for initializing properties and methods.

You already learned that properties are like variables that you attach to classes and objects, and methods are like functions that are attached to classes and objects.

You already learn about this syntax where we set up properties in the constructor function. Now there is a more modern syntax that spares us from using this constructor function. With next-generation JavaScript as we will use in our upcoming articles,

You can assign a property directly inside your class i.e. myProperty = ‘value’. So, you can skip the constructor function call. Behind the scenes, this will still be transformed to use constructor functions. But you’ll have an easier time writing this. For methods, it’s pretty similar.

This is the old way.

Now the next-generation JavaScript way is to use the syntax from the left where you set up a property and simply think of a method as a property that stores a function as a value and then you end up with that. So myMethod = () => {…}. The great advantage of this syntax is that you use an arrow function as a property value here. you have got no problems with the ‘this’ keyword and that’s the exact reason why we will use this syntax here. Let us show you the syntaxes in the JSBIN editor.

class Human{
  constructor(){
    this.gender = 'male';
  }
  
  printGender(){
    console.log(this.gender);
  }
}

class Person extends Human{
  constructor(){
    super();
    this.gender = 'female';
    this.name = 'John';
  }
  
  printMyName(){
    console.log(this.name);
  }
}

const person = new Person();
person.printMyName();
person.printGender();

Back to the JSBIN, the project that we have already worked on. We have worked with the human and the person class. Now here, we can get rid of the constructor in the human class and get rid of the ‘this’ keyword and just set gender = ‘male’. And printGender can be set as printGender = () => {…}

In the printGender method, this.gender still uses this keyword here when we reach out to the property. Now, we can do the same thing for the person. We no longer need the constructor and we no longer need to call the super method for that reason. Instead, what we do is call this.name without this just name = ‘John’ and gender = ‘female’. For printMyName, we will use the arrow method. Now the code is,

class Human{
  gender = 'male';
  
  printGender = () => {
    console.log(this.gender);
  }
}

class Person extends Human{
  gender = 'female';
  name = 'John';
  
  printMyName = () => {
    console.log(this.name);
  }
}

const person = new Person();
person.printMyName();
person.printGender();

Now if you run this you will get an error because it does not recognize the syntax. You need to do one thing here.

You need to go to the dropdown where it says JavaScript and choose ES6 / Babel here. If you do this and hit run, you will see John and female as output. This is the syntax that is next-generation JavaScript which we will actually use in upcoming articles.

In the next article, I am going to discuss Spread and Rest Operators in JavaScript with Examples. Here, in this article, I try to explain Properties and Methods in JavaScript with Examples. I hope you enjoy this Properties and Methods in JavaScript article.