<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
	>

<channel>
	<title>Blog de desenvolvimento da Milfont Consulting, Client e Server-side &#187; Programação funcional</title>
	<atom:link href="http://www.milfont.org/tech/category/linguagens/programacao-funcional/feed/" rel="self" type="application/rss+xml" />
	<link>http://www.milfont.org/tech</link>
	<description>Blog da Comunidade Milfont Consulting, uma empresa especializada em desenvolvimento Web, principalmente Javascript, node.js e muito Javascript.</description>
	<lastBuildDate>Thu, 26 Jan 2012 11:30:28 +0000</lastBuildDate>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
	<generator>http://wordpress.org/?v=3.3</generator>
		<item>
		<title>Currying em Javascript</title>
		<link>http://www.milfont.org/tech/2008/03/02/currying-em-javascript/</link>
		<comments>http://www.milfont.org/tech/2008/03/02/currying-em-javascript/#comments</comments>
		<pubDate>Sun, 02 Mar 2008 18:43:21 +0000</pubDate>
		<dc:creator>cmilfont</dc:creator>
				<category><![CDATA[JavaScript]]></category>
		<category><![CDATA[Programação funcional]]></category>
		<category><![CDATA[Web Development]]></category>
		<category><![CDATA[Currying]]></category>

		<guid isPermaLink="false">http://www.milfont.org/tech/2008/03/02/currying-em-javascript/</guid>
		<description><![CDATA[Uma característica de linguagens funcionais muito usada em Javascript é a técnica de Currying, a grosso modo de explicar, usada para transformar uma função com n argumentos em uma outra função com argumentos simples. 1 2 3 4 5 6 7 8 9 function pow&#40;i, j&#41; &#123; return i * j; &#125; &#160; function square [...]]]></description>
			<content:encoded><![CDATA[<p>Uma característica de linguagens funcionais muito usada em Javascript é a técnica de  <a href="http://en.wikipedia.org/wiki/Currying">Currying</a>, a grosso modo de explicar, usada para transformar uma função com n argumentos em uma outra função com argumentos simples.</p>

<div class="wp_syntax"><table><tr><td class="line_numbers"><pre>1
2
3
4
5
6
7
8
9
</pre></td><td class="code"><pre class="javascript" style="font-family:monospace;"> <span style="color: #003366; font-weight: bold;">function</span> pow<span style="color: #009900;">&#40;</span>i<span style="color: #339933;">,</span> j<span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span> 
     <span style="color: #000066; font-weight: bold;">return</span> i <span style="color: #339933;">*</span> j<span style="color: #339933;">;</span>
 <span style="color: #009900;">&#125;</span>
&nbsp;
 <span style="color: #003366; font-weight: bold;">function</span> square <span style="color: #009900;">&#40;</span>k<span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
     <span style="color: #000066; font-weight: bold;">return</span> pow<span style="color: #009900;">&#40;</span>k<span style="color: #339933;">,</span> <span style="color: #CC0000;">2</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
 <span style="color: #009900;">&#125;</span>
&nbsp;
 <span style="color: #000066;">alert</span><span style="color: #009900;">&#40;</span>square<span style="color: #009900;">&#40;</span><span style="color: #CC0000;">6</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span></pre></td></tr></table></div>

<p>Veja nesse exemplo que uma função denominada de <strong>pow</strong> (que multiplica dois elementos) é usada na função <strong>square</strong> (que multiplica sempre um elemento por 2) de forma que você tem o uso de primeira pela segunda com uma redução de parâmetros. Essa técnica é usada nas funções de alta ordem como Fold, Map, etc.</p>

<div class="wp_syntax"><table><tr><td class="line_numbers"><pre>1
2
3
4
5
6
7
8
</pre></td><td class="code"><pre class="javascript" style="font-family:monospace;">Array.<span style="color: #660066;">prototype</span>.<span style="color: #660066;">each</span> <span style="color: #339933;">=</span> <span style="color: #003366; font-weight: bold;">function</span><span style="color: #009900;">&#40;</span>fn<span style="color: #009900;">&#41;</span><span style="color: #009900;">&#123;</span>
	<span style="color: #000066; font-weight: bold;">for</span><span style="color: #009900;">&#40;</span><span style="color: #003366; font-weight: bold;">var</span> i <span style="color: #339933;">=</span> <span style="color: #CC0000;">0</span><span style="color: #339933;">,</span> len <span style="color: #339933;">=</span> <span style="color: #000066; font-weight: bold;">this</span>.<span style="color: #660066;">length</span><span style="color: #339933;">;</span> i<span style="color: #339933;">&lt;</span>len<span style="color: #339933;">;</span> <span style="color: #339933;">++</span>i <span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
		fn.<span style="color: #660066;">call</span><span style="color: #009900;">&#40;</span><span style="color: #000066; font-weight: bold;">this</span><span style="color: #339933;">,</span><span style="color: #000066; font-weight: bold;">this</span><span style="color: #009900;">&#91;</span>i<span style="color: #009900;">&#93;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
	<span style="color: #009900;">&#125;</span>
<span style="color: #009900;">&#125;</span>
<span style="color: #003366; font-weight: bold;">var</span> multiplicar <span style="color: #339933;">=</span> <span style="color: #003366; font-weight: bold;">function</span><span style="color: #009900;">&#40;</span>i<span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span> <span style="color: #000066;">alert</span><span style="color: #009900;">&#40;</span>i <span style="color: #339933;">*</span> <span style="color: #CC0000;">2</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span> <span style="color: #009900;">&#125;</span>
<span style="color: #003366; font-weight: bold;">var</span> teste <span style="color: #339933;">=</span> <span style="color: #009900;">&#91;</span><span style="color: #CC0000;">1</span><span style="color: #339933;">,</span><span style="color: #CC0000;">2</span><span style="color: #339933;">,</span><span style="color: #CC0000;">3</span><span style="color: #009900;">&#93;</span><span style="color: #339933;">;</span>
teste.<span style="color: #660066;">each</span><span style="color: #009900;">&#40;</span>multiplicar<span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span></pre></td></tr></table></div>

<p>Exemplo acima usando uma função que aplica outra função para cada elemento de um array.<br />
Essa técnica ficou popular mesmo sendo usada junto a <a href="http://en.wikipedia.org/wiki/Closure_(computer_science)">Closure</a> que precisam de funções de callback para processar um resultado de outra função.</p>
<p>Explicando isso em código, teríamos Currying da seguinte forma:</p>

<div class="wp_syntax"><table><tr><td class="line_numbers"><pre>1
2
3
4
5
6
7
8
9
10
11
</pre></td><td class="code"><pre class="javascript" style="font-family:monospace;"> <span style="color: #003366; font-weight: bold;">function</span> atualizar<span style="color: #009900;">&#40;</span>id<span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
     <span style="color: #000066; font-weight: bold;">return</span> <span style="color: #003366; font-weight: bold;">function</span><span style="color: #009900;">&#40;</span>resposta<span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
          document.<span style="color: #660066;">getElementById</span><span style="color: #009900;">&#40;</span>id<span style="color: #009900;">&#41;</span>.<span style="color: #660066;">innerHTML</span> <span style="color: #339933;">=</span> resposta<span style="color: #339933;">;</span>
     <span style="color: #009900;">&#125;</span><span style="color: #339933;">;</span>
 <span style="color: #009900;">&#125;</span>
&nbsp;
 <span style="color: #003366; font-weight: bold;">function</span> processar<span style="color: #009900;">&#40;</span>msg<span style="color: #339933;">,</span> fn<span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
     fn<span style="color: #009900;">&#40;</span>msg<span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
 <span style="color: #009900;">&#125;</span><span style="color: #339933;">;</span>
&nbsp;
processar<span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'testando currying em ação'</span><span style="color: #339933;">,</span> atualizar<span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'area'</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span></pre></td></tr></table></div>

<p>Na linha 1, temos a declaração de uma função denominada <em><strong>atualizar</strong></em> que recebe um parâmetro em seu construtor que será o <strong>id</strong> de um elemento qualquer. A chamada a essa função provoca o retorno de uma outra função declarada internamente na linha 3. Essa função interna recebe também um argumento e a função dela é adicionar esse argumento no conteúdo do elemento passado como parâmetro na função inicial. Criei uma função chamada processar apenas para aplicar uma mensagem a um função, será usada para fazer a mágica do Currying aqui. Veja na linha 15 que usei a função processar para submeter uma frase (primeiro argumento) na função atualizar (segundo argumento), passando para ela o id de um elemento como um DIV.</p>
<p>Observe que esse código é muito comum em frameworks ajax, um exemplo claro disso seria como o DWR trabalha.</p>

<div class="wp_syntax"><table><tr><td class="line_numbers"><pre>1
2
3
4
5
</pre></td><td class="code"><pre class="javascript" style="font-family:monospace;"> <span style="color: #003366; font-weight: bold;">function</span> callback<span style="color: #009900;">&#40;</span>retorno<span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
     <span style="color: #000066;">alert</span><span style="color: #009900;">&#40;</span>retorno<span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
 <span style="color: #009900;">&#125;</span>
&nbsp;
DWRInterface.<span style="color: #660066;">metodo</span><span style="color: #009900;">&#40;</span>callback<span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span></pre></td></tr></table></div>

<p>Aqui aplicamos a função callback na função &#8220;metodo&#8221; que é um método do objeto DWRInterface controlado pelo framework DWR. DEssa forma quando o DWR processar a requisição ajax, submete o retorno vindo do servidor para a função callback que o recebe como parâmetro.<br />
Vamos investigar outras características de linguagens funcionais nos próximos artigos.</p>
]]></content:encoded>
			<wfw:commentRss>http://www.milfont.org/tech/2008/03/02/currying-em-javascript/feed/</wfw:commentRss>
		<slash:comments>8</slash:comments>
		</item>
	</channel>
</rss>

