{"id":7528,"date":"2020-02-20T16:42:54","date_gmt":"2020-02-20T16:42:54","guid":{"rendered":"https:\/\/www.jose-aguilar.com\/blog\/?p=7528"},"modified":"2020-02-20T16:45:49","modified_gmt":"2020-02-20T16:45:49","slug":"4-metodos-para-crear-tus-propias-funciones-con-javascript","status":"publish","type":"post","link":"https:\/\/www.jose-aguilar.com\/blog\/4-metodos-para-crear-tus-propias-funciones-con-javascript\/","title":{"rendered":"4 m\u00e9todos para crear tus funciones con JavaScript"},"content":{"rendered":"

En este art\u00edculo vas a descubrir 4 formas que te van a permitir crear tus propias funciones utilizando JavaScript<\/strong>.<\/p>\n

El lenguaje JavaScript<\/strong> tiene funciones que pueden venir muy bien para reutilizarlas en tus c\u00f3digos pero, no siempre una funci\u00f3n va a existir en el lenguaje y, usualmente, te tocar\u00e1 crear tus propias funciones personalizadas.<\/p>\n

Normalmente, en JavaScript<\/strong> y en cualquier lenguaje de programaci\u00f3n, se puede crear una funci\u00f3n para resolver un peque\u00f1o problema. No creas una funci\u00f3n que haga diferentes tareas. No es conveniente.<\/p>\n

Por ejemplo, si est\u00e1s desarrollando un carrito de compras, no creas una funci\u00f3n grande que haga todo. Lo ideal es dividir el proceso en partes para que, principalmente, el c\u00f3digo sea m\u00e1s f\u00e1cil de leer y, por tanto, m\u00e1s f\u00e1cil de mantener.<\/p>\n

En JavaScript<\/strong> se pueden crear y utilizar funciones de distintas formas. A continuaci\u00f3n, vas a ver 4 formas distintas.<\/p>\n

Crear funciones en JavaScript con \u00abFunction declaration\u00bb<\/h2>\n

En este caso, en primer lugar creas o declaras una funci\u00f3n y luego la puedes llamar en la secuencia de tu c\u00f3digo.<\/p>\n

Por ejemplo:<\/p>\n

<\/a>Source code<\/a><\/td><\/a> <\/a> <\/a> <\/td><\/tr><\/table><\/div>
\/\/declaraci\u00f3n<\/span>\nfunction<\/span> sumar(<\/span>a,<\/span> b)<\/span> {<\/span>\n    return<\/span> a+<\/span>b;<\/span>\n}<\/span>\n \n\/\/Llamada<\/span>\nlet suma =<\/span> sumar(<\/span>5,<\/span> 3)<\/span>;<\/span> \/\/8<\/span>\n \nconsole.log<\/span>(<\/span>suma)<\/span>;<\/span><\/pre><\/div><\/div>\n
En el c\u00f3digo anterior he creado una funci\u00f3n sencilla que recibe 2 n\u00fameros y retorna su suma.<\/p>\n
En la llamada, guardo el resultado en una variable para usarla a continuaci\u00f3n en la secuencia del programa.<\/p>\n
Crear funciones en JavaScript con \u00abFunction expression\u00bb<\/h2>\n
Este tipo de funciones se definen de la siguiente forma:<\/p>\n
<\/a>Source code<\/a><\/td><\/a> <\/a> <\/a> <\/td><\/tr><\/table><\/div>
\/\/Definici\u00f3n<\/span>\nconst<\/span> sumar =<\/span> function<\/span>(<\/span>a,<\/span> b)<\/span> {<\/span>\n    return<\/span> a +<\/span> b;<\/span>\n}<\/span>\n \n\/\/Llamada<\/span>\nlet suma =<\/span> sumar(<\/span>5,<\/span> 3)<\/span>;<\/span> \/\/8<\/span>\n \nconsole.log<\/span>(<\/span>suma)<\/span>;<\/span><\/pre><\/div><\/div>\n
El resultado es el mismo. La \u00fanica diferencia es que con Function expression<\/em> tenemos una sintaxis de variable ya que creas una variable en la que guardas una funci\u00f3n.<\/p>\n
Crear funciones en JavaScript con \u00abIIFE\u00bb<\/h2>\n
Funciones que se declaran e invocan directamente.<\/p>\n
Siguiendo el ejemplo, puedo hacer la funci\u00f3n sumar con esta metodolog\u00eda de la siguiente forma:<\/p>\n
<\/a>Source code<\/a><\/td><\/a> <\/a> <\/a> <\/td><\/tr><\/table><\/div>
(<\/span>function<\/span>(<\/span>a,<\/span> b)<\/span> {<\/span>\n    console.log<\/span>(<\/span>a+<\/span>b)<\/span>;<\/span>\n}<\/span>)<\/span>(<\/span>5,<\/span> 3)<\/span>;<\/span><\/pre><\/div><\/div>\n
El anterior c\u00f3digo est\u00e1 definiendo y llamando a la funci\u00f3n que retorna impreso en consola la suma de los 2 par\u00e1metros enviados.<\/p>\n
Tal vez si has visto c\u00f3digo jQuery, esto te resultar\u00e1 familiar ya que jQuery funciona justamente con este sistema.<\/p>\n
Crear funciones en JavaScript con \u00abM\u00e9todos de propiedad\u00bb<\/h2>\n
Cuando una funci\u00f3n se pone dentro de un objeto estaremos viendo o empleando los m\u00e9todos de propiedad.<\/p>\n
Por ejemplo:<\/p>\n
<\/a>Source code<\/a><\/td><\/a> <\/a> <\/a> <\/td><\/tr><\/table><\/div>
const<\/span> calculadora =<\/span> {<\/span>\n    sumar:<\/span> function<\/span>(<\/span>a,<\/span> b)<\/span> {<\/span>\n        console.log<\/span>(<\/span>a +<\/span> b)<\/span>;<\/span>\n    }<\/span>,<\/span>\n    restar:<\/span> function<\/span>(<\/span>a,<\/span> b)<\/span> {<\/span>\n        console.log<\/span>(<\/span>a -<\/span> b)<\/span>;<\/span>\n    }<\/span>\n}<\/span>\n \ncalculadora.sumar<\/span>(<\/span>8,<\/span>4)<\/span>;<\/span> \/\/12<\/span>\ncalculadora.restar<\/span>(<\/span>8,<\/span>5)<\/span>;<\/span> \/\/3<\/span><\/pre><\/div><\/div>\n
Puedo crear un objeto \u00abcalculadora\u00bb y definir todos los operadores.<\/p>\n
En el ejemplo puedes ver las funciones sumar y restar.<\/p>\n
Como ejercicio, te dejo que agregues el resto de operadores a tu calculadora: multiplicar, dividir, etc.<\/p>\n
Conclusi\u00f3n<\/h2>\n
Estos son 4 m\u00e9todos que debes saber para trabajar con funciones en JavaScript<\/strong>.<\/p>\n
Todos dan el mismo resultado pero se crean de distinta forma. Utiliza el que m\u00e1s te guste y convenga para tu c\u00f3digo.<\/p>\n","protected":false},"excerpt":{"rendered":"
Descubre 4 formas que te van a permitir crear tus propias funciones utilizando JavaScript.<\/p>\n","protected":false},"author":1,"featured_media":7529,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[14],"tags":[128],"class_list":["post-7528","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-javascript","tag-funciones"],"yoast_head":"\n4 m\u00e9todos para crear tus funciones con JavaScript - Jose Aguilar Blog<\/title>\n<meta name=\"description\" content=\"Descubre 4 formas que te van a permitir crear tus propias funciones utilizando JavaScript.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<meta property=\"og:locale\" content=\"es_ES\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"4 m\u00e9todos para crear tus funciones con JavaScript - Jose Aguilar Blog\" \/>\n<meta property=\"og:description\" content=\"Descubre 4 formas que te van a permitir crear tus propias funciones utilizando JavaScript.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.jose-aguilar.com\/blog\/4-metodos-para-crear-tus-propias-funciones-con-javascript\/\" \/>\n<meta property=\"og:site_name\" content=\"Jose Aguilar Blog\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/joseaguilarblog\" \/>\n<meta property=\"article:published_time\" content=\"2020-02-20T16:42:54+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2020-02-20T16:45:49+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2020\/02\/4-metodos-funciones-js.png\" \/>\n\t<meta property=\"og:image:width\" content=\"250\" \/>\n\t<meta property=\"og:image:height\" content=\"250\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Jose Aguilar\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@JoseAguilarBlog\" \/>\n<meta name=\"twitter:site\" content=\"@JoseAguilarBlog\" \/>\n<meta name=\"twitter:label1\" content=\"Escrito por\" \/>\n\t<meta name=\"twitter:data1\" content=\"Jose Aguilar\" \/>\n\t<meta name=\"twitter:label2\" content=\"Tiempo de lectura\" \/>\n\t<meta name=\"twitter:data2\" content=\"3 minutos\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/4-metodos-para-crear-tus-propias-funciones-con-javascript\/\",\"url\":\"https:\/\/www.jose-aguilar.com\/blog\/4-metodos-para-crear-tus-propias-funciones-con-javascript\/\",\"name\":\"4 m\u00e9todos para crear tus funciones con JavaScript - Jose Aguilar Blog\",\"isPartOf\":{\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/4-metodos-para-crear-tus-propias-funciones-con-javascript\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/4-metodos-para-crear-tus-propias-funciones-con-javascript\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2020\/02\/4-metodos-funciones-js.png\",\"datePublished\":\"2020-02-20T16:42:54+00:00\",\"dateModified\":\"2020-02-20T16:45:49+00:00\",\"author\":{\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/#\/schema\/person\/e6d485db1e1140866e95971d17105d11\"},\"description\":\"Descubre 4 formas que te van a permitir crear tus propias funciones utilizando JavaScript.\",\"breadcrumb\":{\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/4-metodos-para-crear-tus-propias-funciones-con-javascript\/#breadcrumb\"},\"inLanguage\":\"es\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.jose-aguilar.com\/blog\/4-metodos-para-crear-tus-propias-funciones-con-javascript\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"es\",\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/4-metodos-para-crear-tus-propias-funciones-con-javascript\/#primaryimage\",\"url\":\"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2020\/02\/4-metodos-funciones-js.png\",\"contentUrl\":\"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2020\/02\/4-metodos-funciones-js.png\",\"width\":250,\"height\":250,\"caption\":\"M\u00e9todos para crear funciones en JavaScript\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/4-metodos-para-crear-tus-propias-funciones-con-javascript\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Portada\",\"item\":\"https:\/\/www.jose-aguilar.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"4 m\u00e9todos para crear tus funciones con JavaScript\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/#website\",\"url\":\"https:\/\/www.jose-aguilar.com\/blog\/\",\"name\":\"Jose Aguilar Blog\",\"description\":\"Desarrollo Web con PrestaShop, WordPress, PHP, jQuery y Ajax\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.jose-aguilar.com\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"es\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/#\/schema\/person\/e6d485db1e1140866e95971d17105d11\",\"name\":\"Jose Aguilar\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"es\",\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/abbfef5f1d75260c549d0f2c2842bb697ba1aadff3b2836b39d2590c8a625415?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/abbfef5f1d75260c549d0f2c2842bb697ba1aadff3b2836b39d2590c8a625415?s=96&d=mm&r=g\",\"caption\":\"Jose Aguilar\"},\"description\":\"Director ejecutivo y tecnol\u00f3gico en JA Modules. Experto programador PrestaShop y Experto programador WordPress.\",\"sameAs\":[\"https:\/\/plus.google.com\/114357189801512615537\"],\"url\":\"https:\/\/www.jose-aguilar.com\/blog\/author\/josea902\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"4 m\u00e9todos para crear tus funciones con JavaScript - Jose Aguilar Blog","description":"Descubre 4 formas que te van a permitir crear tus propias funciones utilizando JavaScript.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"og_locale":"es_ES","og_type":"article","og_title":"4 m\u00e9todos para crear tus funciones con JavaScript - Jose Aguilar Blog","og_description":"Descubre 4 formas que te van a permitir crear tus propias funciones utilizando JavaScript.","og_url":"https:\/\/www.jose-aguilar.com\/blog\/4-metodos-para-crear-tus-propias-funciones-con-javascript\/","og_site_name":"Jose Aguilar Blog","article_publisher":"https:\/\/www.facebook.com\/joseaguilarblog","article_published_time":"2020-02-20T16:42:54+00:00","article_modified_time":"2020-02-20T16:45:49+00:00","og_image":[{"width":250,"height":250,"url":"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2020\/02\/4-metodos-funciones-js.png","type":"image\/png"}],"author":"Jose Aguilar","twitter_card":"summary_large_image","twitter_creator":"@JoseAguilarBlog","twitter_site":"@JoseAguilarBlog","twitter_misc":{"Escrito por":"Jose Aguilar","Tiempo de lectura":"3 minutos"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/www.jose-aguilar.com\/blog\/4-metodos-para-crear-tus-propias-funciones-con-javascript\/","url":"https:\/\/www.jose-aguilar.com\/blog\/4-metodos-para-crear-tus-propias-funciones-con-javascript\/","name":"4 m\u00e9todos para crear tus funciones con JavaScript - Jose Aguilar Blog","isPartOf":{"@id":"https:\/\/www.jose-aguilar.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.jose-aguilar.com\/blog\/4-metodos-para-crear-tus-propias-funciones-con-javascript\/#primaryimage"},"image":{"@id":"https:\/\/www.jose-aguilar.com\/blog\/4-metodos-para-crear-tus-propias-funciones-con-javascript\/#primaryimage"},"thumbnailUrl":"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2020\/02\/4-metodos-funciones-js.png","datePublished":"2020-02-20T16:42:54+00:00","dateModified":"2020-02-20T16:45:49+00:00","author":{"@id":"https:\/\/www.jose-aguilar.com\/blog\/#\/schema\/person\/e6d485db1e1140866e95971d17105d11"},"description":"Descubre 4 formas que te van a permitir crear tus propias funciones utilizando JavaScript.","breadcrumb":{"@id":"https:\/\/www.jose-aguilar.com\/blog\/4-metodos-para-crear-tus-propias-funciones-con-javascript\/#breadcrumb"},"inLanguage":"es","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.jose-aguilar.com\/blog\/4-metodos-para-crear-tus-propias-funciones-con-javascript\/"]}]},{"@type":"ImageObject","inLanguage":"es","@id":"https:\/\/www.jose-aguilar.com\/blog\/4-metodos-para-crear-tus-propias-funciones-con-javascript\/#primaryimage","url":"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2020\/02\/4-metodos-funciones-js.png","contentUrl":"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2020\/02\/4-metodos-funciones-js.png","width":250,"height":250,"caption":"M\u00e9todos para crear funciones en JavaScript"},{"@type":"BreadcrumbList","@id":"https:\/\/www.jose-aguilar.com\/blog\/4-metodos-para-crear-tus-propias-funciones-con-javascript\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Portada","item":"https:\/\/www.jose-aguilar.com\/blog\/"},{"@type":"ListItem","position":2,"name":"4 m\u00e9todos para crear tus funciones con JavaScript"}]},{"@type":"WebSite","@id":"https:\/\/www.jose-aguilar.com\/blog\/#website","url":"https:\/\/www.jose-aguilar.com\/blog\/","name":"Jose Aguilar Blog","description":"Desarrollo Web con PrestaShop, WordPress, PHP, jQuery y Ajax","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.jose-aguilar.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"es"},{"@type":"Person","@id":"https:\/\/www.jose-aguilar.com\/blog\/#\/schema\/person\/e6d485db1e1140866e95971d17105d11","name":"Jose Aguilar","image":{"@type":"ImageObject","inLanguage":"es","@id":"https:\/\/www.jose-aguilar.com\/blog\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/abbfef5f1d75260c549d0f2c2842bb697ba1aadff3b2836b39d2590c8a625415?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/abbfef5f1d75260c549d0f2c2842bb697ba1aadff3b2836b39d2590c8a625415?s=96&d=mm&r=g","caption":"Jose Aguilar"},"description":"Director ejecutivo y tecnol\u00f3gico en JA Modules. Experto programador PrestaShop y Experto programador WordPress.","sameAs":["https:\/\/plus.google.com\/114357189801512615537"],"url":"https:\/\/www.jose-aguilar.com\/blog\/author\/josea902\/"}]}},"_links":{"self":[{"href":"https:\/\/www.jose-aguilar.com\/blog\/wp-json\/wp\/v2\/posts\/7528","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.jose-aguilar.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.jose-aguilar.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.jose-aguilar.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.jose-aguilar.com\/blog\/wp-json\/wp\/v2\/comments?post=7528"}],"version-history":[{"count":0,"href":"https:\/\/www.jose-aguilar.com\/blog\/wp-json\/wp\/v2\/posts\/7528\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.jose-aguilar.com\/blog\/wp-json\/wp\/v2\/media\/7529"}],"wp:attachment":[{"href":"https:\/\/www.jose-aguilar.com\/blog\/wp-json\/wp\/v2\/media?parent=7528"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.jose-aguilar.com\/blog\/wp-json\/wp\/v2\/categories?post=7528"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.jose-aguilar.com\/blog\/wp-json\/wp\/v2\/tags?post=7528"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}