{"id":651,"date":"2024-07-30T19:46:13","date_gmt":"2024-07-30T17:46:13","guid":{"rendered":"https:\/\/blog.sutilweb.eu\/?page_id=651"},"modified":"2024-07-30T19:46:13","modified_gmt":"2024-07-30T17:46:13","slug":"008-funciones-en-javascript","status":"publish","type":"page","link":"https:\/\/sutilweb.eu\/index.php\/lenguajes\/javascript\/javascript-practico\/03-tipos-de-datos-en-javascript\/008-funciones-en-javascript\/","title":{"rendered":"008. Funciones en Javascript"},"content":{"rendered":"\n

Que son<\/h2>\n\n\n\n

Las funciones<\/strong> son bloques de c\u00f3digo autocontenido<\/strong>, lo que significa que tiene su propio c\u00f3digo independiente al scope<\/strong> o al \u00e1mbito global<\/strong>, que se define una sola vez y que se puede ejecutar en cualquier momento. Adem\u00e1s una funci\u00f3n<\/strong> puede o no recibir par\u00e1metros<\/strong> que son datos que recibe separados por coma, y puede devolver o no, dependiendo del caso, valores.<\/p>\n\n\n\n\n\n\n\n

Las funciones<\/strong> son un tipo de dato muy especial, tambi\u00e9n se consideran objetos<\/strong>, y en el argot de las cuestiones \u00e9ticas de Javascript<\/strong>, se dice que son ciudadanos de primer orden<\/strong>, o de primera clase<\/strong>, lo que significa que son muy poderosas en Javascript<\/strong>, ya que las podemos asignar como valor, podemos retornar la ejecuci\u00f3n de una funci\u00f3n adicional, entonces, se pueden pasar como argumentos, pueden retornar como valores.<\/p>\n\n\n\n

Desde ES6<\/strong> tenemos caracter\u00edsticas muy interesantes, un caso de ellos son las funciones flecha<\/strong> o arrow function<\/strong>, que veremos m\u00e1s adelante.<\/p>\n\n\n\n

Declarar una funci\u00f3n<\/h2>\n\n\n\n

Para declarar una funci\u00f3n<\/strong>, existen dos maneras de crear nuestras funciones:<\/p>\n\n\n\n

    \n
  • Funciones declaradas<\/li>\n\n\n\n
  • Funciones expresadas<\/li>\n<\/ul>\n\n\n\n

    Hay una diferencia entre utilizar una manera u otra.<\/p>\n\n\n\n

    Funci\u00f3n declarada<\/h2>\n\n\n\n

    Para trabajar con una funci\u00f3n declarada<\/strong> utilizamos la palabra reservada function<\/em><\/strong>, de la siguiente manera.<\/p>\n\n\n\n

    Ejm<\/strong><\/p>\n\n\n\n

        <script>\n        \/\/ Funci\u00f3n declarada\n        function estoEsUnaFuncion () {\n        }\n    <\/script><\/pre>\n\n\n\n
    C\u00f3mo dec\u00edamos, una funci\u00f3n<\/strong> es un bloque de l\u00edneas de c\u00f3digo que se ejecutan al un\u00edsono.<\/p>\n\n\n\n
    Ejm<\/strong><\/p>\n\n\n\n
        <script>\n        \/\/ Funci\u00f3n declarada\n        function estoEsUnaFuncion () {\n            console.log(\"Uno\");\n            console.log(\"Dos\");\n            console.log(\"Tres\");\n        }\n    <\/script><\/pre>\n\n\n\n
    Una vez tenemos declarada la funci\u00f3n<\/strong>, lo que tenemos que hacer es mandarla llamar, esto se conoce como invocar una funci\u00f3n<\/strong>, y se hace de la siguiente manera.<\/p>\n\n\n\n
    Ejm<\/strong><\/p>\n\n\n\n
            \/\/ Invocaci\u00f3n de funci\u00f3n\n        estoEsUnaFuncion();<\/pre>\n\n\n\n
    Para invocarla<\/strong>, adem\u00e1s del nombre tenemos que ponerle los par\u00e9ntesis<\/strong>. Los par\u00e9ntesis<\/strong> indican, en un lenguaje de programaci\u00f3n<\/strong>, que una funci\u00f3n se va a ejecutar. Por lo tanto, en el momento que invocamos a la funci\u00f3n<\/strong> de nuestro ejm, \u00e9sta se ejecuta.<\/p>\n\n\n\n
    Funci\u00f3n que devuelve valores<\/h2>\n\n\n\n
    Vamos a declarar una funci\u00f3n<\/strong> que va a devolver valores. Para ello se ha de hacer uso de una palabra reservada denominada return<\/em><\/strong>.<\/p>\n\n\n\n
            \/\/ Declarar funci\u00f3n que devuelve valores\n        function unaFuncionQueDevuelveValores () {\n            console.log(\"Uno\");\n            console.log(\"Dos\");\n            return \"La funci\u00f3n ha retornado una cadena de texto\";\n        }\n\n        \/\/ Guardo la funci\u00f3n en una variable para poder imprimirla en consola\n        let valorDeFuncion = unaFuncionQueDevuelveValores();\n        console.log(valorDeFuncion);<\/pre>\n\n\n\n
    La variable que hemos creado que es igual a la funci\u00f3n retornar\u00e1 el valor de return<\/em><\/strong>. Cuando una funci\u00f3n<\/strong>, dentro del cuerpo de la funci\u00f3n<\/strong>, el compilador de la funci\u00f3n<\/strong> encuentra la palabra reservada return<\/em><\/strong>, en ese momento, ignora todas las l\u00edneas de c\u00f3digo que est\u00e1n abajo, retorna ese valor como valor de la funci\u00f3n<\/strong>, y todo lo que est\u00e1 antes del return<\/em> <\/strong>se ejecuta, pero lo que est\u00e1 despu\u00e9s ya no se ejecuta.<\/p>\n\n\n\n
    A lo largo de los scripts que realicemos, habr\u00e1 funciones<\/strong> que retornar\u00e1n un valor, que podr\u00e1 ser una cadena de texto<\/strong>, un n\u00famero<\/strong>, objeto<\/strong>, array<\/strong>, la misma funci\u00f3n<\/strong>, pero va a haber veces que nuestras funciones<\/strong> no van a tener que retornar valores.<\/p>\n\n\n\n
    Funci\u00f3n que recibe par\u00e1metros y devuelve valores<\/h2>\n\n\n\n
    Para ello vamos a crear una funci\u00f3n<\/strong>, de la siguiente manera.<\/p>\n\n\n\n
    Ejm<\/strong><\/p>\n\n\n\n
            \/\/ Declarar funci\u00f3n que reciba par\u00e1metros y devuelva valores\n        function saludar(nombre, edad) {\n            console.log(`Hola, mi nombre es ${nombre} y tengo ${edad} a\u00f1os`);\n        }\n\n        \/\/ Invocar a funci\u00f3n pas\u00e1ndole los par\u00e1metros\n        saludar(\"Francisco\", 51);\n        saludar();<\/pre>\n\n\n\n
    La primera invocaci\u00f3n<\/strong> nos devolver\u00e1 los valores que hemos pasado por par\u00e1metros, pero la segunda invocaci\u00f3n devolver\u00e1 undefined<\/em> <\/strong>como valor, ya que no le hemos pasado los valores que la funci\u00f3n pide. Antes en ES6<\/strong> no se pod\u00edan asignar valores a los par\u00e1metros<\/strong> directamente, pero desde ES6<\/strong> ya se pueden asignar valores a los par\u00e1metros que pasamos a la funci\u00f3n, quedando la sintaxis de la siguiente manera.<\/p>\n\n\n\n
    Ejm<\/strong><\/p>\n\n\n\n
            \/\/ Declarar funci\u00f3n que reciba par\u00e1metros y devuelva valores\n        function saludar(nombre = \"Francisco\", edad = 51) {\n            console.log(`Hola, mi nombre es ${nombre} y tengo ${edad} a\u00f1os`);\n        }\n\n        \/\/ Invocar a funci\u00f3n pas\u00e1ndole los par\u00e1metros y sin pasarle par\u00e1metros\n        saludar(\"Luis\", 49);\n        saludar();<\/pre>\n\n\n\n
    En la segunda invocaci\u00f3n<\/strong>, donde no le estamos asignando valores a los par\u00e1metros<\/strong>, devuelve los valores por defecto que hemos asignado a dichos par\u00e1metros.<\/p>\n\n\n\n
    Funciones declaradas VS funciones expresadas<\/h2>\n\n\n\n
    En las funciones declaradas<\/strong>, se puede invocar a la funci\u00f3n<\/strong> antes de declararla, funcionar\u00eda perfectamente. Esto es debido al Hoisting<\/strong>, cuando declaramos una funci\u00f3n<\/strong>, Javascript<\/strong> directamente la sube al principio, despu\u00e9s de las variables declaradas, con lo cual es como si se hubiera declarado ya, hace lo que se denomina un hoisting de la funci\u00f3n<\/strong>, lo primero que ordena Javascript<\/strong> son variables, <\/strong>despu\u00e9s funciones<\/strong>, por lo que, din\u00e1micamente lo que hace Javascript<\/strong> es elevar (Hoisting<\/strong>), es por ello que, aunque invoquemos (llamemos) a la funci\u00f3n<\/strong> antes de declararla, va a funciones sin problema en las funciones declaradas<\/strong>.<\/p>\n\n\n\n
    Existe otra manera de declarar funciones<\/strong>, y es declararlas como si fueran expresiones<\/strong>, lo que se hace es crear la funci\u00f3n<\/strong> y asignarla din\u00e1micamente a una variable<\/strong>, con en el siguiente ejm.<\/p>\n\n\n\n
    Ejm<\/strong><\/p>\n\n\n\n
            \/\/ Funciones expresadas\n        const funcionExpresada = function() {\n            console.log(\"Esto es una funci\u00f3n expresada\");\n        }\n\n        funcionExpresada();<\/pre>\n\n\n\n
    En este caso ya no tenemos que darle nombre a la funci\u00f3n<\/strong>, porque dicho nombre se lo hemos puesto a la variable<\/strong>. Este es un patr\u00f3n muy utilizado dentro de las funciones<\/strong> en Javascript<\/strong>, y esto se conoce con el nombre de funci\u00f3n an\u00f3nima<\/strong>, es decir, una funci\u00f3n que no tiene nombre.<\/p>\n\n\n\n
    Buenas pr\u00e1cticas<\/h2>\n\n\n\n
    Ambas opciones son v\u00e1lidas. Si somos ordenados y declaramos primero nuestras variables<\/strong> y despu\u00e9s nuestras funciones<\/strong>, no hay problema en crear funciones declaradas<\/strong>. Pero en los \u00faltimos a\u00f1os se est\u00e1 utilizando mas la funci\u00f3n expresada<\/strong>, la cual nos evita cometer errores de compilaci\u00f3n por tener mal acomodado nuestro c\u00f3digo.<\/p>\n\n\n\n
    Ejm completo<\/h2>\n\n\n\n
    Os dejamos la sintaxis de un ejm completo de funciones declaradas y expresadas.<\/p>\n\n\n\n
    Ejm<\/strong><\/p>\n\n\n\n
    <!DOCTYPE html>\n<html lang=\"es\">\n<head>\n    <meta charset=\"UTF-8\">\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n    <title>Funciones en Javascript<\/title>\n<\/head>\n\n<body>\n    <h1>Funciones en Javascript<\/h1>\n\n    <script>\n        \/\/ Declaraci\u00f3n de funci\u00f3n\n        function estoEsUnaFuncion () {\n            console.log(\"Uno\");\n            console.log(\"Dos\");\n            console.log(\"Tres\");\n        }\n\n        \/\/ Invocaci\u00f3n de funci\u00f3n\n        estoEsUnaFuncion();\n\n        \/\/ Declarar funci\u00f3n que devuelve valores\n        function unaFuncionQueDevuelveValores () {\n            console.log(\"Uno\");\n            console.log(\"Dos\");\n            return \"La funci\u00f3n ha retornado una cadena de texto\";\n        }\n\n        let valorDeFuncion = unaFuncionQueDevuelveValores();\n        console.log(valorDeFuncion);\n\n        \/\/ Declarar funci\u00f3n que reciba par\u00e1metros y devuelva valores\n        function saludar(nombre = \"Francisco\", edad = 51) {\n            console.log(`Hola, mi nombre es ${nombre} y tengo ${edad} a\u00f1os`);\n        }\n\n        \/\/ Invocar a funci\u00f3n pas\u00e1ndole los par\u00e1metros y sin pasarle par\u00e1metros\n        saludar(\"Pepito\", 49);\n        saludar();\n\n        \/\/ Funciones expresadas\n        const funcionExpresada = function() {\n            console.log(\"Esto es una funci\u00f3n expresada\");\n        }\n        funcionExpresada();\n    <\/script>\n<\/body>\n<\/html><\/pre>\n","protected":false},"excerpt":{"rendered":"
    Que son Las funciones son bloques de c\u00f3digo autocontenido, lo que significa que tiene su propio c\u00f3digo independiente al scope o al…<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":628,"menu_order":7,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_uag_custom_page_level_css":"","footnotes":""},"class_list":["post-651","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":"Que son Las funciones son bloques de c\u00f3digo autocontenido, lo que significa que tiene su propio c\u00f3digo independiente al scope o al...","_links":{"self":[{"href":"https:\/\/sutilweb.eu\/index.php\/wp-json\/wp\/v2\/pages\/651","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=651"}],"version-history":[{"count":1,"href":"https:\/\/sutilweb.eu\/index.php\/wp-json\/wp\/v2\/pages\/651\/revisions"}],"predecessor-version":[{"id":652,"href":"https:\/\/sutilweb.eu\/index.php\/wp-json\/wp\/v2\/pages\/651\/revisions\/652"}],"up":[{"embeddable":true,"href":"https:\/\/sutilweb.eu\/index.php\/wp-json\/wp\/v2\/pages\/628"}],"wp:attachment":[{"href":"https:\/\/sutilweb.eu\/index.php\/wp-json\/wp\/v2\/media?parent=651"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}