path: root/files/pt-br/learn/javascript/building_blocks/functions/index.html

---
title: Funções — blocos reutilizáveis de código
slug: Learn/JavaScript/Building_blocks/Functions
translation_of: Learn/JavaScript/Building_blocks/Functions
original_slug: Aprender/JavaScript/Elementos_construtivos/Functions
---
<div>{{LearnSidebar}}</div>

<div>{{PreviousMenuNext("Learn/JavaScript/Building_blocks/Looping_code","Learn/JavaScript/Building_blocks/Build_your_own_function", "Learn/JavaScript/Building_blocks")}}</div>

<p>Outro conceito essencial em código é função, que permitem que você armazene um pedaço de código que realiza uma simples tarefa dentro de um bloco, e então chama aquele código sempre que você precisar usá-lo com um curto comando — em vez de ter que escrever o mesmo código multiplas vezes. Neste artigo nós vamos explorar conceitos fundamentais por trás  das funções como sintaxe básica, como invocá-las e defini-las, escopo, e parâmetros.</p>

<table class="learn-box standard-table">
 <tbody>
  <tr>
   <th scope="row">Prerequisitos:</th>
   <td>Infrmática básica, um entendimento básico de HTML e CSS, <a href="/en-US/docs/Learn/JavaScript/First_steps">Primeiros passos em JavaScript</a>.</td>
  </tr>
  <tr>
   <th scope="row">Objetivo:</th>
   <td>Entender conceitos fundamentais por trás das funções em JavaScript.</td>
  </tr>
 </tbody>
</table>

<h2 id="Onde_eu_encontro_funções">Onde eu encontro funções?</h2>

<p>Em JavaScript, você encontrará funções em todos os lugares, de fato, nós vamos usar funções ao longo de todo o curso; nós só não falaremos sobre elas em damasia. Agora está na hora, contudo, para falarmos sobre funções explicitamente, e realmente explorar sua sintaxe.</p>

<div id="gt-res-content">
<div class="trans-verified-button-large" dir="ltr" id="gt-res-dir-ctr"><span class="short_text" id="result_box" lang="pt"><span>Praticamente sempre que você faz uso de um</span></span> uma estrutura JavaScript em que tem um par de parenteses — <code>()</code> — e você <strong>não</strong> está usando uma estrutura  embutida da linguagem como um <a href="/en-US/Learn/JavaScript/Building_blocks/Looping_code#The_standard_for_loop">for loop</a>, <a href="/en-US/Learn/JavaScript/Building_blocks/Looping_code#while_and_do_..._while">while or do...while loop</a>, ou <a href="/en-US/Learn/JavaScript/Building_blocks/conditionals#if_..._else_statements">if...else statement</a>, você está fazendo uso de uma função.</div>
</div>

<h2 id="Funções_embutidas_do_navegador">Funções embutidas do navegador</h2>

<p>Nós fizemos bastante uso de funções embutidas do navegador neste curso. Toda vez que manipulamos uma string de texto, por exemplo:</p>

<pre class="brush: js">var myText = 'I am a string';
var newString = myText.replace('string', 'sausage');
console.log(newString);
// the replace() string function takes a string,
// replaces one substring with another, and returns
// a new string with the replacement made</pre>

<p>Ou toda vez que manipulamos uma lista:</p>

<pre class="brush: js">var myArray = ['I', 'love', 'chocolate', 'frogs'];
var madeAString = myArray.join(' ');
console.log(madeAString);
// the join() function takes an array, joins
// all the array items together into a single
// string, and returns this new string</pre>

<p>Ou toda vez que nós geramos um número aleatório:</p>

<pre class="brush: js">var myNumber = Math.random();
// the random() function generates a random
// number between 0 and 1, and returns that
// number</pre>

<p>...nós usamos uma função!</p>

<div class="note">
<p><strong>Nota</strong>: Fique a vontade para inserir essas linhas no console JavaScript do navegador para refamiliarizar-se com suas funcionalidades, se necessário.</p>
</div>

<p>A linguagem JavaScript tem muitas funções embutidas que o permitem fazer coisas úteis sem que você mesmo tenha que escrever aquele código. De fato, alguns dos códigos que você está chamando quando você <strong>invoca</strong> (uma palavra rebuscada para rodar, ou executar) uma função embutida de navegador não poderia ser escrita em JavaScript — muitas dessa funções são chamadas a partes de código base do navegador, que é escrita grandemente em linguages de<span class="short_text" id="result_box" lang="pt"><span> sistema de baixo nível</span></span> como C++, não linguagem Web como JavaScript.</p>

<p>Tenha em mente que algumas funções embutidas de navegador não são parte do core da linguagem JavaScript — algumas são definidas como partes de APIs do navegador, que são construídas no topo da linguagem padão para prover ainda mais funcionalidades (recorra a <a href="/en-US/Learn/JavaScript/First_steps/What_is_JavaScript#So_what_can_it_really_do">esta seção inicial de nosso curso</a> para mais descrições). Nós olharemos o uso de APIs de navegador em mais detalhes em um módulo posterior.</p>

<h2 id="Funções_versus_métodos">Funções versus métodos</h2>

<p>Uma coisas que devemos esclarecer antes de seguir em frente — tecnicamente falando, funções embutidas de navegador não são funções — elas são <strong>métodos</strong>. Isso pode soar um pouco assustador e confuso, mas não se preocupe — as palavras funções e métodos são largamente intercambeáveis, ao menos para nossos propósitos, neste estágio de nosso aprendizado.</p>

<p>A distinção é que métodos são funções definidas dentro de objetos. Funções embutidas de navegador (métodos) e variáveis (que são chamadas <strong>propriedades</strong>) são armazenadas dentro de objetos estruturados, para tornar o código mais estruturado e fácil de manipular.</p>

<p>Você não precisa aprender sobre o<span class="short_text" id="result_box" lang="pt"><span> funcionamento interno</span></span> de objetos estruturados em JavaScript ainda — você pode esperar nosso módulo posterior que ensinará tudo sobre <span class="short_text" id="result_box" lang="pt"><span>funcionamento interno</span></span> de objetos, e como criar o seu próprio. Por hora, nós só queremos esclarecer qualquer confusão possível de método versus função — é pr<span class="short_text" id="result_box" lang="pt"><span>ovável que você encontre ambos</span></span> termos enquanto você olhar os recursos disponível pela  Web.</p>

<h2 id="Funções_personalizadas">Funções personalizadas</h2>

<p>Nós vimos também várias funções personalizadas no curso até agora — funções definidas em seu código, não dentro do navegador. Sempre que você viu um nome personalizado com parênteses logo após ele, você estava usando funções personalizadas. em nosso exemplo <a href="http://mdn.github.io/learning-area/javascript/building-blocks/loops/random-canvas-circles.html">random-canvas-circles.html</a> (veja também o <a href="https://github.com/mdn/learning-area/blob/master/javascript/building-blocks/loops/random-canvas-circles.html">código fonte</a> completo) de nosso <a href="/en-US/docs/Learn/JavaScript/Building_blocks/Looping_code">loops article</a>, nós incluimos a função personalizada <code>draw()</code> que era semelhante a essa:</p>

<pre class="brush: js">function draw() {
  ctx.clearRect(0,0,WIDTH,HEIGHT);
  for (var i = 0; i &lt; 100; i++) {
    ctx.beginPath();
    ctx.fillStyle = 'rgba(255,0,0,0.5)';
    ctx.arc(random(WIDTH), random(HEIGHT), random(50), 0, 2 * Math.PI);
    ctx.fill();
  }
}</pre>

<p>Esta função desenha 100 círculos aleatórios dentro de um elemento {{htmlelement("canvas")}}. Toda vez que queremos fazer isso, nós podemos simplesmente invocar a função com isto</p>

<pre class="brush: js">draw();</pre>

<p>ao invés de ter que escrever todo o código novamente todas as vezes que queremos repetí-lo. <span class="short_text" id="result_box" lang="pt"><span>E funções podem conter qualquer código que você gosta</span></span> — você pode até chamar outra função dentro das funções. A função acima por exemplo chama a função <code>random()</code> três vezes, o qual é definido pelo seguinte código:</p>

<pre class="brush: js">function random(number) {
  return Math.floor(Math.random()*number);
}</pre>

<p>Nós precisamos desta função porque a função embutida do navegador<a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math/random">Math.random()</a> só gera números decimais aleatórios entre 0 e 1. Nós queriamos um número aleatório inteiro entre 0 e um número especificado.</p>

<h2 id="Invocando_funções">Invocando funções</h2>

<p>Provavelmente você já tem conhecimento sobre iso agora, mas... para realmente usar uma função depois dela ter sido definida, você tem que rodá-la — ou invocá-la. Isso é feito ao se incluir o nome da função em algum lugar do código, seguido por parênteses.</p>

<pre class="brush: js">function myFunction() {
  alert('hello');
}

myFunction()
// Chama a função um vez</pre>

<h2 id="Funções_anônimas">Funções anônimas</h2>

<p>Você viu funções definidas e invocadas de maneiras ligeiramente diferentes. Até agora nós só criamos funções como esta:</p>

<pre class="brush: js">function myFunction() {
  alert('hello');
}</pre>

<p>Mas você também pode criar funções que não tem nome:</p>

<pre class="brush: js">function() {
  alert('hello');
}</pre>

<p>Isto é chamado<strong> Função anônima</strong> — não tem nome! E também não fará nada em si mesma. Você geralmente cria funções anônimas junto com um<span class="short_text" id="result_box" lang="pt"><span>  manipulador de eventos</span></span>, o exemplo a seguir poderia rodar o código dentro da função sempre que o botão associado é clicado:</p>

<pre class="brush: js">var myButton = document.querySelector('button');

myButton.onclick = function() {
  alert('hello');
}</pre>

<p>O exemplo acima requer que exista um elemento {{htmlelement("button")}} diponível na página para selecionar e clicar. Você já viu essa estrutura algumas vezes ao longo do curso, e aprenderá mais a respeito disso e o verá no próximo artigo.</p>

<p>Voce também pode atribuir uma função anônima para ser o valor de uma variável, por exemplo:</p>

<pre class="brush: js">var myGreeting = function() {
  alert('hello');
}</pre>

<p>Esta função agora poder ser invocada usando:</p>

<pre class="brush: js">myGreeting();</pre>

<p>Isso dá efetivamente um nome a função; você também pode atribuir uma função para ser o valor de múltiplas variáveis , por exemplo:</p>

<pre class="brush: js">var anotherGreeting = function() {
  alert('hello');
}</pre>

<p>Esta função agora pode ser invocada usando qualquer das funções abaixo</p>

<pre class="brush: js">myGreeting();
anotherGreeting();</pre>

<p>Mas isso pode simplesmente ser confuso, então não faça! Quando criar funções, é melhor ficar com apenas uma forma:</p>

<pre class="brush: js">function myGreeting() {
  alert('hello');
}</pre>

<p>De modo geral você irá usar funções anônimas só para rodar um código em resposta a um disparo de evento — como um botão ao ser clicado — usando um gerenciador de eventos. Novamente, Isso é algo parecido com:</p>

<pre class="brush: js">myButton.onclick = function() {
  alert('hello');
  // Eu posso colocar código aqui
  // dentro o quanto eu quiser
}</pre>

<h2 id="Parâmetro_de_funções">Parâmetro de funções</h2>

<p>Algumas funções requerem <strong>parâmetros</strong> <span class="short_text" id="result_box" lang="pt"><span>a ser especificado quando você está invocando-os</span></span> — esses são valores que precisam ser inclusos dentro dos parênteses da função, o que é necessário para fazer seu trabalho apropriado.</p>

<div class="note">
<p><strong>Nota</strong>: Parâmetros algumas vezes são chamados de argumentos, propriedades, ou até atributos.</p>
</div>

<p>Como um exemplo, a função embutida de navegador <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math/random">Math.random()</a> não requer nenhum parâmetro. Quando chamada, ela sempre retorna um número aleatório entre 0 e 1:</p>

<pre class="brush: js">var myNumber = Math.random();</pre>

<p>A função embutida de navegador <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/replace">replace()</a>  entretanto precisa de dois parâmetros — a substring para encotrar a string principal, e a substring para ser substituida com ela:</p>

<pre class="brush: js">var myText = 'I am a string';
var newString = myText.replace('string', 'sausage');</pre>

<div class="note">
<p><strong>Nota</strong>: Quando você precisa especificar multiplos parâmetros, eles são separados por vígulas.</p>
</div>

<p>Nota-se também que algumas vezes os parâmetros são opcionais — você não tem que especificá-los. Se você não o faz, a função geralmente adota algum tipo de comportamento padrão. Como exemplo, a função <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/join">join()</a> tem parâmetro opcional:</p>

<pre class="brush: js">var myArray = ['I', 'love', 'chocolate', 'frogs'];
var madeAString = myArray.join(' ');
// returns 'I love chocolate frogs'
var madeAString = myArray.join();
// returns 'I,love,chocolate,frogs'</pre>

<p>Se nenhum parâmetro é incluído para especificar a combinação/delimitação de caractere, uma vírgula é usada por padrão.</p>

<h2 id="Função_escopo_e_conflitos">Função escopo e conflitos</h2>

<p>vamos falar um pouco sobre {{glossary("scope")}} — um conceito muito importante quando lidamos com funções. Quando você cria uma função, as variáveis e outras coisas definidas dentro da função ficam dentro de seu próprio e separado <strong>escopo</strong>, significando que eles estão trancados a parte em seu próprio compartimento, inacesível de dentro de outras funções ou de código fora das funções.</p>

<p>O mais alto nível fora de todas suas funções é chamado de <strong>escopo global</strong>. Valores definidos no escopo global são acessíveis em todo lugar do código.</p>

<p>JavaScript é configurado assim por várias razões — mas principalmente por segurança e organização. Algumas vezes você não quer que variáveis sejam acessadas de todo lugar no código — scripts externos que você chama de algum outro lugar podem iniciar uma bagunça no seu código e causar problemas porque eles estão usando os mesmos nomes de variáveis que em outras partes do código, provocando conflitos. Isso pode ser feito maliciosamente, ou só por acidente.</p>

<p>Por exemplo, digamos que você tem um arquivo HTML que está chamando dois arquivos JavaScript externos, e ambos tem uma variável e uma função definidos que usam o mesmo nome:</p>

<pre class="brush: html">&lt;!-- Excerpt from my HTML --&gt;
&lt;script src="first.js"&gt;&lt;/script&gt;
&lt;script src="second.js"&gt;&lt;/script&gt;
&lt;script&gt;
  greeting();
&lt;/script&gt;</pre>

<pre class="brush: js">// first.js
var name = 'Chris';
function greeting() {
  alert('Olá ' + name + ': bem-vindo a nossa compania.');
}</pre>

<pre class="brush: js">// second.js
var name = 'Zaptec';
function greeting() {
  alert('Nossa compania é chamada ' + name + '.');
}</pre>

<p>Ambas as funções que você quer chamar são chamadas <code>greeting()</code>, mas você só pode acessar o arquivo <code>second.js</code> da função <code>greeting()</code>  — Ele é aplicado no HTML depois no código fonte, então suas variáveis e funções sobrescrevem as de <code>first.js</code>.</p>

<div class="note">
<p><strong>Nota</strong>: Você pode ver este exemplo <a href="http://mdn.github.io/learning-area/javascript/building-blocks/functions/conflict.html">rodando no GitHub</a> (veja também <a href="https://github.com/mdn/learning-area/tree/master/javascript/building-blocks/functions">o código fonte</a>).</p>
</div>

<p>Manter parte de seus código trancada em funções evita tais problemas, e é considerado boa prática.</p>

<p>Parece um pouco com um zoológico. Os leões, zebras, tigres, e pinguins são mantidos em seus próprios cercados, e só tem acesso as coisas dentro de seu cercado — da mesma maneira que escopos de função. Se eles forem capazes de entrar em outros cercados, problemas podem acontecer. No melhor caso, diferentes animais poderiam sentir-se ralmente desconfortáveis dentro de habitats não familiares — um leão e um tigre poderiam sentir-se muito mal dentro de um úmido e gelado terreno. No pior caso, os leões e tigres poderiam tentar comer os pinguins!</p>

<p><img alt="" src="https://mdn.mozillademos.org/files/14079/MDN-mozilla-zoo.png" style="display: block; margin: 0 auto;"></p>

<p>O zelador do zoológico é como o escopo global — ele ou ela tem as chaves para acessar cada cercado, reabastecer comida, tratar animais doentes, etc.</p>

<h3 id="Aprendizado_ativo_Brincando_com_o_escopo">Aprendizado ativo: Brincando com o escopo</h3>

<p>Vamos observar um exemplo real para mostrar escopo.</p>

<ol>
 <li>Primeiro, faça uma cópia local de nosso exmplo <a href="https://github.com/mdn/learning-area/blob/master/javascript/building-blocks/functions/function-scope.html">function-scope.html</a>. Isto contém duas funções chamadas <code>a()</code> e <code>b()</code>, e três variáveis — <code>x</code>, <code>y</code>, e <code>z</code> — duas das quais estão definidas dentro de funções, e uma no escopo global. Ele também contém uma terceira função chamada <code>output()</code>, que leva um simples parâmetro e mostra-o em um parágrafo na página.</li>
 <li>Abra o exemplo em um navegador e em um editor de textos.</li>
 <li>Abra o console JavaScript no developer tools de seu navegador. No console  JavaScript, digite o seguinte comando:
  <pre class="brush: js">output(x);</pre>
  Você deve ver o valor da variável <code>x</code> exibida na página.</li>
 <li>Agora tente digitar o seguinte no seu console:
  <pre class="brush: js">output(y);
output(z);</pre>
  Ambos dever retornar um erro com as seguintes linhas "<a href="/en-US/docs/Web/JavaScript/Reference/Errors/Not_defined">ReferenceError: y is not defined</a>". Por que isso? Porque o escopo da função — <code>y</code> e <code>z</code> estão trancadas dentro das funções <code>a()</code> e  <code>b()</code>, então <code>output()</code> não pode acessá-las quando chamadas do escopo global.</li>
 <li>Contudo, que tal chamá-las de dentro de outra função? Tente editar <code>a()</code> e <code>b()</code> para que fiquem desta forma:
  <pre class="brush: js">function a() {
  var y = 2;
  output(y);
}

function b() {
  var z = 3;
  output(z);
}</pre>
  Salve o código e atualize o navegador, então tente chamar as funções <code>a()</code> e <code>b()</code> do console JavaScript:

  <pre class="brush: js">a();
b();</pre>
  Você verá os valores de <code>y</code> e <code>z</code> mostrados na página. <span class="short_text" id="result_box" lang="pt"><span>Isso funciona bem</span></span>, desde que a função <code>output()</code> está sendo chamada dentro de outra função — <span id="result_box" lang="pt"><span>no mesmo escopo que as variáveis que estam imprimindo são definidas</span></span>, em cada caso. <code>output()</code> em si é acessível de qualquer lugar, <span class="short_text" id="result_box" lang="pt"><span>como é definido no escopo global.</span></span></li>
 <li>Agora tente atualizar seu código como este:
  <pre class="brush: js">function a() {
  var y = 2;
  output(x);
}

function b() {
  var z = 3;
  output(x);
}</pre>
  Salve e atualize novamente, e tente isso novamente em seu console JavaScript:         </li>
 <li>
  <pre class="brush: js">a();
b();</pre>
  Ambas chamadas de <code>a()</code> e <code>b()</code> devem mostrar o valor de x — 1. Isso dá certo porque até mesmo a chamada de  <code>output()</code> não está no mesmo escopo em que <code>x</code> é definido, <code>x</code> é uma variável global então é disponível dentro de todo código, em toda parte.</li>
 <li>Finalmente, tente atualizar o código o seguinte:
  <pre class="brush: js">function a() {
  var y = 2;
  output(z);
}

function b() {
  var z = 3;
  output(y);
}</pre>
  Salve e atualize novamente, e tente isso novamente em seu console JavaScript: </li>
 <li>
  <pre class="brush: js">a();
b();</pre>
  Desta vez as chamadas de <code>a()</code> e <code>b()</code> retornaram o irritante erro "<a href="/pt-BR/docs/Web/JavaScript/Reference/Errors/Not_defined">ReferenceError: z is not defined</a>" — isto porque a chamada de <code>output()</code> e as variáveis que eles estão tentando imprimir não estão definidas dentro do mesmo escopo das funções — as variáveis são efetivamente invisíveis aquelas chamadas de função.</li>
</ol>

<div class="note">
<p><strong>Nota</strong>: As mesmas regras de escopo não se aplicam a laços (ex.: <code>for() { ... }</code>) e blocos condicionais (ex.: <code>if() { ... }</code>) — eles parecem muito semelhantes, mas eles não são a mesma coisa! Tome cuidado para não confudir-se.</p>
</div>

<div class="note">
<p><strong>Nota</strong>: O erro <a href="/en-US/docs/Web/JavaScript/Reference/Errors/Not_defined">ReferenceError: "x" is not defined</a> é um dos mais comuns que você encontrará. Se você receber este erro e tem certeza que definiu a variável em questão, cheque em que escopo ela está.</p>
</div>

<ul>
</ul>

<h3 id="Funções_dentro_de_funções">Funções dentro de funções</h3>

<p>Tenha em mente que você pode chamar uma função de qualquer lugar, até mesmo dentro de outra função.  Isso é frenquentemente usado para manter o código organizado — se você tem uma função grande e complexa, é mais fácil de entendê-la se você quebrá-la em várias subfunções:</p>

<pre class="brush: js">function myBigFunction() {
  var myValue;

  subFunction1();
  subFunction2();
  subFunction3();
}

function subFunction1() {
  console.log(myValue);
}

function subFunction2() {
  console.log(myValue);
}

function subFunction3() {
  console.log(myValue);
}
</pre>

<p>Apenas certifique-se que os valores usados dentro da função estão apropriadamente no escopo. O exemplo acima deve lançar um erro <code>ReferenceError: myValue is not defined</code>, porque apesar da variável <code>myValue</code> estar definida no mesmo escopo da chamda da função, ela não está definida dentro da definição da função — o código real que está rodando quando as funções são chamadas. Para fazer isso funcionar, você deveria passar o valor dentro da função como um parâmetro, desta forma:</p>

<pre class="brush: js">function myBigFunction() {
  var myValue = 1;

  subFunction1(myValue);
  subFunction2(myValue);
  subFunction3(myValue);
}

function subFunction1(value) {
  console.log(value);
}

function subFunction2(value) {
  console.log(value);
}

function subFunction3(value) {
  console.log(value);
}</pre>

<h2 id="Conclusão">Conclusão</h2>

<p>Este arquivo explorou os conceitos fundamentais por trás das funções, pavimentando o caminho para o próximo no qual nos tornamos práticos e o levamos através de passos para construir suas próprias funções personalizadas.</p>

<h2 id="Veja_também">Veja também</h2>

<ul>
 <li><a href="/en-US/docs/Web/JavaScript/Guide/Functions">Guia detalhado de funções</a> — cobre algumas características avançadas não includas aqui.</li>
 <li><a href="/en-US/docs/Web/JavaScript/Reference/Functions">Referências de funções</a></li>
 <li><a href="/en-US/docs/Web/JavaScript/Reference/Functions/Default_parameters">Parâmetros padrão</a>, <a href="/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions">Funções de flexa</a> — referências de conceito avançado</li>
</ul>

<ul>
</ul>

<p>{{PreviousMenuNext("Learn/JavaScript/Building_blocks/Looping_code","Learn/JavaScript/Building_blocks/Build_your_own_function", "Learn/JavaScript/Building_blocks")}}</p>

<h2 id="Neste_módulo">Neste módulo</h2>

<ul>
 <li><a href="/en-US/docs/Learn/JavaScript/Building_blocks/conditionals">Making decisions in your code — conditionals</a></li>
 <li><a href="/en-US/docs/Learn/JavaScript/Building_blocks/Looping_code">Looping code</a></li>
 <li><a href="/en-US/docs/Learn/JavaScript/Building_blocks/Functions">Functions — reusable blocks of code</a></li>
 <li><a href="/en-US/docs/Learn/JavaScript/Building_blocks/Build_your_own_function">Build your own function</a></li>
 <li><a href="/en-US/docs/Learn/JavaScript/Building_blocks/Return_values">Function return values</a></li>
 <li><a href="/en-US/docs/Learn/JavaScript/Building_blocks/Events">Introduction to events</a></li>
 <li><a href="/en-US/docs/Learn/JavaScript/Building_blocks/Image_gallery">Image gallery</a></li>
</ul>