Funções: Declaração, Parâmetros. 🌴 TRILHA JavaScript 🚀 Etapa 07

Academy Code Christ 0

  Seja muito bem-vindo à Academy Code Christ!  


🌍 Academy Code Christ está disponível em vários idiomas.
Fique à vontade para usar o tradutor na Barra lateral (Sidebar) 
e aprender no seu idioma.

📚 Continue sua jornada de aprendizado



A Academy Code Christ oferece trilhas de aprendizado em diferentes tecnologias. Explore os cursos, acompanhe as aulas e avance em sua jornada de conhecimento.  


📋 Menus correspondentes:



💻 Pratique o que você aprende

Para facilitar seu aprendizado, utilize o Code Editor da Mr Digitals, um editor online que permite escrever códigos em HTML, CSS e JavaScript e visualizar os resultados diretamente no navegador.


🚀 Etapa 07 

🧠 O que é uma Função


Uma função é um bloco de código reutilizável que executa uma tarefa específica.
Você a define uma vez e pode chamá-la quantas vezes quiser, em qualquer parte do código.

💬 Analogia simples:

Pense em uma função como uma “máquina de café”:

● Você envia insumos (parâmetros);

● A máquina executa um processo interno;

● Ela te devolve o resultado (retorno).

💡 Em programação, isso significa que podemos criar uma função para somar números, exibir mensagens, calcular médias, validar login, etc.



⚙️ Estrutura básica de uma função Sintaxe:


function nomeDaFuncao() {

// bloco de código

}


Exemplo:

function saudacao() {

console.log("Olá! Seja bem-vindo ao curso de JavaScript!");

}


Chamando a função (executando-a):

saudacao(); // executa o código dentro da função



Saída no console:

Olá! Seja bem-vindo ao curso de JavaScript!



💬 O par de parênteses () indica a execução da função.
Sem eles, você está apenas se referindo à função, não executando.



🔹 Funções com Parâmetros (Entrada)


Uma função pode receber parâmetros, que são valores que entram nela no momento da chamada.
São variáveis internas da função.
Sintaxe:

function nomeDaFuncao(parametro1, parametro2) {

// usa os parâmetros dentro do código

}


Exemplo:

function saudacaoPersonalizada(nome) {

console.log(`Olá, ${nome}! Seja bem-vindo(a)!`);

}



saudacaoPersonalizada("Carlos");

saudacaoPersonalizada("Ana");



Saída:

Olá, Carlos! Seja bem-vindo(a)!

Olá, Ana! Seja bem-vindo(a)!



💬 Você pode passar valores diferentes a cada execução — sem precisar duplicar o código.



🧩 Funções com Retorno (return)


Nem toda função serve apenas para exibir algo.
Muitas vezes, queremos que ela calcule algo e devolva o resultado.

Para isso, usamos a palavra-chave return.
Exemplo:

function somar(a, b) {

return a + b;

}



let resultado = somar(5, 3);

console.log("Resultado da soma:", resultado);



Saída:

Resultado da soma: 8



💬 O return interrompe a função e envia o valor calculado para quem a chamou.
Sem return, a função simplesmente executa e encerra, sem devolver nada.



⚡ Diferença entre Exibir e Retornar


function somarExibir(a, b) {

console.log(a + b);

}



function somarRetornar(a, b) {

return a + b;

}



// Exemplo de uso

somarExibir(3, 4); // mostra 7, mas não pode ser reaproveitado

let total = somarRetornar(3, 4) + 10; // retorna 7 e soma com 10

console.log(total); // 17



💬 A função com console.log exibe o resultado.
Mas a função com return devolve o valor, permitindo usá-lo em outras operações.



✅ Escopo de Variáveis


O escopo define onde uma variável pode ser acessada.

● Variável local: criada dentro da função → só existe lá dentro.

● Variável global: criada fora → pode ser usada em qualquer lugar.
Exemplo:

let nome = "João"; // variável global



function mostrarNome() {

let saudacao = "Oi"; // variável local

console.log(`${saudacao}, ${nome}!`);

}



mostrarNome();

console.log(nome); // Ok

// console.log(saudacao); // Erro: saudacao não está definida



💡 Sempre prefira variáveis locais. Elas evitam conflitos e deixam o código mais seguro.



🔁 Funções que combinam Lógica e Loops


É comum usar funções com laços de repetição, criando scripts poderosos e organizados.
Exemplo: Tabuada com Função

function tabuada(numero) {

for (let i = 1; i <= 10; i++) {

console.log(`${numero} x ${i} = ${numero * i}`);

}

}



tabuada(6);



Saída:

6 x 1 = 6

6 x 2 = 12

...

6 x 10 = 60



💬 Agora, você pode chamar tabuada() para qualquer número — função reutilizável e elegante.



🔸 Parâmetros Opcionais


Nem sempre é necessário passar todos os parâmetros em uma função.
Você pode definir valores padrão (default) quando o parâmetro não for fornecido.
Exemplo:

function apresentar(nome = "Convidado", idade = 0) {

console.log(`Olá, ${nome}! Sua idade é ${idade}.`);

}



apresentar("Maria", 25);

apresentar(); // usa os valores padrão



Saída:

Olá, Maria! Sua idade é 25.

Olá, Convidado! Sua idade é 0.



💡 Valores padrão evitam erros e tornam suas funções mais robustas.



💬 Tipos de Funções em JavaScript

Existem três formas principais de declarar funções, e todas funcionam, mas cada uma tem suas particularidades.



🔹 1. Declaração tradicional

function somar(a, b) {

return a + b;

}



✅ Pode ser usada antes de ser declarada (o JS “levanta” a função automaticamente — hoisting).



🔹 2. Função anônima (expressão de função)

const subtrair = function(a, b) {

return a - b;

};



console.log(subtrair(10, 5));



💬 Aqui, a função é armazenada dentro de uma variável, e só pode ser chamada depois da declaração.



🔹 3. Arrow Function (Função de seta)

Introduzida no ES6 (2015), é uma forma mais curta e moderna.

const multiplicar = (a, b) => {

return a * b;

};



console.log(multiplicar(4, 5));



💡 Se a função tiver apenas uma linha, pode ser simplificada:

const dividir = (a, b) => a / b;

console.log(dividir(20, 4)); // 5





🧱 Diferenças entre Tipos de Função




Tipo

Sintaxe

Pode usar antes da declaração?

Indicado para


Tradicional

function nome() {}

✅ Sim

Estruturas clássicas


Anônima

const nome = function() {}

❌ Não

Encapsular lógica


Arrow Function

const nome = () => {}

❌ Não

Código moderno e expressivo




🧩 Exemplo Completo — Calculadora com Funções


function somar(a, b) {

return a + b;

}



function subtrair(a, b) {

return a - b;

}



function multiplicar(a, b) {

return a * b;

}



function dividir(a, b) {

if (b === 0) {

return "Erro: divisão por zero!";

}

return a / b;

}



let num1 = Number(prompt("Digite o primeiro número:"));

let num2 = Number(prompt("Digite o segundo número:"));

let operacao = prompt("Escolha a operação (+, -, *, /):");



let resultado;



switch (operacao) {

case "+":

resultado = somar(num1, num2);

break;

case "-":

resultado = subtrair(num1, num2);

break;

case "*":

resultado = multiplicar(num1, num2);

break;

case "/":

resultado = dividir(num1, num2);

break;

default:

resultado = "Operação inválida!";

}



alert(`Resultado: ${resultado}`);



💬 Observe que o código principal ficou limpo e organizado, porque a lógica pesada está dentro das funções.



💻 Exercício Prático

Crie um arquivo chamado funcoes.html com o script:

1. Uma função chamada saudarUsuario(nome) que exibe uma mensagem personalizada;

2. Uma função chamada dobrar(numero) que retorna o dobro do valor;

3. Uma função parOuImpar(numero) que retorna "Par" ou "Ímpar";

4. Teste todas no console.

💡 Exemplo:

function saudarUsuario(nome) {

console.log(`Olá, ${nome}!`);

}



function dobrar(num) {

return num * 2;

}



function parOuImpar(num) {

return (num % 2 === 0) ? "Par" : "Ímpar";

}



saudarUsuario("Paula");

console.log("Dobro de 5 é", dobrar(5));

console.log("7 é", parOuImpar(7));





🧩 Desafio – Média com Função e Retorno


Crie uma função que receba 3 notas, calcule a média e retorne o resultado com uma mensagem de acordo com o desempenho:



Média

Resultado


≥ 7

Aprovado


5 a 6.9

Recuperação


< 5

Reprovado


💡 Solução sugerida:

function avaliarAluno(n1, n2, n3) {

let media = (n1 + n2 + n3) / 3;



if (media >= 7) {

return `Média ${media.toFixed(1)} — Aprovado!`;

} else if (media >= 5) {

return `Média ${media.toFixed(1)} — Recuperação.`;

} else {

return `Média ${media.toFixed(1)} — Reprovado.`;

}

}



console.log(avaliarAluno(6, 7, 5));





🧠 Hoje você aprendeu:


✅ O que são funções e por que usá-las;
✅ Como declarar e chamar funções;
✅ Como usar parâmetros e o comando return;
✅ Diferença entre exibir e retornar valores;
✅ Escopo de variáveis (local e global);
✅ Funções modernas com arrow function;
✅ Aplicações práticas com calculadora e tabuada.



🎓 Conclusão


Funções são o coração da programação modular.
Com elas, seu código fica limpo, poderoso e fácil de manter.
Você acabou de conquistar uma das bases mais importantes do desenvolvimento JavaScript.

Prepare-se, porque na próxima aula daremos um passo além: você aprenderá a detectar e reagir a eventos — cliques, movimentos, digitação e muito mais!
É aí que suas funções começam a interagir com o usuário e o mundo real da página web.



    📚 Continue aprendendo JavaScript:





    🚀 Etapa 05 👉 Estruturas Condicionais

    🚀 Etapa 06 👉 Laços de Repetição

    🚀 Etapa 07 👉 Você está nessa Etapa



    Este conteúdo faz parte do Academy Code Christ. 

    Um projeto criado para ajudar jovens e iniciantes a aprender programação do zero, de forma simples e gratuita.

    Nossa missão é compartilhar conhecimento e incentivar mais pessoas a descobrir que também podem aprender tecnologia, criar projetos e desenvolver novas habilidades.
    Todo o conteúdo é disponibilizado gratuitamente, de forma clara, prática e 
    sem enrolação. 

    Você pode apoiar o projeto se quiser 
    com um café. 


    Tags

    Post a Comment

    Postar um comentário

    Postagem Anterior Próxima Postagem