Preciso de ajuda com Functions em JavaScript

eu fico nessa de decorar codigo

É basicamente por isso que você está tendo dificuldade, não decore, aprenda

Funções são blocos de código reutilizáveis dentro dos scripts, confuso? Considere esse script:

let a = parseInt(prompt("Digite o primeiro número"));
let b = parseInt(prompt("Digite o primeiro número"));
alert(`O resultado de ${a}+${b} é ${a+b}`);

Uma função é a mesma coisa só que dentro do bloco:

function exemplo1() {
  let a = parseInt(prompt("Digite o primeiro número"));
  let b = parseInt(prompt("Digite o primeiro número"));
  alert(`O resultado de ${a}+${b} é ${a+b}`);
}

Perceba que diferente do código anterior se você colar esse, não vai funcionar, isso porque você precisa executar a função, fazemos isso em javascript colocando o nome da função seguido por ():

function exemplo1() {
  let a = parseInt(prompt("Digite o primeiro número"));
  let b = parseInt(prompt("Digite o primeiro número"));
  alert(`O resultado de ${a}+${b} é ${a+b}`);
}

exemplo1();

Veja que agora funciona, mas se notou essa função não pega valores, as funções assim como na matemática (não era tão inútil assim afinal) funções aceitam argumentos, vamos chamar a função de "adiciona" e usar argumentos:

function adiciona(a,b) {
  alert(`O resultado de ${a}+${b} é ${a+b}`);
}

Note que novamente se você colar, não funciona, isso acontece porque de novo, não estamos chamando, para chamar uma função com argumentos passamos eles entre ( e ), separados por , assim:

function adiciona(a,b) {
  alert(`O resultado de ${a}+${b} é ${a+b}`);
}

adiciona(40,2);

Agora que você sabe declarar uma função, vamos aos detalhes chatos, o primeiro é que funções podem afetar o que está fora dela, confuso? Vamos ao seguinte código, note que estamos extraindo informações de fora da função:

// Vou informar 7
let a = parseInt(prompt("Digite o primeiro número"));
// Vou informar 3
let b = parseInt(prompt("Digite o primeiro número"));

function exemplo2() {
  alert(`O resultado de ${a}+${b} é ${a+b}`);
}

exemplo2();  // Como esperado, sai 10

Agora olha isso:

// Vou informar 7
let a = parseInt(prompt("Digite o primeiro número"));
// Vou informar 3
let b = parseInt(prompt("Digite o primeiro número"));

function exemplo3() {
  a = 40;
  b =  2;
  alert(`O resultado de ${a}+${b} é ${a+b}`);
}

alert(`O valor de a é ${a}\nO valor de b é ${b}`);
exemplo3();  // Agora a saida foi 42
alert(`O valor de a é ${a}\nO valor de b é ${b}`); // e os valores foram alterados

Da mesma forma funções como estão entre chaves tem seu próprio escopo:

// Vou informar 7
let a = parseInt(prompt("Digite o primeiro número"));
// Vou informar 3
let b = parseInt(prompt("Digite o primeiro número"));

function exemplo4() {
  let a = 40;
  let b =  2;
  alert(`O resultado de ${a}+${b} é ${a+b}`);
}

alert(`O valor de a é ${a}\nO valor de b é ${b}`);
exemplo4();  // A saida ainda foi 42
alert(`O valor de a é ${a}\nO valor de b é ${b}`); // e os valores não foram alterados

Quando estiver estudando POO você vai ter mais uma forma de usar funções mas como vc está tendo dificuldade no básico é melhor ir com calma

Pegue os exemplos que eu dei, modifica e testa eles até a exaustão que você pega o conceito

De forma rápida e simples, pensa em matemática

sabe quando você via f(x)=x+2 na escola? As funções no javascript funcionam exatamente da mesma forma, só que com umas letras a mais

Nessa função matemática que mostrei, f é o nome da função, que podeira ser g, h... e no javascript, pode ser qualquer nome, como myFunc, doSomethingHeHe etc

o x em f(x) é a entrada, um valor que vai ser usado dentro da função, que tambem pode ter qualquer nome (y, z...). No JS, é a mesma coisa. Se eu tenho uma função chamada myFunc() e, dentro dos parenteses, coloco um myVar (final: myFunc(myVar)), o myVar é uma variavel, ou seja, um valor que eu posso usar dentro da função. Posso passar quantos valores eu quiser ou não passar nenhum, depende do que a função vai fazer

Agora a função em si. Quando vemos f(x)=x+2 o que essa função faz é retornar o valor de x adicionado a 2. Eu poderia fazer uma função f()=5 por exemplo, que só retornaria o valor de 5.

No final, uma funcão nada mais é do que um bloco de código que faz alguma coisa. Voce pode passar valores pra esse código utilizar e este código pode te retornar valores

Agora indo pro JavaScript mesmo, bora pegar um exemplo de uma função que adiciona dois numeros:

const myNum = 1
const myNumTwo = 2

console.log(addNumbers(myNum, myNumTwo)

function addNumbers(numberOne, numberTwo) {
    return numberOne + numberTwo
}

Pegando por partes:

1. Criamos duas variaveis do tipo int, chamadas myNum e myNumTwo, recebendo valores de 1 e 2, respectivamente
2. chamamos a função addNumbers e passamos os valores das duas variaveis que criamos antes para ela, ficando addNumbers(myNum, myNumTwo)
3. Criamos a função addNumbers que recebe dois valores, o numberOne e numberTwo. Estes dois valores serão aqueles que passamos quando chamamos a função
4. retornamos os dois valores recebidos somados

Note que eu criei a funcão depois que já tinha chamado a mesma. Isso se deve a forma de como o JavaScript funciona, que move as funções para o topo do escopo, mas não precisa decorar isso agora

Outro exemplo, agora sem parametros:

function getTime(){
    return Date.now()
}

console.log(getTime())

O que fizemos:

1. criamos a função getTime(), que não receberá nenhum valor
2. A funcão getTime irá retornar a data atual com o objeto Date
3. Mostramos a data atual para o usuario

No geral, isso são funções, blocos de código que fazem alguma coisa. Dependendo do que você for fazer, a função pode não retornar nada ou não receber nenhuma entrada.
A questão é prática, vai praticando o máximo que conseguir e, quando menos perceber, já ta sabendo de tudo!

OUTRA COISA:

caso queira ir mais a funco em funcões no javascript, você vai se deparar com arrow functions, como essa:

const addNumbers = (numberOne, numberTwo) => {
    return numberOne + numberTwo
}

Isso é a mesma função que fizemos antes, que adiciona dois numeros. A unica diferença é a forma que ela foi criada, nesse caso dentro de uma variavel constante, mas funciona exatamente da mesma forma, tirando algumas besteiras mais aprofuncadas.

SIM

Não quero te assustar agora, então não se preocupa com o que vou mostrar, mas quando você se aprofundar no JavaScript, vai se deparar com Promises e funções assincronas. Essas funcões te permitem esperar que algo aconteça fora do código basicamente, como pegar uma informação de um site externo ou criar um usuario no banco de dados

hoje em dia, é difícil você achar alguem criando uma Promise da forma antiga, geralmente elas aparecem assim:

const createUser = async(username, password) => {
    await User.create({ username, password })
    return 'User created successfully'
}

createUser('JohnDoe', 'myPassword123')
console.log('hello')

output:

hello
User created successfully

Veja que tem um async antes da função que, por sinal, é uma arrow function. Isso fala que a função é assincrona, então o código irá executa-la de forma independente ao menos que seja chamada com um await, como antes do User.create, que fará com que o código espere a Promise (palavra chique pra função assincrona) ser executada

Neste código, fazemos:

1. Criamos uma arrow function assincrona chamada createUser, que recebe os valores do username e password
2. dentro da função, chamamos o await User.create. Este é um exemplo de criação de usuario usando o MongoDB como banco de dados, não se preocupa muito com isso, só saiba que o await faz com que o código espere o usuario ser criado antes de continuar
3. retornamos o User created successfully após o usuario ser criado

Note que, no output, o hello aparece antes do User created successfully, mesmo estando depois dele no código. Isso se deve ao fato de que a função foi executada de forma independente, como não chamamos um await antes (que não pode ser chamado fora de funções assincronas) o código continuou antes da função createUser terminar, o que fez com que o hello aparecesse primeiro e APOS o usuario ser criado o User created successfully apareceu

De novo, não se preocupa com isso se você ta começando, com o tempo tudo vai ficwr fácil, pode acreditar!

Boa sorte com os estudos!

Complementando os demais, acho que é importante saber a ideia geral (o que de fato é uma função), pois esse conceito vale para qualquer linguagem (inclusive JavaScript). O que muda de uma linguagem para outra são alguns detalhes, mas a ideia básica é essencialmente a mesma.

Resumindo bem grosseiramente, uma função nada mais é que um bloco de código que pode ser reutilizado.

Por exemplo, vamos supor que eu tenha vários números que correspondem a valores em dólar, e eu quero mostrá-los tanto em dólar quanto convertidos para reais. Ou seja, se o valor é 1.5 (1 dólar e 50 cents), eu quero mostrá-lo como "R$ 8,43" (assumindo que a cotação é 5,62).

Uma versão inicial em JavaScript seria assim:

// valores em dólares
var preco = 15.9;
var desconto = 5;
var valorFinal = preco - desconto;

// converter para reais
var taxaConversao = 5.62;
precoReais = preco * taxaConversao;
console.log('Preço dólares:', preco.toLocaleString('en-US', { style: 'currency', currency: 'USD' }));
console.log('Preço reais:', precoReais.toLocaleString('pt-BR', { style: 'currency', currency: 'BRL' }));

descontoReais = desconto * taxaConversao;
console.log('Desconto dólares:', desconto.toLocaleString('en-US', { style: 'currency', currency: 'USD' }));
console.log('Desconto reais:', descontoReais.toLocaleString('pt-BR', { style: 'currency', currency: 'BRL' }));

valorFinalReais = valorFinal * taxaConversao;
console.log('Valor Final dólares:', valorFinal.toLocaleString('en-US', { style: 'currency', currency: 'USD' }));
console.log('Valor Final reais:', valorFinalReais.toLocaleString('pt-BR', { style: 'currency', currency: 'BRL' }));

Por ora, para entender o código, saiba que toLocaleString serve para formatar o número, e os parâmetros seguintes indicam como formatá-lo. No caso, en-US e pt-BR são locales que correspondem ao inglês americano e português brasileiro, o que neste caso muda o separador decimal (ponto ou vírgula). Já o style: 'currency' indica que é um valor monetário, e currency indica se é dólar ("USD") ou real ("BRL"). Isso não é essencial para entender funções no momento, então continuemos...

A saída será algo como:

Preço dólares: $15.90
Preço reais: R$ 89,36
Desconto dólares: $5.00
Desconto reais: R$ 28,10
Valor Final dólares: $10.90
Valor Final reais: R$ 61,26

Mas reparou que há muito código repetitivo? Para cada um dos valores eu faço basicamente a mesma coisa: mostro em dólares, multiplico pela taxa de conversão e mostro em reais. Exatamente a mesma coisa. Se eu quisesse mudar a mensagem, ou alguma opção de formatação (por exemplo, mostrar a terceira casa decimal, que em muitos contextos é relevante), eu teria que mudar em todos eles.

Sendo assim, eu poderia pegar este trecho repetitivo e jogar em uma função:

function mostrarDolaresReais(valor, taxaConversao, nome) {
    var convertido = valor * taxaConversao;
    console.log(`{nome} dólares:`, valor.toLocaleString('en-US', { style: 'currency', currency: 'USD' }));
    console.log(`{nome} reais:`, convertido.toLocaleString('pt-BR', { style: 'currency', currency: 'BRL' }));
}

// valores em dólares
var preco = 15.9;
var desconto = 5;
var valorFinal = preco - desconto;

// converter para reais
var taxaConversao = 5.62;
mostrarDolaresReais(preco, taxaConversao, 'Preço');
mostrarDolaresReais(desconto, taxaConversao, 'Desconto');
mostrarDolaresReais(preco - desconto, taxaConversao, 'Valor Final');

E pronto, todo o código repetitivo foi jogado para a função. E a parte que varia (ou seja, os valores e a mensagem) é passada como parâmetros.

Ou seja, quando eu chamo a função assim: mostrarDolaresReais(preco, taxaConversao, 'Preço'); - estou dizendo que o parâmetro valor terá o valor da variável preco, a taxaConversao terá o valor da taxa de conversão (usei o mesmo nome dentro e fora da função, mas eles não são a mesma variável - talvez isso te confunda agora, mas fica uma dica para se aprofundar depois). E a string 'Preço' será atribuída ao parâmtro nome. Assim, dentro da função ela executa com estes valores.

Depois as chamadas seguintes fazem o mesmo, mas para o desconto e o valor final. Repare inclusive que eu posso passar diretamente o valor de preco - desconto: se eu não for usar esse valor para mais nada depois, nem precisa da variável valorFinal.

Assim o código fica mais organizado, e também mais fácil de manter - por exemplo, se eu quiser modificar o comportamento da função, ou encontrar algum erro nela, basta alterá-la apenas uma vez. É bem melhor que a versão anterior, na qual eu teria que mudar em três lugares.

E claro que dá para ir além. Por exemplo, as moedas também poderiam ser parâmetros, etc. Tudo depende da necessidade, claro (se é sempre dólar e real, aí não faria sentido parametrizar).

Enfim, a ideia básica é essa. Uma função é um bloco de código que pode ser reutilizado. E como já dito, esse é um conceito que vale para todas as linguagens. O que muda são os detalhes (alguns já foram ditos por outros), mas acho que vc já tem por onde começar.

https://www.youtube.com/watch?v=YgHQRdGZw3w

Esse acredito que vá te ajudar.

Fazer códigos, o que vai te fazer evoluir é fazer código. Quanto mais você codar mais você aprende.

Em relaçao as functions, imagine um trexo de código que printa na tela "Olá!"

console.log("Olá")

Agora imagine que você precise printar isso na tela várias vezes ao longo do código. Ficaria muitas repetições, ai pra facilitar, você pode criar uma funcão que faz isso:

function printarOla(){ console.log("Olá!") }

Agora ao invés de repetir o código, você pode simplesmente chamar a função que o código dentro dela será executado:

printarOla()

Esse exemplo é muito simles, mas começe por códigos fáceis pra entender o conceito, depois vai dificultando aos poucos.

Depois disso, pode começar com funções que recebam parâmetros. A clássica é a de somar:

function somar(a, b){ let resultado = a + b return resultado }

Ai é só chamar printando:

console.log(somar(1, 2))

Ou atribuir a uma variável:

let soma = somar(1, 2)

Enfim, é uma explicação bem simples, recomento ver vídeos sobre ou até mesmo usar o ChatGPT para ele te dar mais exemplos.

Uma function é um bloco de código que você pode usar para reaproveitar depois. Por exemplo, em vez de toda a vez que precisar brir uma porta você colocar passo-a-passo (pegar a maçaneta, virá-la e puxar a porta) você coloca essa instruções em um bloco e só chamada uma função abrirPorta(). Mas quando você abrir a porta, você quer mostrar uma mensagem personalizada, então você passa um parâmetro: abrirPorta(msg). Agora, na função teriamos:

{

• Segurar Maçaneta
• Virar maçaneta
• Puxar porta
• mostrar uma mensagem - console.log(msg)

A "msg" será o valor que você passar na função.
}

Exemplo de chamada e como ficaria jo bloco:

abrirPorta("Olá, tudo bem?")
(note que em aspas tem o valor do parâmetro)

como fica:

{

• Segurar Maçaneta
• Virar maçaneta
• Puxar porta
• mostrar uma mensagem - console.log("Olá, tudo bem?")

}

Mas pode ter certeza que a melhor maneira de aprender é codando.

Essa explicação que você procura é Lógica de Programação, sem ela você não consegue aplicar código algum,

por exemplo:

Você tem um projeto em mente um site ecommerce, um site nerd, de noticias, etc. Você pega a ideia do site e aplica a logica dentro dele e depois o código. No ecommerce tem o icone carrinho que você precisa colocar uma "Função" que ao clicar ele adicione +1 "Number" no checklist, ou a barra de pesquisa que para pesquisar você tem que colocar uma "Função" que percorra um "laço" de um array "se" tiver um ou mais strings dentro do array "iguais" mostra a sua pesquisa, "se não" mostre uma menssagem de erro.

Um livro bom para você aprender bem certinho, "Lógica de progrmação e algoritmos com JavaScript", e boa sorte.

maycony, pense numa function como uma fabrica, onde de um lado você coloca o porco e do outro lado da fabrica sai o bacon empacotado, o que te ajudaria muito seria um curso de logica de programação, pois você entenderia com maior profundidade, e decorar nao vai ajudar nesse caso, diferente de html e css o js usa logica de programacão o que o torna um pouco mais complexo, com a logica de programação você conseguen sair do 0 e fazer o algoritmo que precisar.

Cara, na programação é normal esquecer as coisas de vez em quando ou quase sempre kkkkkk, até por que não saberemos tudo sacou? É uma parada de demanda, por exemplo, caso eu esteja fazendo uma aplicação (seja real ou para estudo) e eu preciso de algo que nunca ouvi falar na vida pra resolver meu problema, eu vou lá e procuro como resolver com este algo, é algo sobre demanda. Então não decore as paradas, claro, você tem que saber pra que serve, em que momento usar, mas isso tudo vem com teoria + prática e muita pesquisa.

Obs: Não vou falar sobre funções, até por que nos comentários já tem muito boas explicações, é mais um simples texto do por que não decorar, sacou?