Probablemente haya visto el error undefined en la consola cuando intenta llamar a una función que no ha definido en su código JavaScript. JavaScript arroja este error y deja de ejecutar el código.
En este artículo, te enseñaré cómo comprobar si existe una función. De esta manera, puede evitar posibles errores. Esta es una técnica útil para ver si una biblioteca o API específica está disponible en el cliente en el que está ejecutando su software.
JavaScript tiene algunas formas diferentes de ver si existe una función. Te mostraré varios.
Usar una declaración condicional «if»
Una forma de verificar si una función está definida es probarla con una ifdeclaración. El truco es probar la función como un método del windowobjeto.
Entonces, si desea probar aFunctionName, simplemente use:
| 123 | if (window.aFunctionName) { // ...} |
El código entre paréntesis se ejecutará si la función está definida. Si, en cambio, solo prueba la función sin usar el objeto de la ventana, por ejemplo if(aFunctionName), JavaScript arrojará un ReferenceErorr si la función no existe.
Consideremos el siguiente ejemplo que verifica la existencia de dos funciones; uno que existe mientras que la otra función no existe.
| 010203040506070809101112131415dieciséis1718 | // Testing a function that existsfunction exists() { // ...} if (window.exists) { console.log('the exists() function exists');}else{ console.log('the exists() function does not exist');} if(window.doesntExist) { console.log('the doesntExist() function exists');}else{ console.log('the doesntExist() function does not exist');} |
El fragmento de código anterior generará esto:
| 12 | the exists() function existsthe doesntExist() does not exist |
Esto funcionó muy bien para nuestro ejemplo, pero un problema con ese enfoque es que no estamos comprobando si el objeto nombrado es realmente una función. De hecho, cualquier variable con el mismo nombre engañaría a nuestra prueba para que pensara que la función está definida.
El operador «typeof»
Alternativamente, podemos usar el typeofoperador. Este operador verificará si existe el nombre de la función declarada y si es una función y no algún otro tipo de objeto o primitiva.
| 123 | if (typeof nameOfFunction === 'function') { nameOfFunction();} |
En el ejemplo anterior, probamos si nameOfFunction existe y, si existe, lo ejecutamos.
Usar un bloque «try…catch»
El bloque try…catch maneja los errores que probablemente ocurran dentro de ese bloque. Usaremos este método para manejar el error undefined que esperamos que JavaScript arroje cuando llamamos a una función que no hemos definido.
Cómo funciona la declaración «try…catch»
Ejecutamos la función dentro del bloque try. Si no existe, se lanzará una excepción y será manejada por el bloque catch.
Aquí hay un ejemplo:
| 123456 | try { testFunction();} catch(err) { console.log(err);} |
Si testFunction no está definido, esto generará el siguiente mensaje en la consola.
| 1 | ReferenceError: testFunction is not defined |
Esto es lo que veríamos también sin un bloque try...catch, pero en este caso nuestro código continuará ejecutándose debajo del bloque catch.
Conclusión
Este artículo ha cubierto tres métodos principales para verificar si una función existe en JavaScript antes de que la llamemos. Estos son; el uso de una declaración condicional if, el uso de un operador typeof y, finalmente, la declaración try...catch. También hemos usado ejemplos para explicar cómo JavaScript puede implementar estos métodos para verificar si una función existe o no. ¡Espero que este concepto te quede más claro ahora!.
Fuente: EnvatoTuts+
