{"id":5528,"date":"2019-02-01T11:36:36","date_gmt":"2019-02-01T13:36:36","guid":{"rendered":"https:\/\/www.blip.ai\/blog\/?p=5528"},"modified":"2023-07-15T23:15:02","modified_gmt":"2023-07-16T02:15:02","slug":"programacao-funcional-javascript","status":"publish","type":"post","link":"https:\/\/www.blip.ai\/blog\/devs\/programacao-funcional-javascript\/","title":{"rendered":"Programa\u00e7\u00e3o funcional Javascript: guia de como aplicar os conceitos [+benef\u00edcios]"},"content":{"rendered":"\n<p><span style=\"font-weight: 400;\">Neste artigo, vamos tentar abordar de forma pr\u00e1tica (e por que n\u00e3o te\u00f3rica) o motivo pelo qual voc\u00ea, que usa Javascript no seu dia-a-dia de trabalho, deve come\u00e7ar a explorar os benef\u00edcios da<strong> programa\u00e7\u00e3o funcional Javascript<\/strong>&nbsp;em seus projetos.<\/span><br><span style=\"font-weight: 400;\">Antes de come\u00e7ar a abordar os recursos espec\u00edficos da linguagem de programa\u00e7\u00e3o funcional Javascript, temos de ter em mente alguns conceitos base do paradigma da linguagem funcional, bem como suas aplica\u00e7\u00f5es pr\u00e1ticas.<\/span><br><span style=\"font-weight: 400;\"> Neste post, iremos falar basicamente sobre tr\u00eas assuntos: <\/span><\/p>\n\n\n\n<ul class=\"wp-block-list\"><li><b>efeitos colaterais;<\/b><\/li><li><b> imutabilidade;<\/b><\/li><li><b>composi\u00e7\u00e3o de fun\u00e7\u00f5es.<\/b><\/li><\/ul>\n\n\n\n<h2 class=\"wp-block-heading\">O que \u00e9 fun\u00e7\u00e3o?<\/h2>\n\n\n\n<p><span style=\"font-weight: 400;\">Antes de mais nada, vamos pedir ajuda para a matem\u00e1tica para esclarecer o conceito de uma fun\u00e7\u00e3o. Uma fun\u00e7\u00e3o pode ser entendida como a rela\u00e7\u00e3o entre dois conjuntos quaisquer (A e B) e uma regra que permite associar um conjunto ao outro. Sendo assim, em linguagem matem\u00e1tica:<\/span><\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><strong><i>f<\/i>: A -&gt; B<\/strong><\/h3>\n\n\n\n<p><span style=\"font-weight: 400;\">Vamos chamar o conjunto A de dom\u00ednio e o B de contradom\u00ednio. Isso significa que, se o meu dom\u00ednio for sempre A, meu contradom\u00ednio ser\u00e1 sempre B. Em Javascript, podemos dizer ent\u00e3o que na fun\u00e7\u00e3o abaixo, se o meu dom\u00ednio for 2, meu contradom\u00ednio sempre ser\u00e1 4:<a href=\"https:\/\/www.blip.ai\/blog\/wp-content\/uploads\/2019\/02\/programa\u00e7\u00e3o-funcional-javascript-1.jpg\"><img fetchpriority=\"high\" decoding=\"async\" class=\"alignnone size-full wp-image-6478\" src=\"https:\/\/www.blip.ai\/blog\/wp-content\/uploads\/2019\/02\/programa\u00e7\u00e3o-funcional-javascript-1.jpg\" alt=\"programa\u00e7\u00e3o funcional javascript\" width=\"1024\" height=\"267\" title=\"-\" srcset=\"https:\/\/www.blip.ai\/blog\/wp-content\/uploads\/2019\/02\/programa\u00e7\u00e3o-funcional-javascript-1.jpg 1024w, https:\/\/www.blip.ai\/blog\/wp-content\/uploads\/2019\/02\/programa\u00e7\u00e3o-funcional-javascript-1-300x78.jpg 300w, https:\/\/www.blip.ai\/blog\/wp-content\/uploads\/2019\/02\/programa\u00e7\u00e3o-funcional-javascript-1-768x200.jpg 768w, https:\/\/www.blip.ai\/blog\/wp-content\/uploads\/2019\/02\/programa\u00e7\u00e3o-funcional-javascript-1-380x99.jpg 380w, https:\/\/www.blip.ai\/blog\/wp-content\/uploads\/2019\/02\/programa\u00e7\u00e3o-funcional-javascript-1-800x209.jpg 800w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/a><\/span><br><span style=\"font-weight: 400;\">Isso \u00e9 o que chamamos de uma fun\u00e7\u00e3o pura, ou seja, <strong>uma fun\u00e7\u00e3o que n\u00e3o altera vari\u00e1veis<\/strong> fora do seu escopo (n\u00e3o possui efeito colateral) e sempre retorna o mesmo valor quando s\u00e3o passados os mesmos argumentos.<\/span><\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Efeitos colaterais<\/h2>\n\n\n\n<p><span style=\"font-weight: 400;\">Um efeito colateral \u00e9 <strong>qualquer altera\u00e7\u00e3o no estado da aplica\u00e7\u00e3o<\/strong> que seja percebida fora do escopo da fun\u00e7\u00e3o chamada. Isso pode gerar alguns problemas como<strong> imprevisibilidade e complexidade<\/strong> no racioc\u00ednio. <\/span><br><span style=\"font-weight: 400;\">Efeitos colaterais em Javascript s\u00e3o comumente observados nos seguintes casos:<\/span><\/p>\n\n\n\n<ul class=\"wp-block-list\"><li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">Console.log;<\/span><\/li><li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">Altera\u00e7\u00e3o no DOM (escritas na p\u00e1gina e afins);<\/span><\/li><li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">Escrita em arquivos;<\/span><\/li><li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">Chamadas a outras fun\u00e7\u00f5es com efeitos colaterais.<\/span><\/li><\/ul>\n\n\n\n<p><span style=\"font-weight: 400;\">Para exemplificar o que seria uma \u201cfun\u00e7\u00e3o impura\u201d com efeitos colaterais, vou mostrar o seguinte c\u00f3digo:<\/span><br><span style=\"font-weight: 400;\"><a href=\"https:\/\/www.blip.ai\/blog\/wp-content\/uploads\/2019\/02\/programa\u00e7\u00e3o-funcional-javascript-2.jpg\"><img decoding=\"async\" class=\"alignnone size-full wp-image-6479\" src=\"https:\/\/www.blip.ai\/blog\/wp-content\/uploads\/2019\/02\/programa\u00e7\u00e3o-funcional-javascript-2.jpg\" alt=\"programa\u00e7\u00e3o funcional javascript\" width=\"1024\" height=\"425\" title=\"-\" srcset=\"https:\/\/www.blip.ai\/blog\/wp-content\/uploads\/2019\/02\/programa\u00e7\u00e3o-funcional-javascript-2.jpg 1024w, https:\/\/www.blip.ai\/blog\/wp-content\/uploads\/2019\/02\/programa\u00e7\u00e3o-funcional-javascript-2-300x125.jpg 300w, https:\/\/www.blip.ai\/blog\/wp-content\/uploads\/2019\/02\/programa\u00e7\u00e3o-funcional-javascript-2-768x319.jpg 768w, https:\/\/www.blip.ai\/blog\/wp-content\/uploads\/2019\/02\/programa\u00e7\u00e3o-funcional-javascript-2-380x158.jpg 380w, https:\/\/www.blip.ai\/blog\/wp-content\/uploads\/2019\/02\/programa\u00e7\u00e3o-funcional-javascript-2-800x332.jpg 800w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/a>Neste caso, podemos perceber que a fun\u00e7\u00e3o \u201csum\u201d altera a vari\u00e1vel \u201cresult\u201d que est\u00e1 fora do seu escopo, o que a torna impura e com efeitos colaterais. Para evitar esses casos, devemos sempre ter em mente que uma fun\u00e7\u00e3o deve ter sempre um dom\u00ednio claro e um contradom\u00ednio \u00fanico para uma mesma entrada de par\u00e2metros.<\/span><br><span style=\"font-weight: 400;\">Fica muito mais f\u00e1cil na hora de debugar quando temos a certeza de que as vari\u00e1veis de um determinado escopo n\u00e3o correm o menor risco de serem alteradas por outras fun\u00e7\u00f5es que podem n\u00e3o fazer o menor sentido na execu\u00e7\u00e3o do programa.<\/span><br><span style=\"font-weight: 400;\">Por\u00e9m, eu diria que, em Javascript, \u00e9 praticamente imposs\u00edvel escrever uma aplica\u00e7\u00e3o inteira que n\u00e3o possua nenhum efeito colateral, visto que constantemente estamos manipulando o DOM, chamando fun\u00e7\u00f5es de bibliotecas externas, etc. Entretanto, sempre que poss\u00edvel, podemos<strong> evitar diversos casos de efeitos colaterais<\/strong> utilizando as fun\u00e7\u00f5es puras.<\/span><\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Imutabilidade<\/h2>\n\n\n\n<p><span style=\"font-weight: 400;\">Outro conceito importante do paradigma de programa\u00e7\u00e3o funcional Javascript est\u00e1 totalmente atrelado ao uso de fun\u00e7\u00f5es impuras vistas no t\u00f3pico anterior \u00e9 o que chamamos de imutabilidade.<\/span><br><span style=\"font-weight: 400;\"> Imutabilidade nada mais \u00e9 do que <strong>evitar alterar valores das vari\u00e1veis<\/strong>, seja por meio de fun\u00e7\u00f5es ou de atribui\u00e7\u00f5es simples. Veja o exemplo a seguir:<\/span><br><span style=\"font-weight: 400;\"><a href=\"https:\/\/www.blip.ai\/blog\/wp-content\/uploads\/2019\/02\/Programa\u00e7\u00e3o-funcional-Javascript-3.jpg\"><img decoding=\"async\" width=\"1024\" height=\"615\" class=\"alignnone size-full wp-image-6480\" src=\"https:\/\/www.blip.ai\/blog\/wp-content\/uploads\/2019\/02\/Programa\u00e7\u00e3o-funcional-Javascript-3.jpg\" alt=\"programa\u00e7\u00e3o funcional javascript\" title=\"-\" srcset=\"https:\/\/www.blip.ai\/blog\/wp-content\/uploads\/2019\/02\/Programa\u00e7\u00e3o-funcional-Javascript-3.jpg 1024w, https:\/\/www.blip.ai\/blog\/wp-content\/uploads\/2019\/02\/Programa\u00e7\u00e3o-funcional-Javascript-3-300x180.jpg 300w, https:\/\/www.blip.ai\/blog\/wp-content\/uploads\/2019\/02\/Programa\u00e7\u00e3o-funcional-Javascript-3-768x461.jpg 768w, https:\/\/www.blip.ai\/blog\/wp-content\/uploads\/2019\/02\/Programa\u00e7\u00e3o-funcional-Javascript-3-380x228.jpg 380w, https:\/\/www.blip.ai\/blog\/wp-content\/uploads\/2019\/02\/Programa\u00e7\u00e3o-funcional-Javascript-3-560x336.jpg 560w, https:\/\/www.blip.ai\/blog\/wp-content\/uploads\/2019\/02\/Programa\u00e7\u00e3o-funcional-Javascript-3-800x480.jpg 800w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/a>Veja que, neste caso, estamos alterando diretamente o valor do objeto \u201c<\/span><i><span style=\"font-weight: 400;\">blipGreeting<\/span><\/i><span style=\"font-weight: 400;\">\u201d. Reescrevendo nosso c\u00f3digo para uma <strong>fun\u00e7\u00e3o imut\u00e1vel<\/strong>, ter\u00edamos o seguinte exemplo:<\/span><br><span style=\"font-weight: 400;\"><a href=\"https:\/\/www.blip.ai\/blog\/wp-content\/uploads\/2019\/02\/Programa\u00e7\u00e3o-funcional-Javascript-4.jpg\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"596\" class=\"alignnone size-full wp-image-6481\" src=\"https:\/\/www.blip.ai\/blog\/wp-content\/uploads\/2019\/02\/Programa\u00e7\u00e3o-funcional-Javascript-4.jpg\" alt=\"programa\u00e7\u00e3o funcional javascript\" title=\"-\" srcset=\"https:\/\/www.blip.ai\/blog\/wp-content\/uploads\/2019\/02\/Programa\u00e7\u00e3o-funcional-Javascript-4.jpg 1024w, https:\/\/www.blip.ai\/blog\/wp-content\/uploads\/2019\/02\/Programa\u00e7\u00e3o-funcional-Javascript-4-300x175.jpg 300w, https:\/\/www.blip.ai\/blog\/wp-content\/uploads\/2019\/02\/Programa\u00e7\u00e3o-funcional-Javascript-4-768x447.jpg 768w, https:\/\/www.blip.ai\/blog\/wp-content\/uploads\/2019\/02\/Programa\u00e7\u00e3o-funcional-Javascript-4-380x221.jpg 380w, https:\/\/www.blip.ai\/blog\/wp-content\/uploads\/2019\/02\/Programa\u00e7\u00e3o-funcional-Javascript-4-800x466.jpg 800w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/a>Perceba que, no exemplo acima, em vez de modificarmos o valor da vari\u00e1vel <\/span><i><span style=\"font-weight: 400;\">blipGreeting<\/span><\/i><span style=\"font-weight: 400;\">, criamos uma nova vari\u00e1vel com o <strong>novo valor desejado e a retornamos<\/strong> em seguida.<\/span><br><span style=\"font-weight: 400;\">Essa abordagem em grandes aplica\u00e7\u00f5es pode ser extremamente vantajosa, uma vez que, lendo o c\u00f3digo, voc\u00ea pode ter a certeza de que o valor da vari\u00e1vel naquele ponto ser\u00e1 sempre aquele, e que, se em algum momento for necess\u00e1rio um outro valor, uma nova vari\u00e1vel ser\u00e1 criada para isso. Isso nos traz uma<strong> maior previsibilidade<\/strong> do que est\u00e1 acontecendo e maior facilidade ao debugar.<\/span><br><span style=\"font-weight: 400;\">Sendo assim, na programa\u00e7\u00e3o funcional do Javascript devemos evitar alguns <strong>m\u00e9todos mut\u00e1veis<\/strong> como <\/span><a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/JavaScript\/Reference\/Global_Objects\/Array\/push\" target=\"_blank\" rel=\"noreferrer noopener\"><i><span style=\"font-weight: 400;\">push<\/span><\/i><\/a><span style=\"font-weight: 400;\">, <\/span><a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/JavaScript\/Reference\/Global_Objects\/Array\/pop\" target=\"_blank\" rel=\"noopener\"><i><span style=\"font-weight: 400;\">pop<\/span><\/i><\/a><span style=\"font-weight: 400;\">, <\/span><a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/JavaScript\/Reference\/Global_Objects\/Array\/unshift\" target=\"_blank\" rel=\"noreferrer noopener\"><i><span style=\"font-weight: 400;\">unshift<\/span><\/i><\/a><span style=\"font-weight: 400;\">, <\/span><a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/JavaScript\/Reference\/Global_Objects\/Array\/shift\" target=\"_blank\" rel=\"noreferrer noopener\"><i><span style=\"font-weight: 400;\">shift<\/span><\/i><\/a><span style=\"font-weight: 400;\">, e at\u00e9 mesmo os <strong>la\u00e7os de repeti\u00e7\u00e3o<\/strong> <\/span><i><span style=\"font-weight: 400;\">for<\/span><\/i><span style=\"font-weight: 400;\">, <\/span><i><span style=\"font-weight: 400;\">foreach<\/span><\/i><span style=\"font-weight: 400;\"> e <\/span><i><span style=\"font-weight: 400;\">while<\/span><\/i><span style=\"font-weight: 400;\">.<\/span><br><span style=\"font-weight: 400;\">No caso da manipula\u00e7\u00e3o de <\/span><i><span style=\"font-weight: 400;\">arrays<\/span><\/i><span style=\"font-weight: 400;\">, existem <strong>m\u00e9todos alternativos do Javascript<\/strong> que sempre ir\u00e3o retornar um novo valor em vez de modificar algum existente, como \u00e9 o caso do:<\/span><\/p>\n\n\n\n<ul class=\"wp-block-list\"><li><a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/JavaScript\/Reference\/Global_Objects\/Array\/map\" target=\"_blank\" rel=\"noreferrer noopener\"><i><span style=\"font-weight: 400;\">map<\/span><\/i><\/a>;<\/li><li><a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/JavaScript\/Reference\/Global_Objects\/Array\/reduce\" target=\"_blank\" rel=\"noreferrer noopener\"><i><span style=\"font-weight: 400;\">reduce<\/span><\/i><\/a>;<\/li><li><a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/JavaScript\/Reference\/Global_Objects\/Array\/concat\" target=\"_blank\" rel=\"noreferrer noopener\"><i><span style=\"font-weight: 400;\">concat<\/span><\/i><\/a><span style=\"font-weight: 400;\">.<\/span><\/li><\/ul>\n\n\n\n<p><span style=\"font-weight: 400;\">No caso dos<strong> la\u00e7os de repeti\u00e7\u00e3o<\/strong>, uma boa alternativa \u00e9 utilizar o pr\u00f3prio <\/span><strong><i>map<\/i> ou <i>reduce<\/i><\/strong><span style=\"font-weight: 400;\"> para iterar sobre os itens de um <\/span><i><span style=\"font-weight: 400;\">array<\/span><\/i><span style=\"font-weight: 400;\">. <\/span><a href=\"https:\/\/vincent.billey.me\/pure-javascript-immutable-array\/\" target=\"_blank\" rel=\"noopener noreferrer\"><span style=\"font-weight: 400;\">Neste post<\/span><\/a><span style=\"font-weight: 400;\">, o autor d\u00e1 v\u00e1rias alternativas aos m\u00e9todos mut\u00e1veis do Javascript.<\/span><\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Composi\u00e7\u00e3o de fun\u00e7\u00f5es<\/h2>\n\n\n\n<p><span style=\"font-weight: 400;\">No paradigma de programa\u00e7\u00e3o funcional Javascript , temos o que chamamos de <strong>programa\u00e7\u00e3o declarativa<\/strong>. Em linhas gerais, podemos distinguir a abordagem declarativa da programa\u00e7\u00e3o imperativa pela seguinte defini\u00e7\u00e3o:<em> a programa\u00e7\u00e3o declarativa foca no \u201c<\/em><\/span><em><b>o que<\/b><span style=\"font-weight: 400;\">\u201d deve ser feito e a imperativa no \u201c<\/span><b>como<\/b><span style=\"font-weight: 400;\">\u201d deve ser feito.<\/span><\/em><br><span style=\"font-weight: 400;\">Sempre quando quero esclarecer esse conceito, gosto de utilizar o exemplo da receita de bolo. Se f\u00f4ssemos escrever um c\u00f3digo que fizesse um bolo utilizando a <strong>programa\u00e7\u00e3o imperativa<\/strong>, por exemplo, ir\u00edamos descrever um <\/span><b>passo-a-passo<\/b><span style=\"font-weight: 400;\"> de como fazer o bolo (adicione os ovos, depois adicione a\u00e7\u00facar, em seguida o leite\u2026). J\u00e1 na<strong> programa\u00e7\u00e3o declarativa<\/strong>, ir\u00edamos descrever <\/span><b>como<\/b><span style=\"font-weight: 400;\"> gostar\u00edamos que o nosso bolo ficasse (quero um bolo de chocolate, com pouco a\u00e7\u00facar, com 30cm de di\u00e2metro\u2026).<\/span><br><span style=\"font-weight: 400;\">Al\u00e9m de facilitar a leitura, isso ajuda bastante na hora dos<strong> testes<\/strong>. \u00c9<em> muito mais f\u00e1cil eu testar se \u201ca calda de chocolate foi adicionada\u201d do que testar \u201cse a receita deu certo\u201d. Ficou claro?<\/em><\/span><br><span style=\"font-weight: 400;\">Utilizando novamente o conceito matem\u00e1tico, na 5\u00aa ou 6\u00aa s\u00e9rie aprendemos que a nota\u00e7\u00e3o <\/span><b>f(g(h(x)))<\/b><span style=\"font-weight: 400;\"> pode ser lida como <\/span><b>f composta em g composta em h.<\/b><span style=\"font-weight: 400;\"> Sendo assim, o resultado da fun\u00e7\u00e3o h(x) ser\u00e1 passado como par\u00e2metro para a fun\u00e7\u00e3o g(x), que ter\u00e1 o seu resultado passado como par\u00e2metro para a fun\u00e7\u00e3o f(x), come\u00e7ando sempre pela fun\u00e7\u00e3o mais interna at\u00e9 chegar na mais externa<em>. Mas como isso fica no c\u00f3digo?<\/em><\/span><br><span style=\"font-weight: 400;\"><a href=\"https:\/\/www.blip.ai\/blog\/wp-content\/uploads\/2019\/02\/Programa\u00e7\u00e3o-funcional-Javascript-5.jpg\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-6482\" src=\"https:\/\/www.blip.ai\/blog\/wp-content\/uploads\/2019\/02\/Programa\u00e7\u00e3o-funcional-Javascript-5.jpg\" alt=\"programa\u00e7\u00e3o funcional javascript\" width=\"1024\" height=\"425\" title=\"-\" srcset=\"https:\/\/www.blip.ai\/blog\/wp-content\/uploads\/2019\/02\/Programa\u00e7\u00e3o-funcional-Javascript-5.jpg 1024w, https:\/\/www.blip.ai\/blog\/wp-content\/uploads\/2019\/02\/Programa\u00e7\u00e3o-funcional-Javascript-5-300x125.jpg 300w, https:\/\/www.blip.ai\/blog\/wp-content\/uploads\/2019\/02\/Programa\u00e7\u00e3o-funcional-Javascript-5-768x319.jpg 768w, https:\/\/www.blip.ai\/blog\/wp-content\/uploads\/2019\/02\/Programa\u00e7\u00e3o-funcional-Javascript-5-380x158.jpg 380w, https:\/\/www.blip.ai\/blog\/wp-content\/uploads\/2019\/02\/Programa\u00e7\u00e3o-funcional-Javascript-5-800x332.jpg 800w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/a>No c\u00f3digo acima, o que fizemos foi pegar um <\/span><i><span style=\"font-weight: 400;\">array<\/span><\/i><span style=\"font-weight: 400;\"> com alguns n\u00fameros, dividir todos eles por 2, pegar o <\/span><i><span style=\"font-weight: 400;\">array<\/span><\/i><span style=\"font-weight: 400;\"> resultante e multiplicar todos os n\u00fameros por 3. No resultado final, aplicamos a fun\u00e7\u00e3o <\/span><i><span style=\"font-weight: 400;\">sumTwo<\/span><\/i><span style=\"font-weight: 400;\"> que soma 2 a todos os n\u00fameros do <\/span><i><span style=\"font-weight: 400;\">array<\/span><\/i><span style=\"font-weight: 400;\">.<\/span><br><span style=\"font-weight: 400;\">Dessa forma, o c\u00f3digo fica reaproveit\u00e1vel, previs\u00edvel e super f\u00e1cil de testar. Podemos ainda refinar um pouco mais o nosso c\u00f3digo e criar uma fun\u00e7\u00e3o \u201ccompose\u201d, respons\u00e1vel por compor todas as fun\u00e7\u00f5es passadas via par\u00e2metro com base em um valor inicial, ficando da seguinte forma:<\/span><br><span style=\"font-weight: 400;\"><a href=\"https:\/\/www.blip.ai\/blog\/wp-content\/uploads\/2019\/02\/Programa\u00e7\u00e3o-funcional-Javascript-6.jpg\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-6483\" src=\"https:\/\/www.blip.ai\/blog\/wp-content\/uploads\/2019\/02\/Programa\u00e7\u00e3o-funcional-Javascript-6.jpg\" alt=\"programa\u00e7\u00e3o funcional javascript\" width=\"1024\" height=\"444\" title=\"-\" srcset=\"https:\/\/www.blip.ai\/blog\/wp-content\/uploads\/2019\/02\/Programa\u00e7\u00e3o-funcional-Javascript-6.jpg 1024w, https:\/\/www.blip.ai\/blog\/wp-content\/uploads\/2019\/02\/Programa\u00e7\u00e3o-funcional-Javascript-6-300x130.jpg 300w, https:\/\/www.blip.ai\/blog\/wp-content\/uploads\/2019\/02\/Programa\u00e7\u00e3o-funcional-Javascript-6-768x333.jpg 768w, https:\/\/www.blip.ai\/blog\/wp-content\/uploads\/2019\/02\/Programa\u00e7\u00e3o-funcional-Javascript-6-380x165.jpg 380w, https:\/\/www.blip.ai\/blog\/wp-content\/uploads\/2019\/02\/Programa\u00e7\u00e3o-funcional-Javascript-6-800x347.jpg 800w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/a>Dessa forma, o c\u00f3digo fica um pouco mais leg\u00edvel e ainda mais declarativo.<\/span><\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Considera\u00e7\u00f5es finais<\/h2>\n\n\n\n<p><span style=\"font-weight: 400;\">Na computa\u00e7\u00e3o, n\u00e3o existe verdade absoluta, pois tudo depende do contexto. Embora o Javascript n\u00e3o seja uma linguagem puramente funcional, vimos que \u00e9 poss\u00edvel aplicar os conceitos b\u00e1sicos do paradigma&nbsp;programa\u00e7\u00e3o funcional no Javascript, assim como em qualquer outras. <\/span><br><span style=\"font-weight: 400;\">Vimos tamb\u00e9m os desafios de tratar <strong>imutabilidade<\/strong> e percebemos que, na maioria das vezes, <strong>c\u00f3digos declarativos:<\/strong><\/span><\/p>\n\n\n\n<ul class=\"wp-block-list\"><li><span style=\"font-weight: 400;\"><strong>s\u00e3o mais f\u00e1ceis de serem debugados;<\/strong><\/span><\/li><li><span style=\"font-weight: 400;\">possuem uma melhor testabilidade e uma maior corretude.<\/span><\/li><\/ul>\n\n\n\n<p><span style=\"font-weight: 400;\">Entender os conceitos da programa\u00e7\u00e3o funcional Javascript, antes de entender sua aplica\u00e7\u00e3o em qualquer linguagem \u00e9 fundamental. <\/span><br><span style=\"font-weight: 400;\">Por isso, se voc\u00ea tem interesse no assunto e gostaria de fazer estudos um pouco mais aprofundados, vou deixar aqui uma lista de artigos que me ajudaram em algum momento e que podem direcionar melhor a sua pesquisa:<\/span><\/p>\n\n\n\n<ul class=\"wp-block-list\"><li><span style=\"font-weight: 400;\">Learn You a Haskell for Great Good!!;<\/span><\/li><li><a href=\"https:\/\/maryrosecook.com\/blog\/post\/a-practical-introduction-to-functional-programming\" target=\"_blank\" rel=\"noopener noreferrer\"><span style=\"font-weight: 400;\">A practical introduction to functional programming<\/span><\/a><span style=\"font-weight: 400;\">;<\/span><\/li><li><a href=\"https:\/\/www.youtube.com\/channel\/UCO1cgjhGzsSYb1rsB4bFe4Q\" target=\"_blank\" rel=\"noopener noreferrer\"><span style=\"font-weight: 400;\">Funfunfunction<\/span><\/a><span style=\"font-weight: 400;\"> (canal no YouTube);<\/span><\/li><\/ul>\n\n\n\n<p><span style=\"font-weight: 400;\">Existem tamb\u00e9m algumas linguagens funcionais que compilam para Javascript e que s\u00e3o excelentes para praticar os conceitos desse paradigma:<\/span><\/p>\n\n\n\n<ul class=\"wp-block-list\"><li style=\"font-weight: 400;\"><a href=\"https:\/\/www.purescript.org\/\" target=\"_blank\" rel=\"noopener noreferrer\"><span style=\"font-weight: 400;\">PureScript<\/span><\/a><span style=\"font-weight: 400;\">;<\/span><\/li><li style=\"font-weight: 400;\"><a href=\"https:\/\/elm-lang.org\/\" target=\"_blank\" rel=\"noopener noreferrer\"><span style=\"font-weight: 400;\">Elm<\/span><\/a><span style=\"font-weight: 400;\">;<\/span><\/li><li style=\"font-weight: 400;\"><a href=\"https:\/\/clojurescript.org\/\" target=\"_blank\" rel=\"noopener noreferrer\"><span style=\"font-weight: 400;\">ClojureScript<\/span><\/a><span style=\"font-weight: 400;\">.<\/span><\/li><\/ul>\n\n\n\n<p>Curtiu o post? Quer ver mais conte\u00fados sobre o assunto por aqui? Deixe suas sugest\u00f5es nos coment\u00e1rios!<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<figure class=\"wp-block-image alignleft\"><img loading=\"lazy\" decoding=\"async\" width=\"225\" height=\"300\" src=\"https:\/\/www.blip.ai\/blog\/wp-content\/uploads\/2018\/11\/102-225x300-225x300.jpg\" alt=\"samuel post programa\u00e7\u00e3o funcional no javascript\" class=\"wp-image-5014\" title=\"-\"><\/figure>\n\n\n\n<p><br><strong>Samuel Martins<\/strong><br>Analista de Sistemas em Blip<br>\u00a0<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Leia mais:<\/h3>\n\n\n\n<h3 class=\"wp-block-heading\"><a href=\"https:\/\/www.blip.ai\/blog\/devs\/por-que-usar-typescript\/\" target=\"_blank\" rel=\"noreferrer noopener\"><span style=\"text-decoration: underline;\">Por que usar TypeScript como linguagem de programa\u00e7\u00e3o<\/span><\/a><\/h3>\n\n\n\n<h3 class=\"wp-block-heading\"><span style=\"text-decoration: underline;\"><a href=\"https:\/\/www.blip.ai\/blog\/devs\/performance-no-front-end\/\" target=\"_blank\" rel=\"noreferrer noopener\">Performance no front-end: como fazer a sua aplica\u00e7\u00e3o web voar<\/a><\/span><\/h3>\n\n\n\n<h3 class=\"wp-block-heading\"><span style=\"text-decoration: underline;\"><a href=\"https:\/\/www.blip.ai\/blog\/empresarial\/expectativas-das-empresas-com-ti\/\" target=\"_blank\" rel=\"noreferrer noopener\">Expectativas das empresas com TI: como apresentar o setor?<\/a><\/span><\/h3>\n","protected":false},"excerpt":{"rendered":"<p>Neste artigo, vamos tentar abordar de forma pr\u00e1tica (e por que n\u00e3o te\u00f3rica) o motivo pelo qual voc\u00ea, que usa Javascript no seu dia-a-dia de trabalho, deve come\u00e7ar a explorar os benef\u00edcios da programa\u00e7\u00e3o funcional Javascript&nbsp;em seus projetos.Antes de come\u00e7ar a abordar os recursos espec\u00edficos da linguagem de programa\u00e7\u00e3o funcional Javascript, temos de ter em [&hellip;]<\/p>\n","protected":false},"author":511,"featured_media":5529,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[22],"tags":[],"class_list":["post-5528","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-devs"],"lang":"pt","translations":{"pt":5528},"pll_sync_post":[],"_links":{"self":[{"href":"https:\/\/www.blip.ai\/blog\/wp-json\/wp\/v2\/posts\/5528","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.blip.ai\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.blip.ai\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.blip.ai\/blog\/wp-json\/wp\/v2\/users\/511"}],"replies":[{"embeddable":true,"href":"https:\/\/www.blip.ai\/blog\/wp-json\/wp\/v2\/comments?post=5528"}],"version-history":[{"count":0,"href":"https:\/\/www.blip.ai\/blog\/wp-json\/wp\/v2\/posts\/5528\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.blip.ai\/blog\/wp-json\/wp\/v2\/media\/5529"}],"wp:attachment":[{"href":"https:\/\/www.blip.ai\/blog\/wp-json\/wp\/v2\/media?parent=5528"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.blip.ai\/blog\/wp-json\/wp\/v2\/categories?post=5528"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.blip.ai\/blog\/wp-json\/wp\/v2\/tags?post=5528"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}