const - JS | lectureJavaScript OOP

In this quick and short lecture, we will learn about static methods in JavaScript. And a good example to understand what a static method actually is, is the built-in Array.from method.

Remember that the Array.from method converts any array-like structure into a real array. For example, let's assume we have the below html code:

<p>Mango</p>
<p>Apple</p>
<p>Orange</p>

Now if we want to convert this into an array, we can use the Array.from method:

const elements = document.querySelectorAll('p');
const arr = Array.from(elements);
console.log(arr);

What I want to show you here is that the from method is a method that is attached to the Array constructor function. Hence, it can't be used on an array.

['Mango', 'Apple', 'Orange'].from(); // Uncaught TypeError: ["Mango","Apple","Orange"].from is not a function

We get this error because, again, the from method is really attached to the Array constructor function and not to the prototype property of the constructor function. Hence, all the arrays do not inherit this method.

We also say that the from method is in the Array namespace, just like the parseInt method we saw in one of the previous lectures, which is in the Number namespace.

Static methods are usually used, like helper methods that should be related to a certain constructor. Let's now implement our own static method for both the constructor function and the class.

Let's consider our Person constructor function:

const Person = function (firstName, lastName, birthYear, profession) {
  this.firstName = firstName;
  //...
};

Now, if we want to add a static method to this constructor, we can do it like this:

Person.sleep = function () {
  console.log('I am sleeping 😴');
};

And so now in order to call this method, it's pretty easy:

Person.sleep(); // I am sleeping 😴

And as I mentionned earlier, this method is not inherited by the instances of the Person constructor. So if we try to call it on an instance, we get an error:

const harris = new Person('Harris', 'Willie', 1995, 'Web Developer');
harris.sleep(); // Uncaught TypeError: harris.sleep is not a function

If we take a look at the value of the this keyword in the sleep method, we will see that it is the Person constructor function:

Person.sleep = function () {
  console.log(this);  console.log('I am sleeping 😴');
};

And the reason for that is that the Person constructor is the object calling the method. And so, as always, that is the rule 🪄. So, whatever object is calling the method will be the value of the this keyword in that method.

To finish, let's also implement the same thing using a class:

class Person {
  constructor(firstName, lastName, birthYear, profession) {
    this.firstName = firstName;
    //...
  }
}

To add a static method to a class, all we have to do is to add the static keyword before the method name:

class Person {
  constructor(firstName, lastName, birthYear, profession) {
    this.firstName = firstName;
    //...
  }

  // ⚠️ Instance methods ⚠️
  calculateAge() {
    console.log(2024 - this.birthYear);
  }

  // ⚠️ Static methods ⚠️
  static sleep() {    console.log(this);    console.log('I am sleeping 😴');  }}

Now, to call this method, just like before, we can do it like this:

Person.sleep(); // I am sleeping 😴