{"id":9112,"date":"2022-03-01T15:27:25","date_gmt":"2022-03-01T15:27:25","guid":{"rendered":"https:\/\/capitalsoftware.com.ni\/?p=9112"},"modified":"2022-03-01T15:27:27","modified_gmt":"2022-03-01T15:27:27","slug":"como-comprobar-si-existe-una-funcion-en-java-script","status":"publish","type":"post","link":"https:\/\/capitalsoftware.com.ni\/?p=9112","title":{"rendered":"C\u00f3mo comprobar si existe una funci\u00f3n en JavaScript"},"content":{"rendered":"\n
\"\"
Funciones JavaScript<\/figcaption><\/figure><\/div>\n\n\n\n

Probablemente haya visto el error\u00a0undefined<\/code> en la consola cuando intenta llamar a una funci\u00f3n que no ha definido en su c\u00f3digo JavaScript.\u00a0JavaScript arroja este error y deja de ejecutar el c\u00f3digo.<\/p>\n\n\n\n

En este art\u00edculo, te ense\u00f1ar\u00e9 c\u00f3mo comprobar si existe una funci\u00f3n. De esta manera, puede evitar posibles errores. Esta es una t\u00e9cnica \u00fatil para ver si una biblioteca o API espec\u00edfica est\u00e1 disponible en el cliente en el que est\u00e1 ejecutando su software.<\/p>\n\n\n\n

JavaScript tiene algunas formas diferentes de ver si existe una funci\u00f3n. Te mostrar\u00e9 varios.<\/p>\n\n\n\n

Usar una\u00a0declaraci\u00f3n condicional \u00abif\u00bb<\/h2>\n\n\n\n

Una forma de verificar si una funci\u00f3n est\u00e1 definida es probarla con una if<\/code>declaraci\u00f3n. El truco es probar la funci\u00f3n como un m\u00e9todo del window<\/code>objeto. <\/p>\n\n\n\n

Entonces, si desea probar aFunctionName<\/code>, simplemente use:<\/p>\n\n\n\n

123<\/td>if<\/code> (window.aFunctionName) {<\/code>    <\/code>\/\/ ...<\/code>}<\/code><\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n

El c\u00f3digo entre par\u00e9ntesis se ejecutar\u00e1 si la funci\u00f3n est\u00e1 definida.\u00a0Si, en cambio, solo prueba la funci\u00f3n sin usar el objeto de la ventana, por ejemplo\u00a0if(aFunctionName)<\/code>, JavaScript arrojar\u00e1 un\u00a0ReferenceErorr<\/code> si la funci\u00f3n no existe.<\/p>\n\n\n\n

Consideremos el siguiente ejemplo que verifica la existencia de dos funciones; uno que existe mientras que la otra funci\u00f3n no existe.<\/p>\n\n\n\n

010203040506070809101112131415diecis\u00e9is1718<\/td>\/\/ Testing a function that exists<\/code>function<\/code> exists() {<\/code>    <\/code>\/\/ ...<\/code>}<\/code> if<\/code> (window.exists) {<\/code>    <\/code>console.log(<\/code>'the exists() function exists'<\/code>);<\/code>}<\/code>else<\/code>{<\/code>    <\/code>console.log(<\/code>'the exists() function does not exist'<\/code>);<\/code>}<\/code> if<\/code>(window.doesntExist) {<\/code>    <\/code>console.log(<\/code>'the doesntExist() function exists'<\/code>);<\/code>}<\/code>else<\/code>{<\/code>    <\/code>console.log(<\/code>'the doesntExist() function does not exist'<\/code>);<\/code>}<\/code><\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n

El fragmento de c\u00f3digo anterior generar\u00e1 esto:<\/p>\n\n\n\n

12<\/td>the exists() function exists<\/code>the doesntExist() does not exist<\/code><\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n

Esto funcion\u00f3 muy bien para nuestro ejemplo, pero un problema con ese enfoque es que no estamos comprobando si el objeto nombrado es realmente una funci\u00f3n. De hecho, cualquier variable con el mismo nombre enga\u00f1ar\u00eda a nuestra prueba para que pensara que la funci\u00f3n est\u00e1 definida.<\/p>\n\n\n\n

El\u00a0operador \u00abtypeof\u00bb\u00a0<\/h3>\n\n\n\n

Alternativamente, podemos usar el  typeof<\/code>operador. Este operador verificar\u00e1 si existe el nombre de la funci\u00f3n declarada y si es una funci\u00f3n y no alg\u00fan otro tipo de objeto o primitiva.<\/p>\n\n\n\n

123<\/td>if<\/code> (<\/code>typeof<\/code> nameOfFunction === <\/code>'function'<\/code>) {<\/code>    <\/code>nameOfFunction();<\/code>}<\/code><\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n

En el ejemplo anterior, probamos si\u00a0nameOfFunction<\/code> existe y, si existe, lo ejecutamos.<\/p>\n\n\n\n

Usar un\u00a0bloque \u00abtry…catch\u00bb<\/h2>\n\n\n\n

El bloque\u00a0try\u2026catch<\/code> maneja los errores que probablemente ocurran dentro de ese bloque.\u00a0Usaremos este m\u00e9todo para manejar el error\u00a0undefined<\/code> que esperamos que JavaScript arroje cuando llamamos a una funci\u00f3n que no hemos definido.<\/p>\n\n\n\n

C\u00f3mo\u00a0funciona la declaraci\u00f3n \u00abtry…catch\u00bb<\/h4>\n\n\n\n

Ejecutamos la funci\u00f3n dentro del\u00a0bloque try<\/code>.\u00a0Si no existe, se lanzar\u00e1 una excepci\u00f3n y ser\u00e1 manejada por el\u00a0bloque catch<\/code>.<\/p>\n\n\n\n

Aqu\u00ed hay un ejemplo:<\/p>\n\n\n\n

123456<\/td>try<\/code> {<\/code>    <\/code>testFunction();<\/code>} <\/code>catch<\/code>(err) {<\/code>    <\/code>console.log(err);<\/code>}<\/code><\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n

Si\u00a0testFunction<\/code> no est\u00e1 definido, esto generar\u00e1 el siguiente mensaje en la consola.<\/p>\n\n\n\n

1<\/td>ReferenceError: testFunction is not defined<\/code><\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n

Esto es lo que ver\u00edamos tambi\u00e9n sin un bloque\u00a0try...catch<\/code>, pero en este caso nuestro c\u00f3digo continuar\u00e1 ejecut\u00e1ndose debajo del bloque catch.<\/p>\n\n\n\n

Conclusi\u00f3n <\/h3>\n\n\n\n

Este art\u00edculo ha cubierto tres m\u00e9todos principales para verificar si una funci\u00f3n existe en JavaScript antes de que la llamemos.\u00a0Estos son;\u00a0el uso de una declaraci\u00f3n condicional\u00a0if<\/code>, el uso de un operador\u00a0typeof<\/code> y, finalmente, la\u00a0declaraci\u00f3n try...catch<\/code>.\u00a0Tambi\u00e9n hemos usado ejemplos para explicar c\u00f3mo JavaScript puede implementar estos m\u00e9todos para verificar si una funci\u00f3n existe o no.\u00a0\u00a1Espero que este concepto te quede m\u00e1s claro ahora!.\u00a0<\/p>\n\n\n\n

Fuente: EnvatoTuts+<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"

Funciones JavaScript<\/p>\n","protected":false},"author":2,"featured_media":9113,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[44,41,40],"tags":[],"class_list":["post-9112","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-javascript","category-lenguajes-de-programacion","category-programacion"],"_links":{"self":[{"href":"https:\/\/capitalsoftware.com.ni\/index.php?rest_route=\/wp\/v2\/posts\/9112","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/capitalsoftware.com.ni\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/capitalsoftware.com.ni\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/capitalsoftware.com.ni\/index.php?rest_route=\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/capitalsoftware.com.ni\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=9112"}],"version-history":[{"count":1,"href":"https:\/\/capitalsoftware.com.ni\/index.php?rest_route=\/wp\/v2\/posts\/9112\/revisions"}],"predecessor-version":[{"id":9114,"href":"https:\/\/capitalsoftware.com.ni\/index.php?rest_route=\/wp\/v2\/posts\/9112\/revisions\/9114"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/capitalsoftware.com.ni\/index.php?rest_route=\/wp\/v2\/media\/9113"}],"wp:attachment":[{"href":"https:\/\/capitalsoftware.com.ni\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=9112"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/capitalsoftware.com.ni\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=9112"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/capitalsoftware.com.ni\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=9112"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}