Test for undefined function in Javascript

Question

So Safari keeps yelling at me for one specific error.

I'm trying to use Google Maps API and call map.getCenter();. However sometimes, this happens before the map has been fully loaded.

So instead in my function I test for an undefined call like this:

if (map.getCenter() != undefined)

But that still errors out because I guess it doesn't even like making the call just to test the if the result is undefined or not?

Can I get some help here?

Thanks!

Answer 1

I actually prefer something along these lines.

if(typeof myfunc == 'function') { 
 myfunc(); 
}

Just because something isn't undefined doesn't make it a function.

• Henrik: Except that in this case I guess that you want to define a function if it doesn't exist if(typeof myfunc !== 'function') { myfunc(); }
• Rohan Kumar: @Henrik Your comment code should look like, if(typeof myfunc !== 'function') { myfunc = function(){.....}; }

Answer 2

if (typeof map !== 'undefined' && map.getCenter) {
 // code for both map and map.getCenter exists
} else {
 // if they dont exist
}

This is the right way to check for existence of a function.. Calling the function to test its existence will result in an error.

UPDATE: Snippet updated.

• Andy E: If you're not going to be type-strict (!==), you may as well just write if (!map.getCenter).
• slandau: I will give this a shot when I get home. Thanks so much!
• dragonroot: Nope. Gives me 'ReferenceError: map is not defined' when I run your example in smjs console.
• m2j: could you please tell me, why my condition work without single quote at the undefined
• SBoss: Note to future seekers: if(typeof FooFunc === 'undefined') { function FooFunc(){} } will not define the function in Safari.

Answer 3

Technically you should be testing if map is undefined, not map.getCenter(). You can't call a function on an undefined reference.

However, Google's own tutorial suggests that you invoke your JavaScript that accesses the API in a body.onload handler, so that you do not attempt to reference anything until all of the remote .js files are loaded - are you doing this? This would solve the problem permanently, rather than failing cleanly when your JavaScript executes prior to loading the API.

Answer 4

if (typeof map.getCenter !== 'undefined')

Won't throw an error.

So, better yet, if (typeof map.getCenter === 'function') map.getCenter();

Answer 5

I have been in the habit recently of using the typeof operator to test for things and types. It returns the type as a string which I think avoids some response type confusion.

if( typeof map.getCenter != 'undefined') ...

I'm not sure if it's more correct, but I find good results with this process.

Answer 6

There is now an optional chaining operator that does exactly this.

The optional chaining (?.) operator accesses an object's property or calls a function. If the object accessed or function called using this operator is undefined or null, the expression short circuits and evaluates to undefined instead of throwing an error.

const adventurer = {
 name: 'Alice',
 cat: {
 name: 'Dinah'
 }
};
const dogName = adventurer.dog?.name;
console.log(dogName);
// Expected output: undefined
console.log(adventurer.someNonExistentMethod?.());
// Expected output: undefined

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Optional_chaining

Answer 7

You should be testing whether map is undefined. In your current check your are still trying to execute the function call.

Answer 8

Assuming that map.getCenter() is always a function, it's sufficient to just use this check:

if (map.getCenter) {
 var x = map.getCenter();
}

Answer 9

The worked solution for me is try and catch,

const stopPropagation = (e) => {
 try {
 e.stopPropagation();
 } catch (err) {
 console.log("error with stopPropagation: " + err.error);
 }
}
const triggerClick = (e) => {
 stopPropagation(e);
};