Funções com Parâmetros em JavaScript: Lógica e Aplicações

vou explicar essa lógica de forma bem clara e, além disso, ensinar outros conceitos que podem te ajudar a evoluir ainda mais no JavaScript.

O que são funções com parâmetros?

Funções são blocos de código reutilizáveis. Quando usamos parâmetros, podemos torná-las mais dinâmicas, evitando a repetição desnecessária de código.

Imagine que queremos exibir um título (h1) e um parágrafo (p) na tela. Poderíamos fazer isso assim:

let titulo = document.querySelector("h1"); titulo.innerHTML = "Bem-vindo ao site!";

let paragrafo = document.querySelector("p"); paragrafo.innerHTML = "Aproveite sua visita.";

O problema aqui é que esse código se repete, só mudando o elemento e o texto. Isso não é eficiente.

Transformando em uma função reutilizável

Podemos criar uma função com parâmetros para deixar esse código mais elegante e reutilizável:

function exibirTextoNaTela(tag, texto) { let elemento = document.querySelector(tag); elemento.innerHTML = texto; }

Agora, quando quisermos modificar qualquer elemento, basta chamar essa função:

exibirTextoNaTela("h1", "Bem-vindo ao site!"); exibirTextoNaTela("p", "Aproveite sua visita.");

Isso reduz repetições e torna o código mais organizado.

Melhorando a Função: Tratamento de Erros

E se a tag que passarmos não existir na página? O código quebraria. Podemos evitar isso com um simples tratamento:

function exibirTextoNaTela(tag, texto) { let elemento = document.querySelector(tag);

if (elemento) { // Verifica se o elemento existe
    elemento.innerHTML = texto;
} else {
    console.error(`Erro: Elemento ${tag} não encontrado.`);
}

}

Agora, se chamarmos exibirTextoNaTela("h2", "Texto errado") e não houver um

na página, o JavaScript não quebrará o código, apenas mostrará um erro no console.

Aplicando Estilos Diretamente na Função

Podemos melhorar ainda mais e permitir a mudança de estilo diretamente pela função:

function exibirTextoNaTela(tag, texto, cor) { let elemento = document.querySelector(tag);

if (elemento) {
    elemento.innerHTML = texto;
    elemento.style.color = cor; // Muda a cor do texto
} else {
    console.error(`Erro: Elemento ${tag} não encontrado.`);
}

}

Agora podemos chamar:

exibirTextoNaTela("h1", "Bem-vindo!", "blue"); exibirTextoNaTela("p", "Aproveite o site!", "green");

Isso deixará o

azul e o
verde.

Adicionando um Evento para Dinamismo

Podemos ir além e fazer essa função ser chamada quando o usuário interagir com a página. Exemplo:

document.querySelector("button").addEventListener("click", function() { exibirTextoNaTela("h1", "Texto alterado!", "red"); });

Agora, quando o usuário clicar no botão, o texto do

mudará para vermelho.
Funções com parâmetros ajudam a organizar melhor o código, evitar repetições e torná-lo mais flexível. Além disso, podemos aprimorar nossa função com:

Verificação de erro para evitar bugs Adição de estilos dinâmicos para maior personalização Eventos para responder a interações do usuário

Se quiser desafios práticos, me avise que te passo uns exercícios top para treinar!

Dominando Funções com Parâmetros no JavaScript: O Caminho para um Código Inteligente e Reutilizável O mundo da programação é movido pela busca incessante por eficiência e clareza. No JavaScript, um dos pilares para alcançar esse objetivo é o uso inteligente de funções com parâmetros. Ao dominar essa técnica, não apenas evitamos repetições desnecessárias, mas também tornamos o código mais organizado e dinâmico.

O Problema da Repetição de Código Imagine que estamos desenvolvendo um site e queremos exibir mensagens personalizadas em um título (h1) e em um parágrafo (p). Poderíamos escrever algo assim: let titulo = document.querySelector("h1"); titulo.innerHTML = "Bem-vindo ao site!"; let paragrafo = document.querySelector("p"); paragrafo.innerHTML = "Aproveite sua visita."; O problema aqui é evidente: estamos repetindo código. Se precisarmos modificar vários elementos na página, teríamos que copiar e colar o mesmo padrão várias vezes, o que não é eficiente.
A Solução: Funções com Parâmetros Para resolver esse problema, podemos transformar esse padrão repetitivo em uma função reutilizável. Assim, o código se torna mais enxuto e flexível: function exibirTextoNaTela(tag, texto) { let elemento = document.querySelector(tag); elemento.innerHTML = texto; } Agora, em vez de escrever várias vezes a mesma lógica, podemos simplesmente chamar a função e passar os valores que queremos modificar: exibirTextoNaTela("h1", "Bem-vindo ao site!"); exibirTextoNaTela("p", "Aproveite sua visita."); Com essa abordagem, o código fica mais limpo, organizado e fácil de manter.
Aprimorando a Função com Tratamento de Erros Uma função bem construída precisa lidar com possíveis problemas. E se o elemento passado não existir na página? O código quebraria! Para evitar isso, podemos adicionar uma verificação: function exibirTextoNaTela(tag, texto) { let elemento = document.querySelector(tag);

if (elemento) { elemento.innerHTML = texto; } else { console.error(Erro: Elemento ${tag} não encontrado.); }

} Agora, se chamarmos exibirTextoNaTela("h2", "Texto errado") e não houver um

no HTML, o JavaScript não quebrará, apenas mostrará um erro no console, tornando a depuração mais simples. 4. Tornando a Função Ainda Mais Poderosa Vamos adicionar um terceiro parâmetro para permitir a personalização da function exibirTextoNaTela(tag, texto, cor) { let elemento = document.querySelector(tag);

if (elemento) {
    elemento.innerHTML = texto;
    elemento.style.color = cor; // Alterando a cor do texto dinamicamente
} else {
    console.error(`Erro: Elemento ${tag} não encontrado.`);
}

}