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:
- Criamos duas variaveis do tipo
int
, chamadasmyNum
emyNumTwo
, recebendo valores de1
e2
, respectivamente - chamamos a função
addNumbers
e passamos os valores das duas variaveis que criamos antes para ela, ficandoaddNumbers(myNum, myNumTwo)
- Criamos a função
addNumbers
que recebe dois valores, onumberOne
enumberTwo
. Estes dois valores serão aqueles que passamos quando chamamos a função - 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:
- criamos a função
getTime()
, que não receberá nenhum valor - A funcão
getTime
irá retornar a data atual com o objetoDate
- 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:
- Criamos uma
arrow function
assincrona
chamadacreateUser
, que recebe os valores dousername
epassword
- 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 oawait
faz com que o código espere o usuario ser criado antes de continuar - 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!
tirando algumas besteiras mais aprofuncadas
nem de longe são besteiras:
let x = {
i: 10,
a: () => console.log(this.i, this),
b: function() {
console.log(this.i, this);
}
}
x.a();
x.b();