Web-Dev-For-Beginners/translations/br/2-js-basics/2-functions-methods

Noções Básicas de JavaScript: Métodos e Funções

Sketchnote por Tomomi Imura

Quiz Pré-Aula

Quiz pré-aula

Escrever o mesmo código repetidamente é uma das frustrações mais comuns na programação. As funções resolvem esse problema ao permitir que você agrupe o código em blocos reutilizáveis. Pense nas funções como as peças padronizadas que tornaram a linha de montagem de Henry Ford revolucionária – uma vez que você cria um componente confiável, pode usá-lo onde for necessário sem precisar reconstruí-lo do zero.

As funções permitem que você agrupe partes do código para reutilizá-las ao longo do seu programa. Em vez de copiar e colar a mesma lógica em todos os lugares, você pode criar uma função uma vez e chamá-la sempre que necessário. Essa abordagem mantém seu código organizado e facilita muito as atualizações.

Nesta lição, você aprenderá como criar suas próprias funções, passar informações para elas e obter resultados úteis de volta. Você descobrirá a diferença entre funções e métodos, aprenderá abordagens modernas de sintaxe e verá como as funções podem trabalhar com outras funções. Vamos construir esses conceitos passo a passo.

🎥 Clique na imagem acima para assistir a um vídeo sobre métodos e funções.

Você pode acessar esta lição no Microsoft Learn!

Funções

Uma função é um bloco de código independente que realiza uma tarefa específica. Ela encapsula uma lógica que você pode executar sempre que necessário.

Em vez de escrever o mesmo código várias vezes ao longo do seu programa, você pode agrupá-lo em uma função e chamá-la sempre que precisar. Essa abordagem mantém seu código limpo e facilita muito as atualizações. Imagine o desafio de manutenção se você precisasse alterar uma lógica espalhada por 20 locais diferentes no seu código.

Dar nomes descritivos às suas funções é essencial. Uma função bem nomeada comunica claramente seu propósito – quando você vê cancelTimer(), entende imediatamente o que ela faz, assim como um botão claramente rotulado indica exatamente o que acontecerá ao clicar nele.

Criando e chamando uma função

Vamos examinar como criar uma função. A sintaxe segue um padrão consistente:

function nameOfFunction() { // function definition
 // function definition/body
}

Vamos detalhar isso:

• A palavra-chave function diz ao JavaScript "Ei, estou criando uma função!"
• nameOfFunction é onde você dá um nome descritivo à sua função
• Os parênteses () são onde você pode adicionar parâmetros (vamos falar sobre isso em breve)
• As chaves {} contêm o código real que será executado quando você chamar a função

Vamos criar uma função simples de saudação para ver isso em ação:

function displayGreeting() {
  console.log('Hello, world!');
}

Essa função imprime "Hello, world!" no console. Depois de defini-la, você pode usá-la quantas vezes for necessário.

Para executar (ou "chamar") sua função, escreva o nome dela seguido de parênteses. O JavaScript permite que você defina sua função antes ou depois de chamá-la – o motor do JavaScript cuidará da ordem de execução.

// calling our function
displayGreeting();

Quando você executa essa linha, ela executa todo o código dentro da sua função displayGreeting, exibindo "Hello, world!" no console do navegador. Você pode chamar essa função repetidamente.

Nota: Você tem usado métodos ao longo dessas lições. console.log() é um método – essencialmente uma função que pertence ao objeto console. A principal diferença é que os métodos estão vinculados a objetos, enquanto as funções são independentes. Muitos desenvolvedores usam esses termos de forma intercambiável em conversas informais.

Melhores práticas para funções

Aqui estão algumas dicas para ajudá-lo a escrever boas funções:

• Dê nomes claros e descritivos às suas funções – seu eu do futuro vai agradecer!
• Use camelCase para nomes com várias palavras (como calculateTotal em vez de calculate_total)
• Mantenha cada função focada em fazer uma coisa bem feita

Passando informações para uma função

Nossa função displayGreeting é limitada – ela só pode exibir "Hello, world!" para todos. Os parâmetros nos permitem tornar as funções mais flexíveis e úteis.

Parâmetros funcionam como espaços reservados onde você pode inserir valores diferentes cada vez que usar a função. Dessa forma, a mesma função pode trabalhar com informações diferentes em cada chamada.

Você lista os parâmetros dentro dos parênteses ao definir sua função, separando múltiplos parâmetros com vírgulas:

function name(param, param2, param3) {

}

Cada parâmetro funciona como um espaço reservado – quando alguém chama sua função, ele fornece valores reais que são inseridos nesses espaços.

Vamos atualizar nossa função de saudação para aceitar o nome de alguém:

function displayGreeting(name) {
  const message = `Hello, ${name}!`;
  console.log(message);
}

Perceba como estamos usando crases (`) e ${} para inserir o nome diretamente na nossa mensagem – isso é chamado de template literal, e é uma maneira muito prática de construir strings com variáveis misturadas.

Agora, ao chamar nossa função, podemos passar qualquer nome:

displayGreeting('Christopher');
// displays "Hello, Christopher!" when run

O JavaScript pega a string 'Christopher', atribui ao parâmetro name e cria a mensagem personalizada "Hello, Christopher!"

Valores padrão

E se quisermos tornar alguns parâmetros opcionais? É aí que os valores padrão são úteis!

Digamos que queremos que as pessoas possam personalizar a palavra de saudação, mas, se não especificarem uma, usaremos "Hello" como padrão. Você pode configurar valores padrão usando o sinal de igual, assim como ao definir uma variável:

function displayGreeting(name, salutation='Hello') {
  console.log(`${salutation}, ${name}`);
}

Aqui, name ainda é obrigatório, mas salutation tem um valor de backup 'Hello' caso ninguém forneça uma saudação diferente.

Agora podemos chamar essa função de duas maneiras diferentes:

displayGreeting('Christopher');
// displays "Hello, Christopher"

displayGreeting('Christopher', 'Hi');
// displays "Hi, Christopher"

Na primeira chamada, o JavaScript usa o padrão "Hello", já que não especificamos uma saudação. Na segunda chamada, ele usa nosso "Hi" personalizado. Essa flexibilidade torna as funções adaptáveis a diferentes cenários.

Valores de retorno

Nossas funções até agora apenas imprimiram mensagens no console, mas e se você quiser que uma função calcule algo e lhe devolva o resultado?

É aí que entram os valores de retorno. Em vez de apenas exibir algo, uma função pode lhe devolver um valor que você pode armazenar em uma variável ou usar em outras partes do seu código.

Para enviar um valor de volta, você usa a palavra-chave return seguida do que deseja retornar:

return myVariable;

Aqui está algo importante: quando uma função encontra uma instrução return, ela para imediatamente de executar e envia esse valor de volta para quem a chamou.

Vamos modificar nossa função de saudação para retornar a mensagem em vez de imprimi-la:

function createGreetingMessage(name) {
  const message = `Hello, ${name}`;
  return message;
}

Agora, em vez de imprimir a saudação, essa função cria a mensagem e a devolve para nós.

Para usar o valor retornado, podemos armazená-lo em uma variável como qualquer outro valor:

const greetingMessage = createGreetingMessage('Christopher');

Agora greetingMessage contém "Hello, Christopher" e podemos usá-lo em qualquer lugar do nosso código – para exibi-lo em uma página da web, incluí-lo em um e-mail ou passá-lo para outra função.

Funções como parâmetros para funções

Funções podem ser passadas como parâmetros para outras funções. Embora esse conceito possa parecer complexo inicialmente, é um recurso poderoso que permite padrões de programação flexíveis.

Esse padrão é muito comum quando você quer dizer "quando algo acontecer, faça outra coisa". Por exemplo, "quando o temporizador terminar, execute este código" ou "quando o usuário clicar no botão, chame esta função".

Vamos olhar para setTimeout, que é uma função embutida que espera um certo tempo e então executa algum código. Precisamos dizer a ela qual código executar – caso perfeito para passar uma função!

Experimente este código – após 3 segundos, você verá uma mensagem:

function displayDone() {
  console.log('3 seconds has elapsed');
}
// timer value is in milliseconds
setTimeout(displayDone, 3000);

Perceba como passamos displayDone (sem parênteses) para setTimeout. Não estamos chamando a função nós mesmos – estamos entregando-a para setTimeout e dizendo "chame esta em 3 segundos."

Funções anônimas

Às vezes, você precisa de uma função para apenas uma coisa e não quer dar um nome a ela. Pense nisso – se você só vai usar uma função uma vez, por que encher seu código com um nome extra?

O JavaScript permite criar funções anônimas – funções sem nomes que você pode definir exatamente onde precisa delas.

Aqui está como podemos reescrever nosso exemplo do temporizador usando uma função anônima:

setTimeout(function() {
  console.log('3 seconds has elapsed');
}, 3000);

Isso alcança o mesmo resultado, mas a função é definida diretamente dentro da chamada de setTimeout, eliminando a necessidade de uma declaração de função separada.

Funções de seta

O JavaScript moderno tem uma maneira ainda mais curta de escrever funções chamada funções de seta. Elas usam => (que parece uma seta – entendeu?) e são super populares entre os desenvolvedores.

As funções de seta permitem que você pule a palavra-chave function e escreva um código mais conciso.

Aqui está nosso exemplo do temporizador usando uma função de seta:

setTimeout(() => {
  console.log('3 seconds has elapsed');
}, 3000);

Os () são onde os parâmetros iriam (vazio neste caso), depois vem a seta =>, e finalmente o corpo da função entre chaves. Isso fornece a mesma funcionalidade com uma sintaxe mais concisa.

Quando usar cada estratégia

Quando você deve usar cada abordagem? Uma diretriz prática: se você vai usar a função várias vezes, dê um nome a ela e defina-a separadamente. Se for para um uso específico, considere uma função anônima. Tanto as funções de seta quanto a sintaxe tradicional são escolhas válidas, embora as funções de seta sejam predominantes em bases de código modernas de JavaScript.

---

🚀 Desafio

Você consegue explicar em uma frase a diferença entre funções e métodos? Tente!

Desafio do Agente do GitHub Copilot 🚀

Use o modo Agente para completar o seguinte desafio:

Descrição: Crie uma biblioteca de utilitários matemáticos que demonstre diferentes conceitos de funções abordados nesta lição, incluindo parâmetros, valores padrão, valores de retorno e funções de seta.

Prompt: Crie um arquivo JavaScript chamado mathUtils.js que contenha as seguintes funções:

1. Uma função add que recebe dois parâmetros e retorna sua soma
2. Uma função multiply com valores padrão para os parâmetros (o segundo parâmetro tem valor padrão de 1)
3. Uma função de seta square que recebe um número e retorna seu quadrado
4. Uma função calculate que aceita outra função como parâmetro e dois números, aplicando a função a esses números
5. Demonstre a chamada de cada função com casos de teste apropriados

Saiba mais sobre o modo agente aqui.

Quiz Pós-Aula

Quiz pós-aula

Revisão e Autoestudo

Vale a pena ler um pouco mais sobre funções de seta, já que elas estão sendo cada vez mais usadas em bases de código. Pratique escrever uma função e depois reescrevê-la com essa sintaxe.

Tarefa

Divirta-se com Funções

---

Aviso Legal:
Este documento foi traduzido usando o serviço de tradução por IA Co-op Translator. Embora nos esforcemos para garantir a precisão, esteja ciente de que traduções automatizadas podem conter erros ou imprecisões. O documento original em seu idioma nativo deve ser considerado a fonte oficial. Para informações críticas, recomenda-se a tradução profissional feita por humanos. Não nos responsabilizamos por quaisquer mal-entendidos ou interpretações incorretas decorrentes do uso desta tradução.