{"id":716,"date":"2024-07-30T20:26:19","date_gmt":"2024-07-30T18:26:19","guid":{"rendered":"https:\/\/blog.sutilweb.eu\/?page_id=716"},"modified":"2024-07-30T20:26:20","modified_gmt":"2024-07-30T18:26:20","slug":"007-funciones-anonimas-autoejecutables","status":"publish","type":"page","link":"https:\/\/sutilweb.eu\/index.php\/lenguajes\/javascript\/javascript-practico\/06-objetos-y-funciones-del-lenguaje\/007-funciones-anonimas-autoejecutables\/","title":{"rendered":"007. Funciones an\u00f3nimas autoejecutables"},"content":{"rendered":"\n

Las funciones an\u00f3nimas autoejecutables<\/strong> son funciones<\/strong> en la cual englobamos todo el c\u00f3digo que queremos ejecutar. Este patr\u00f3n fue muy utilizado porque cre\u00e1bamos una encapsulaci\u00f3n<\/strong> de nuestro c\u00f3digo, y se denominan an\u00f3nimas autoejecutables<\/strong> porque no solamente las definimos, sino que las estamos ejecutando en el momento de crearlas, y como su nombre dice, no tienen nombre, es una manera de que en el momento de que nuestro archivo se cargue en el navegador, se ejecuta la programaci\u00f3n que est\u00e1 en este archivo, y aparte est\u00e1 protegido de efectos secundarios que pudiera tener la invocaci\u00f3n de librer\u00edas de terceros o de otras mismos archivos que hayamos creado, y que, por tener nombres de variables o funciones muy similares evitan todo esto.<\/p>\n\n\n\n\n\n\n\n

Adem\u00e1s, permite pasar par\u00e1metros de una manera mas amigable.<\/p>\n\n\n\n

Una funci\u00f3n<\/strong> con nombre se llama funci\u00f3n nombrada<\/strong>, como pueden ser alert()<\/em><\/strong>, confirm()<\/em><\/strong>, prompt()<\/em><\/strong>. Una funci\u00f3n que no tiene nombre y que se autoejecuta tiene la siguiente sintaxis:<\/p>\n\n\n\n

(function(){\n   \/\/ Aqu\u00ed escribimos nuestro c\u00f3digo a ejecutar\n})();<\/pre>\n\n\n\n
Este es uno de los pocos casos en los que s\u00ed hay que poner punto y coma<\/strong> (;) al finalizar la funci\u00f3n. Podemos incluir varias funciones an\u00f3nimas autoejecutables<\/strong>, una despu\u00e9s de la otra. De la siguiente manera.<\/p>\n\n\n\n
Ejm<\/strong><\/p>\n\n\n\n
      \/\/ Sintaxis de funci\u00f3n an\u00f3nima autoejecutable\n\n      (function () {\n        console.log(\"Mi primera funci\u00f3n an\u00f3nima autoejecutable\");\n      })();\n\n      (function () {\n        console.log(\"Mi segunda funci\u00f3n an\u00f3nima autoejecutable\");\n      })();<\/pre>\n\n\n\n
El c\u00f3digo de la primea IIFE<\/strong> no est\u00e1 entrando en conflicto con el c\u00f3digo de la segunda.<\/p>\n\n\n\n
Paso de par\u00e1metros<\/h2>\n\n\n\n
Veamos un ejm.<\/p>\n\n\n\n
      (function (d, w, c) {\n        console.log(d);\n        console.log(w);\n        console.log(c);\n      })(document, window, console);<\/pre>\n\n\n\n
d<\/em> ser\u00eda el alias<\/strong> de document<\/em><\/strong>, w<\/em> el alias<\/strong> de window<\/em><\/strong>, y c<\/em> el alias<\/strong> de console<\/em><\/strong>, de manera que si tenemos que llamar a document<\/em> <\/strong>lo podemos hacer a trav\u00e9s del alias<\/strong> que hemos creado y ahorrar escribir texto.<\/p>\n\n\n\n
Antes de que llegaran los m\u00f3dulos<\/strong>, es decir, poder mandar a llamar archivos Javascript<\/strong> dentro de otros y poder encapsular nuestro c\u00f3digo a manera de m\u00e9todos exportados e importados<\/strong>, este era un patr\u00f3n muy utilizado a la hora de crear m\u00f3dulos<\/strong> en Javascript<\/strong>. Podemos ir al m\u00f3dulo de jQuery<\/strong><\/a>, el cual utiliza este patr\u00f3n.<\/p>\n\n\n\n
Formas de escribir una funci\u00f3n an\u00f3nima autoejecutable<\/h2>\n\n\n\n
Existen diferentes formas de escribir una IIFE. Las m\u00e1s conocidas son las siguientes:<\/p>\n\n\n\n
1. Versi\u00f3n cl\u00e1sica<\/h3>\n\n\n\n
(function(){\n   console.log(\"Versi\u00f3n cl\u00e1sica\");\n})();<\/pre>\n\n\n\n
2. Formato Crockford<\/h3>\n\n\n\n
Es el formato que propone Douglas Crockford, el creador del libro Javascript, The Good Parts. Es el creador del formato JSON.<\/p>\n\n\n\n
((function(){\n   console.log(\"Versi\u00f3n Crockford\");\n}())<\/pre>\n\n\n\n
3. Versi\u00f3n unaria<\/h3>\n\n\n\n
+function(){\n   console.log(\"Versi\u00f3n unaria\");\n}()<\/pre>\n\n\n\n
4. Facebook<\/h3>\n\n\n\n
!function(){\n   console.log(\"Versi\u00f3n Facebook\");\n}()<\/pre>\n","protected":false},"excerpt":{"rendered":"
Las funciones an\u00f3nimas autoejecutables son funciones en la cual englobamos todo el c\u00f3digo que queremos ejecutar. Este patr\u00f3n fue muy utilizado porque…<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":697,"menu_order":6,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_uag_custom_page_level_css":"","footnotes":""},"class_list":["post-716","page","type-page","status-publish","hentry"],"uagb_featured_image_src":{"full":false,"thumbnail":false,"medium":false,"medium_large":false,"large":false,"1536x1536":false,"2048x2048":false},"uagb_author_info":{"display_name":"Sutil Web","author_link":"https:\/\/sutilweb.eu\/index.php\/author\/sutilweb\/"},"uagb_comment_info":0,"uagb_excerpt":"Las funciones an\u00f3nimas autoejecutables son funciones en la cual englobamos todo el c\u00f3digo que queremos ejecutar. Este patr\u00f3n fue muy utilizado porque...","_links":{"self":[{"href":"https:\/\/sutilweb.eu\/index.php\/wp-json\/wp\/v2\/pages\/716","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/sutilweb.eu\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/sutilweb.eu\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/sutilweb.eu\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/sutilweb.eu\/index.php\/wp-json\/wp\/v2\/comments?post=716"}],"version-history":[{"count":1,"href":"https:\/\/sutilweb.eu\/index.php\/wp-json\/wp\/v2\/pages\/716\/revisions"}],"predecessor-version":[{"id":717,"href":"https:\/\/sutilweb.eu\/index.php\/wp-json\/wp\/v2\/pages\/716\/revisions\/717"}],"up":[{"embeddable":true,"href":"https:\/\/sutilweb.eu\/index.php\/wp-json\/wp\/v2\/pages\/697"}],"wp:attachment":[{"href":"https:\/\/sutilweb.eu\/index.php\/wp-json\/wp\/v2\/media?parent=716"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}