Why do I need static keyword here

Question

I'm trying to understand class and class methods in JavaScript.

The bellow example, works only if you add the keyword static before isIE() method.

1. Why do I need static keyword?

2. How should I change the function, so that I don't need to use static?

class ieAlert {
  // Method for checking if IE11
  static isIE() {  
    return window.navigator.userAgent.match(/(MSIE|Trident)/);
  }
}
// If the user is using IE11, show the alert
if (ieAlert.isIE()) {
  window.alert("Your browser is outdated!");
}

module.exports = ieAlert;

I read a lot about it, but don't get it. If isIE() is a method of the class ieAlert, why I can't just use ieAlert.isIE() without having to add static keyword to isIE definition? — user1941537, Jul 07 '19 at 15:24
Because `ieAlert` is the class itself, not an instance of that class, you need an instance of the class, `new ieAlert()`, before you can access any non-static methods. So static methods are "global" per class. — XCS, Jul 07 '19 at 15:26
Does it mean that if I first create an instance of the class let's say myIeAlert, I then could call the isIE() method on it like this: myIeAlert.isIE() ? without the need of the static keyword? — user1941537, Jul 07 '19 at 15:27
Yes, that will work, but probably static is prefered to have shorter/cleaner code. Plus it is recommended to make all methods that don't access the `this` keyword static. So if you have a method that doesn't use any of the properties of the current object (eg. no acess to `this.x`), you can have it as a static method. — XCS, Jul 07 '19 at 15:29

MicroRJ · Answer 1 · 2019-07-07T15:46:32.530

The reason why you need a static keyword there is because you're accessing a class or an object's method without instantiating or creating the class.

For example, if the method wasn't static you would say.

//CREATE NEW INSTANCE
let dog = new Dog()
//ACCESS METHOD
dog.bark()

However, with a static keyword you could say.

//ACCESS METHOD WITHOUT        CREATING INSTANCE
 Dog.bark()

Without having to create a NEW instance of the class.

There are pros and cons to both of this methods that you should be aware of.

For example, a static variable only has one sole instance, and therefore its value will be same for every class that has access to it.

So, if you want to have 10 dogs and each of them has a different breed you wouldn't use a static variable.

This is common knowledge, it doesn't matter what programming language you're using. I suggest you find a good JavaScript tutorial.

Patrick Roberts · Answer 2 · 2019-07-07T16:42:40.350

Assuming you never instantiate ieAlert (e.g. new ieAlert() is never used), then you're misusing class. Classes should be used for defining a type that describes the behavior for many objects that function independently and use the same common methods.

The reason static is required is because you're trying to define a function that does not operate from one of these many instantiated objects, but rather from the class itself.

For example, Array.isArray() is a static method of Array. It would not make sense to define isArray() as non-static, because that would require you to already have an instance of Array, and you don't know if what you have is an array yet.

In this case, you just need to define an object with a method:

const ieAlert = {
  // Method for checking if IE11
  isIE () {  
    return /MSIE|Trident/.test(window.navigator.userAgent);
  }
}

// If the user is using IE11, show the alert
if (ieAlert.isIE()) {
  window.alert('Your browser is outdated!');
}

module.exports = ieAlert;

Why do I need static keyword here

2 Answers2

Linked