24 KiB

Raw Blame History Unescape Escape

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

Sketchnote por Tomomi Imura

journey
    title Your JavaScript Functions Adventure
    section Foundation
      Function Syntax: 5: You
      Calling Functions: 4: You
      Parameters & Arguments: 5: You
    section Advanced Concepts
      Return Values: 4: You
      Default Parameters: 5: You
      Function Composition: 4: You
    section Modern JavaScript
      Arrow Functions: 5: You
      Anonymous Functions: 4: You
      Higher-Order Functions: 5: You

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 refazer 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 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!

mindmap
  root((JavaScript Functions))
    Basic Concepts
      Declaration
        Traditional syntax
        Arrow function syntax
      Calling
        Using parentheses
        Parentheses required
    Parameters
      Input Values
        Multiple parameters
        Default values
      Arguments
        Values passed in
        Can be any type
    Return Values
      Output Data
        return statement
        Exit function
      Use Results
        Store in variables
        Chain functions
    Advanced Patterns
      Higher-Order
        Functions as parameters
        Callbacks
      Anonymous
        No name needed
        Inline definition

Funções

Uma função é um bloco de código independente que realiza uma tarefa específica. Ela encapsula a 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 as atualizações. Considere 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 ser clicado.

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:

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 abordar 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.

🧠 Verificação de Fundamentos de Funções: Construindo Suas Primeiras Funções

Vamos ver como você está se saindo com as funções básicas:

Você consegue explicar por que usamos chaves {} nas definições de funções?
O que acontece se você escrever displayGreeting sem os parênteses?
Por que você pode querer chamar a mesma função várias vezes?

flowchart TD
    A["✏️ Define Function"] --> B["📦 Package Code"]
    B --> C["🏷️ Give it a Name"]
    C --> D["📞 Call When Needed"]
    D --> E["🔄 Reuse Anywhere"]
    
    F["💡 Benefits"] --> F1["No code repetition"]
    F --> F2["Easy to maintain"]
    F --> F3["Clear organization"]
    F --> F4["Easier testing"]
    
    style A fill:#e3f2fd
    style E fill:#e8f5e8
    style F fill:#fff3e0

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 ótimas funções:

Dê nomes claros e descritivos às suas funções – seu eu do futuro vai agradecer!
Use camelCasing 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 usa 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, fornecerá valores reais que serã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);
}

Observe 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!"

flowchart LR
    A["🎯 Function Call"] --> B["📥 Parameters"]
    B --> C["⚙️ Function Body"]
    C --> D["📤 Result"]
    
    A1["displayGreeting('Alice')"] --> A
    B1["name = 'Alice'"] --> B
    C1["Template literal\n\`Hello, \${name}!\`"] --> C
    D1["'Hello, Alice!'"] --> D
    
    E["🔄 Parameter Types"] --> E1["Strings"]
    E --> E2["Numbers"]
    E --> E3["Booleans"]
    E --> E4["Objects"]
    E --> E5["Functions"]
    
    style A fill:#e3f2fd
    style C fill:#e8f5e8
    style D fill:#fff3e0
    style E fill:#f3e5f5

Valores padrão

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

Digamos que queremos permitir que as pessoas personalizem 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.

🎛️ Verificação de Domínio de Parâmetros: Tornando Funções Flexíveis

Teste sua compreensão sobre parâmetros:

Qual é a diferença entre um parâmetro e um argumento?
Por que os valores padrão são úteis na programação do mundo real?
Você consegue prever o que acontece se passar mais argumentos do que parâmetros?

stateDiagram-v2
    [*] --> NoParams: function greet() {}
    [*] --> WithParams: function greet(name) {}
    [*] --> WithDefaults: function greet(name, greeting='Hi') {}
    
    NoParams --> Static: Same output always
    WithParams --> Dynamic: Changes with input
    WithDefaults --> Flexible: Optional customization
    
    Static --> [*]
    Dynamic --> [*]
    Flexible --> [*]
    
    note right of WithDefaults
        Most flexible approach
        Backwards compatible
    end note

Dica profissional: Parâmetros padrão tornam suas funções mais amigáveis. Os usuários podem começar rapidamente com padrões sensatos, mas ainda personalizar quando necessário!

Valores de retorno

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

É aí que entram os valores de retorno. Em vez de apenas exibir algo, uma função pode 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 exibi-la:

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

Agora, em vez de exibir 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.

flowchart TD
    A["🔧 Function Processing"] --> B{"return statement?"}
    B -->|Yes| C["📤 Return Value"]
    B -->|No| D["📭 Return undefined"]
    
    C --> E["💾 Store in Variable"]
    C --> F["🔗 Use in Expression"]
    C --> G["📞 Pass to Function"]
    
    D --> H["⚠️ Usually not useful"]
    
    I["📋 Return Value Uses"] --> I1["Calculate results"]
    I --> I2["Validate input"]
    I --> I3["Transform data"]
    I --> I4["Create objects"]
    
    style C fill:#e8f5e8
    style D fill:#ffebee
    style I fill:#e3f2fd

🔄 Verificação de Valores de Retorno: Obtendo Resultados de Volta

Avalie sua compreensão sobre valores de retorno:

O que acontece com o código após uma instrução return em uma função?
Por que retornar valores geralmente é melhor do que apenas exibir no console?
Uma função pode retornar diferentes tipos de valores (string, número, booleano)?

pie title "Common Return Value Types"
    "Strings" : 30
    "Numbers" : 25
    "Objects" : 20
    "Booleans" : 15
    "Arrays" : 10

Insight chave: Funções que retornam valores são mais versáteis porque quem chama decide o que fazer com o resultado. Isso torna seu código mais modular e reutilizável!

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 essa 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);

Observe 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 isso 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 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, chamadas 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.

flowchart LR
    A["📝 Function Styles"] --> B["Traditional"]
    A --> C["Arrow"]
    A --> D["Anonymous"]
    
    B --> B1["function name() {}"]
    B --> B2["Hoisted"]
    B --> B3["Named"]
    
    C --> C1["const name = () => {}"]
    C --> C2["Concise syntax"]
    C --> C3["Modern style"]
    
    D --> D1["function() {}"]
    D --> D2["No name"]
    D --> D3["One-time use"]
    
    E["⏰ When to Use"] --> E1["Traditional: Reusable functions"]
    E --> E2["Arrow: Short callbacks"]
    E --> E3["Anonymous: Event handlers"]
    
    style A fill:#e3f2fd
    style B fill:#e8f5e8
    style C fill:#fff3e0
    style D fill:#f3e5f5
    style E fill:#e0f2f1

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.

🎨 Verificação de Estilos de Funções: Escolhendo a Sintaxe Certa

Teste sua compreensão sobre sintaxe:

Quando você pode preferir funções de seta em vez da sintaxe tradicional de funções?
Qual é a principal vantagem das funções anônimas?
Você consegue pensar em uma situação onde uma função nomeada é melhor que uma anônima?

quadrantChart
    title Function Choice Decision Matrix
    x-axis Simple --> Complex
    y-axis One-time use --> Reusable
    quadrant-1 Arrow Functions
    quadrant-2 Named Functions
    quadrant-3 Anonymous Functions
    quadrant-4 Traditional Functions
    
    Event Handlers: [0.3, 0.2]
    Utility Functions: [0.7, 0.8]
    Callbacks: [0.2, 0.3]
    Class Methods: [0.8, 0.7]
    Mathematical Operations: [0.4, 0.6]

Tendência moderna: Funções de seta estão se tornando a escolha padrão para muitos desenvolvedores devido à sua sintaxe concisa, mas as funções tradicionais ainda têm seu lugar!

🚀 Desafio

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

Desafio do Agente 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:

Uma função add que recebe dois parâmetros e retorna sua soma
Uma função multiply com valores padrão para parâmetros (o segundo parâmetro tem padrão 1)
Uma função de seta square que recebe um número e retorna seu quadrado
Uma função calculate que aceita outra função como parâmetro e dois números, aplicando a função a esses números
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 Estudo Individual

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 escrevendo uma função e, em seguida, reescrevendo-a com essa sintaxe.

Tarefa

Divirta-se com Funções

🧰 Resumo do Kit de Ferramentas de Funções JavaScript

graph TD
    A["🎯 JavaScript Functions"] --> B["📋 Function Declaration"]
    A --> C["📥 Parameters"]
    A --> D["📤 Return Values"]
    A --> E["🎨 Modern Syntax"]
    
    B --> B1["function name() {}"]
    B --> B2["Descriptive naming"]
    B --> B3["Reusable code blocks"]
    
    C --> C1["Input data"]
    C --> C2["Default values"]
    C --> C3["Multiple parameters"]
    
    D --> D1["return statement"]
    D --> D2["Exit function"]
    D --> D3["Pass data back"]
    
    E --> E1["Arrow functions: () =>"]
    E --> E2["Anonymous functions"]
    E --> E3["Higher-order functions"]
    
    F["⚡ Key Benefits"] --> F1["Code reusability"]
    F --> F2["Better organization"]
    F --> F3["Easier testing"]
    F --> F4["Modular design"]
    
    style A fill:#e3f2fd
    style B fill:#e8f5e8
    style C fill:#fff3e0
    style D fill:#f3e5f5
    style E fill:#e0f2f1
    style F fill:#fce4ec

🚀 Cronograma de Domínio de Funções JavaScript

⚡ O Que Você Pode Fazer nos Próximos 5 Minutos

Escreva uma função simples que retorne seu número favorito
Crie uma função com dois parâmetros que os some juntos
Tente converter uma função tradicional para a sintaxe de função de seta
Pratique o desafio: explique a diferença entre funções e métodos

🎯 O Que Você Pode Realizar Nesta Hora

Complete o quiz pós-aula e revise quaisquer conceitos confusos
Construa a biblioteca de utilitários matemáticos do desafio do GitHub Copilot
Crie uma função que utiliza outra função como parâmetro
Pratique escrever funções com parâmetros padrão
Experimente usar template literals nos valores de retorno de funções

📅 Sua Maestria em Funções ao Longo da Semana

Complete a tarefa "Diversão com Funções" com criatividade
Refatore algum código repetitivo que você escreveu em funções reutilizáveis
Construa uma pequena calculadora usando apenas funções (sem variáveis globais)
Pratique funções de seta com métodos de array como map() e filter()
Crie uma coleção de funções utilitárias para tarefas comuns
Estude funções de ordem superior e conceitos de programação funcional

🌟 Sua Transformação ao Longo do Mês

Domine conceitos avançados de funções como closures e escopo
Construa um projeto que utilize fortemente composição de funções
Contribua para código aberto melhorando a documentação de funções
Ensine alguém sobre funções e diferentes estilos de sintaxe
Explore paradigmas de programação funcional em JavaScript
Crie uma biblioteca pessoal de funções reutilizáveis para projetos futuros

🏆 Check-in Final do Campeão de Funções

Celebre sua maestria em funções:

Qual é a função mais útil que você criou até agora?
Como aprender sobre funções mudou sua forma de pensar sobre organização de código?
Qual sintaxe de função você prefere e por quê?
Qual problema do mundo real você resolveria escrevendo uma função?

journey
    title Your Function Confidence Evolution
    section Today
      Confused by Syntax: 3: You
      Understanding Basics: 4: You
      Writing Simple Functions: 5: You
    section This Week
      Using Parameters: 4: You
      Returning Values: 5: You
      Modern Syntax: 5: You
    section Next Month
      Function Composition: 5: You
      Advanced Patterns: 5: You
      Teaching Others: 5: You

🎉 Você dominou um dos conceitos mais poderosos da programação! Funções são os blocos de construção de programas maiores. Todo aplicativo que você criar usará funções para organizar, reutilizar e estruturar o código. Agora você entende como empacotar lógica em componentes reutilizáveis, tornando-se um programador mais eficiente e eficaz. Bem-vindo ao mundo da programação modular! 🚀

Aviso Legal:
Este documento foi traduzido utilizando 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 autoritativa. Para informações críticas, recomenda-se a tradução profissional humana. Não nos responsabilizamos por quaisquer mal-entendidos ou interpretações incorretas decorrentes do uso desta tradução.

24 KiB Raw Blame History Unescape Escape