🚀 Funções em JavaScript
Aprenda a criar e usar funções de forma interativa!
📚 O que são Funções?
Funções são blocos de código reutilizáveis que executam uma tarefa específica. Elas são fundamentais na programação JavaScript!
💡 Por que usar funções?
- Reutilização: Escreva uma vez, use várias vezes
- Organização: Código mais limpo e estruturado
- Manutenção: Mais fácil de corrigir e atualizar
- Legibilidade: Código mais fácil de entender
🎯 Exemplo Prático
Vamos ver uma função simples em ação:
function saudar() {
return "Olá! Bem-vindo à aula de funções! 👋";
}
🔧 Criando e Chamando Funções
Sintaxe Básica:
function nomeDaFuncao() {
// código a ser executado
}
// Chamando a função
nomeDaFuncao();
🎮 Crie sua Primeira Função
📥 Parâmetros e Argumentos
Diferença entre Parâmetros e Argumentos:
- Parâmetros: Variáveis definidas na função
- Argumentos: Valores passados para a função
function somar(a, b) { // a e b são parâmetros
return a + b;
}
somar(5, 3); // 5 e 3 são argumentos
🧮 Calculadora Interativa
🎯 Parâmetros Padrão:
function saudarPessoa(nome = "Visitante") {
return `Olá, ${nome}!`;
}
saudarPessoa(); // "Olá, Visitante!"
saudarPessoa("Ana"); // "Olá, Ana!"
↩️ Valores de Retorno
O comando return:
- Especifica o valor que a função deve retornar
- Encerra a execução da função
- Se não houver return, a função retorna undefined
function calcularArea(largura, altura) {
return largura * altura; // Retorna o resultado
}
const area = calcularArea(5, 3); // area = 15
📐 Calculadora de Área
🔄 Função sem Return vs Com Return:
// Sem return (apenas exibe)
function mostrarMensagem(msg) {
console.log(msg);
}
// Com return (retorna valor)
function criarMensagem(msg) {
return `Mensagem: ${msg}`;
}
🤝 Funções Auxiliares
O que são Funções Auxiliares?
São funções que ajudam outras funções, dividindo tarefas complexas em partes menores e mais gerenciáveis.
// Função auxiliar
function validarIdade(idade) {
return idade >= 18;
}
// Função principal que usa a auxiliar
function verificarAcesso(nome, idade) {
if (validarIdade(idade)) {
return `${nome}, acesso liberado!`;
} else {
return `${nome}, acesso negado. Menor de idade.`;
}
}
🎫 Sistema de Verificação de Idade
🧮 Calculadora Avançada com Funções Auxiliares
📝 Expressões de Função
Declaração vs Expressão:
// Declaração de função (hoisted)
function minhaFuncao1() {
return "Sou uma declaração";
}
// Expressão de função (não hoisted)
const minhaFuncao2 = function() {
return "Sou uma expressão";
};
// Expressão de função nomeada
const minhaFuncao3 = function nomeDaFuncao() {
return "Sou uma expressão nomeada";
};
🎭 Testando Diferentes Tipos
🔄 Funções como Valores:
Em JavaScript, funções são valores de primeira classe - podem ser atribuídas a variáveis, passadas como argumentos e retornadas de outras funções.
const operacoes = {
somar: function(a, b) { return a + b; },
multiplicar: function(a, b) { return a * b; }
};
function executarOperacao(operacao, x, y) {
return operacao(x, y);
}
🏹 Arrow Functions (Funções Seta)
Sintaxe das Arrow Functions:
// Função tradicional
function somar(a, b) {
return a + b;
}
// Arrow function
const somar = (a, b) => {
return a + b;
};
// Arrow function simplificada (uma linha)
const somar = (a, b) => a + b;
// Arrow function com um parâmetro
const dobrar = x => x * 2;
// Arrow function sem parâmetros
const saudar = () => "Olá!";
🎯 Comparando Sintaxes
📋 Processamento de Lista com Arrow Functions
🏆 Exercícios Práticos
🎮 Exercício 1: Calculadora de IMC
Crie uma função que calcule o Índice de Massa Corporal (IMC = peso / altura²)
🎯 Exercício 2: Validador de Email
Crie uma função que valide se um email tem formato válido
🔢 Exercício 3: Gerador de Senha
Crie uma função que gere uma senha aleatória
🏁 Desafio Final: Sistema de Notas
Crie um sistema que calcule a média de notas e determine o status do aluno