{"id":850,"date":"2021-10-21T09:00:37","date_gmt":"2021-10-21T13:30:37","guid":{"rendered":"http:\/\/gregorgonzalez.com.ve\/blog\/?p=850"},"modified":"2021-10-21T09:02:20","modified_gmt":"2021-10-21T13:32:20","slug":"arrow-functions-en-javascript-funciones-flecha","status":"publish","type":"post","link":"http:\/\/gregorgonzalez.com.ve\/blog\/arrow-functions-en-javascript-funciones-flecha\/","title":{"rendered":"Arrow Functions en Javascript (Funciones Flecha)"},"content":{"rendered":"<p>Desde la implementaci\u00f3n de ES6 podemos declarar funciones de una manera m\u00e1s corta en nuestro c\u00f3digo Javascript. Es otra forma de trabajar y tiene sus diferencias de las funciones comunes, una vez se conoce el proceso y con pr\u00e1ctica, resulta ser muy c\u00f3modo y vers\u00e1til de usar.<\/p>\n<p>No se limita solo a Javascript, muchos otros lenguajes de programaci\u00f3n han ido adaptando esta versi\u00f3n corta Arrow Functions desde antes o despu\u00e9s, se usa por lo corto y claro del c\u00f3digo.<\/p>\n<h3><\/h3>\n<h3>\u00bfQu\u00e9 son los Arrow Functions?<\/h3>\n<p>Una funci\u00f3n de flecha no es m\u00e1s que una forma abreviada de declarar una funci\u00f3n. La forma m\u00e1s sencilla de comprender esta sintaxis es convertir la declaraci\u00f3n de funci\u00f3n tradicional en una funci\u00f3n de flecha.<\/p>\n<p>Ejemplo<\/p>\n<pre class=\"lang:js decode:true\">function saludar(nombre){\r\n    console.log('Hola ' + nombre);\r\n}<\/pre>\n<p>&nbsp;<\/p>\n<p>Primero: no necesitamos la palabra clave \u201cfunction\u201d, as\u00ed que elimin\u00e9mosla y asignemos la funci\u00f3n a una variable<\/p>\n<pre class=\"lang:js decode:true \">let saludar = (nombre){\r\n    console.log('Hola ' + nombre);\r\n}<\/pre>\n<p>&nbsp;<\/p>\n<p>Segundo: no necesitamos usar los par\u00e9ntesis<strong> ()<\/strong> ni las llaves <strong>{}<\/strong> en cambio utilizamos una \u00abflecha\u00bb <strong>=&gt;<\/strong> que de all\u00ed proviene el nombre \u00abfunci\u00f3n flecha\u00bb.<\/p>\n<pre class=\"lang:js decode:true\">let saludar = nombre =&gt; console.log('Hola ' + nombre);<\/pre>\n<p>Listo, esa es la versi\u00f3n m\u00e1s corta de la misma funci\u00f3n. Debemos usar par\u00e9ntesis y llaves seg\u00fan se haga m\u00e1s complejo la funci\u00f3n.<\/p>\n<p>&nbsp;<\/p>\n<h3>M\u00faltiples par\u00e1metros<\/h3>\n<pre class=\"lang:js decode:true\">let saludar = (nombre, apellido) =&gt; console.log('Hola ' + nombre + ' ' + apellido);<\/pre>\n<p>En este caso agregamos el apellido al saludo, como ahora son dos par\u00e1metros debemos usar par\u00e9ntesis.<\/p>\n<p>&nbsp;<\/p>\n<h3>Llaves<\/h3>\n<p>Si la funci\u00f3n a acortar es grande y con m\u00faltiples l\u00edneas, debemos agregar nuevamente las llaves y colocar un valor de retorno expl\u00edcito \u00abreturn\u00bb.<\/p>\n<pre class=\"lang:js decode:true \">let sumatoria = (num1, num2) =&gt; {\r\n    let suma = num1 + num2;\r\n    return suma;\r\n}<\/pre>\n<p>Estas son unos ejemplos simples para explicar, tambi\u00e9n puede ser mucho m\u00e1s complejos utilizando arrays, clases, objetos y otros tipos de datos de javascript.<\/p>\n<p>Toma en cuenta que, aunque ahora es largamente incluido por muchos navegadores, todav\u00eda puede haber algunos que no soporten este tipo de funciones, como por ejemplo internet explorer.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Desde la implementaci\u00f3n de ES6 podemos declarar funciones de una manera m\u00e1s corta en nuestro c\u00f3digo Javascript. Es otra forma de trabajar y tiene sus diferencias de las funciones comunes, una vez se conoce el proceso y con pr\u00e1ctica, resulta ser muy c\u00f3modo y vers\u00e1til de usar. No se limita solo a Javascript, muchos otros [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":851,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_exactmetrics_skip_tracking":false,"_exactmetrics_sitenote_active":false,"_exactmetrics_sitenote_note":"","_exactmetrics_sitenote_category":0,"footnotes":""},"categories":[34],"tags":[320,319,321,318],"_links":{"self":[{"href":"http:\/\/gregorgonzalez.com.ve\/blog\/wp-json\/wp\/v2\/posts\/850"}],"collection":[{"href":"http:\/\/gregorgonzalez.com.ve\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/gregorgonzalez.com.ve\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/gregorgonzalez.com.ve\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"http:\/\/gregorgonzalez.com.ve\/blog\/wp-json\/wp\/v2\/comments?post=850"}],"version-history":[{"count":4,"href":"http:\/\/gregorgonzalez.com.ve\/blog\/wp-json\/wp\/v2\/posts\/850\/revisions"}],"predecessor-version":[{"id":855,"href":"http:\/\/gregorgonzalez.com.ve\/blog\/wp-json\/wp\/v2\/posts\/850\/revisions\/855"}],"wp:featuredmedia":[{"embeddable":true,"href":"http:\/\/gregorgonzalez.com.ve\/blog\/wp-json\/wp\/v2\/media\/851"}],"wp:attachment":[{"href":"http:\/\/gregorgonzalez.com.ve\/blog\/wp-json\/wp\/v2\/media?parent=850"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/gregorgonzalez.com.ve\/blog\/wp-json\/wp\/v2\/categories?post=850"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/gregorgonzalez.com.ve\/blog\/wp-json\/wp\/v2\/tags?post=850"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}