Best way of checking method availability in JavaScript

Question

When I want to use some relatively new method in JavaScript, let's say history.pushState, I should check if it is really available before I call it. I found out people are using lot of different methods to check method availability and I used to use my own simple way, which worked for me in every case. Anyway I am still not sure, if my method is completely corrent and widely compatible, because excesive usage of less comfortable way made me think, what is the real reason why people use this instead of simple way.

So I expect answer saying my method is also completely OK, or explaining, in which scenarious my method can fail and so it is not good to use it.

I am using this way:

history.pushState && history.pushState('?attr');

Simply because of early rejection of condition, if pushState is not exists, it will not be called. It works in all ways I tried and without any warning.

Other, less comfortable ways, I found people are using (in IF):

typeof(history.pushState) == 'function'
typeof history.pushState !== 'undefined'
"pushState" in history
typeof(history.pushState) === typeof(Function)

My opinion

In my opinion, in JavaScript is completely fine to check availability of variable or name my if (anythingUndefined) {}. Of course it can be false negative when variable has 0, false, null etc, but that is not the point of my question, since testing method or object this way always equals to true.

`typeof(Function)` is meaningless, since, even if `Function` is a function, so is `Array`, but you wouldn’t check for arrays with `typeof(Array)`. — Sebastian Simon, Jun 24 '17 at 00:51
Possible duplicate of [How to tell if a Javascript function is defined](https://stackoverflow.com/questions/85815/how-to-tell-if-a-javascript-function-is-defined) — Sebastian Simon, Jun 24 '17 at 00:54

cyr_x · Accepted Answer · 2017-06-24T01:00:57.893

It's totally fine to use the "simple" way you descriped to check if a function exists before calling it, the reason why people choose other ways is mostly because they're more readable for non javascript "experts" and if you're using tools like jslint with a coding style config, it would throw you a warning when you're using x && x() because it's just a bad coding style for some people or a company which has a "coding style contract" which every developer has to apply.

P.s my favorite ways are:

 if(typeof history.pushState === 'function') {
     history.pushState('?attr');
 }

 // or if you don't like that much strings inside your code
 if(typeof history.pushState === typeof Function) {
     history.pushState('?attr');
 }

score 0 · Answer 2 · answered Jun 24 '17 at 00:58

If you take a look at this answer it explains most of what you're looking for. The in keyword checks if the object has the property regardless of if it's ever been set. If you look at some of the modern JavaScript technology tutorials, that seems to be the preferred way. For example, here is Google's tutorial on Service Workers which uses this syntax for checking.

score 0 · Answer 3 · answered Jun 24 '17 at 01:09

your method would fail ...

if someone (some code you use) overwrites history.pushState with a truthy value that is not a function
or if someone overwrites history
or if you have a variable named history defined, that doesn't refer to the global history-object

If you can exclude these sources of error, your method works fine.

But if you have to use pushState() in more than one place, save the method to some variable and check out the concept of null-objects.

var pushState = history && typeof history.pushState === "function"?
    history.pushState.bind(history):
    function(){};

and use it as

pushState('?attr');

wether history.pushState() exists or not

Best way of checking method availability in JavaScript

3 Answers3