Nenhum produto encontrado nessa seleção.
Funções em Javascript são uma parte essencial para sua aplicação. Com elas é fácil criar tarefas que podem ser reutilizadas em várias partes do código, o que economiza tempo no seu desenvolvimento e deixa sua aplicação ainda mais fácil para ser mantida.
Existem três tipos de funções que podem ser criadas em Javascript, funções estáticas, funções anônimas e funções literais, cada uma com suas vantagens e desvantagens.
Funções estáticas em Javascript
As funções estáticas podem ser criadas com a palavra function, o nome da função, parênteses contendo os parâmetros separados por vírgula (parâmetro_1, parâmetro_2) ou em branco (), e, por fim, o corpo da função entre chaves { … }.
Veja um exemplo de função sem parâmetro:
// Cria a função
function minha_funcao() {
// Ações (corpo) da função
alert('Oi');
}
// Chama a função
minha_funcao();No exemplo acima, criei uma função que tem a ação mais simples possível em Javascript, mostrar um alerta com a palavra "Oi" na tela do navegador do usuário.
Logo em seguida, chamei a função para que ela fosse executada.
Quando eu digo "Chama a função", quero dizer que desejo que o Javascript execute as ações que criei dentro do corpo daquela função.
Veja um exemplo de função estática com um parâmetro:
// Cria a função
function minha_funcao( parametro ) {
// Ações (corpo) da função
alert( parametro );
}
// Chama a função com um argumento
minha_funcao('Olá mundo!');O exemplo acima mostra um como criar uma função com um parâmetro, em seguida, como chamar a função enviando argumentos.
Quando digo "argumentos", quero dizer que estou fazendo a função usar o argumento que está entre parênteses como o parâmetro da mesma posição.
No caso do exemplo acima, quando "chamo a função" com um argumento "Olá mundo!", o Javascript automaticamente faz com que este argumento seja tratado como o parâmetro "parametro" da função, e eu posso utilizar este parâmetro como uma variável dentro do corpo da função.
Teoricamente seria como se eu falasse que parametro = 'Olá mundo!'.
Veja um exemplo de uma função com 3 parâmetros:
// Cria a função com 3 parâmetros
function minha_funcao( parametro_1, parametro_2, parametro_3 ) {
// Ações (corpo) da função
document.writeln('Este é o valor do parâmetro 1: ' + parametro_1 + '<br>');
document.writeln('Este é o valor do parâmetro 2: ' + parametro_2 + '<br>');
document.writeln('Este é o valor do parâmetro 3: ' + parametro_3 + '<br>');
}
// Chama a função com 3 argumentos
minha_funcao( "Sou uma string!", 11.25, false );O resultado do trecho acima será:
Este é o valor do parâmetro 1: Sou uma string! Este é o valor do parâmetro 2: 11.25 Este é o valor do parâmetro 3: false
Ou seja:
parametro_1 = "Sou uma string!"; parametro_2 = 11.25; parametro_3 = false;
Para acessar os valores dos argumentos dentro da função, basta acessar os parâmetros na mesma ordem dos argumentos. Porém, o número de parâmetros deve ser o mesmo de números de argumentos quando você chamar a função.
Você também pode definir os valores dos parâmetros, caso esqueça de enviar um valor quando "chamar a função" o valor definido será utilizado. Por outro lado, se você enviar um argumento qualquer, o valor definido será substituído pelo argumento.
// Função com parâmetro definido
function diz_ola ( cumprimento = 'Olá mundo!' ) {
alert( cumprimento );
}
// Chamo a função, porém esqueci do parâmetro
diz_ola();
// Resultado: Olá mundo!
// Mas agora eu o envio
diz_ola('Agora sim!');
// Resultado: Agora sim!
As funções estáticas são carregadas assim que a página é carregada, e o seu conteúdo é utilizado todas as vezes que você chamar a função.
Funções podem receber quantos parâmetros forem necessários para a sua aplicação funcionar, além disso, tais parâmetros não precisam ter um valor primitivo, você pode enviar um array, um objeto, outra função, e qualquer coisa como parâmetro. Porém, valores primitivos não são alterados pela função, apenas objetos.
Veja um exemplo:
// Um array
var meu_array = ['Um', 'Dois'];
var variavel = 'Olá';
// A função que vai tentar alterar os valores
function altera_valores( param1, param2 ) {
param1 = 'Oi';
param2[2] = "Três";
}
// Mostra os dados na tela
document.write( meu_array + '<br>' );
document.write( variavel + '<br>' );
/**
* Resultado:
* Um,Dois
* Olá
*/
// Chama a função
altera_valores( variavel, meu_array );
// Mostra os dados novamente na tela
document.write( meu_array + '<br>' );
document.write( variavel + '<br>' );
/**
* Resultado:
* Um,Dois,Três
* Olá
*/
Perceba no trecho acima, que a variável permaneceu inalterada, porém, o valor do array foi modificado. Antes de "chamar a função" seu valor era "Um, Dois", depois de chamar a função, seu valor foi modificado para "Um, Dois, Três".
Return de funções em Javascript
Funções em Javascript podem ter um retorno, ou seja, elas retornarão um valor para que este possa ser utilizado por uma variável, ou em uma condição, ou como preferir.
Para que as funções em Javascript retornem um valor, você deve utilizar a palavra "return".
Veja um exemplo:
// Função que multiplica os parâmetros
function multiplica (a, b, c, d) {
return a * b * c * d;
}
// Obtém o valor da função
var valor = multiplica( 3, 2, 5, 20 );
// Alerta o resultado de 3 * 2 * 5 * 20 = 600
alert( valor );No trecho acima, retornei o valor diretamente na palavra "return", mas eu também posso fazer toda a ação, salvar em uma variável e retornar apenas o valor dessa variável. Exemplo:
// Função que multiplica os parâmetros
function multiplica (a, b, c, d) {
var resultado = a * b * c * d;
// Retorna
return resultado;
}
// Obtém o valor da função
var valor = multiplica( 3, 2, 5, 20 );
// Alerta o resultado de 3 * 2 * 5 * 20 = 600
alert( valor );
A variável "resultado", criada utilizando a palavra "var", é uma variável local, ou seja, só pode ser acessada dentro da função. Ela será criada quando a função for executada e deletada logo em seguida, este processo ocorre todas as vezes que você chamar a função dentro da sua aplicação.
Escopo de funções em Javascript
Lembra na aula sobre Tipos de dados e variáveis em Javascript, que falamos sobre variáveis locais e globais? Vamos relembrar: Uma variável local é uma variável que só pode ser acessada dentro da função que a criou, porém, para que isso funcione você deve criar a variável utilizando a palavra "var".
Veja um exemplo:
// Função de teste
function teste() {
var oi = 'Oi mundo!';
// Resultado Oi mundo!
alert(oi);
}
// Chamo a função
teste();
// Erro: oi is not defined
alert(oi);
Perceba que no trecho acima, criei uma variável "oi" e imprimi seu valor dentro da função, porém, ao tentar fazer o mesmo fora do corpo da função, recebi um erro dizendo que a variável "oi" não estava definida.
Isso acontece porque a variável "oi" é uma variável local da função "teste" (ela foi criada utilizando a palavra var). Ela só é executada quando você chamar a função e é apagada da memória logo em seguida.
Por outro lado, se você precisar de variáveis globais na sua função em Javascript (uma variável que deva ser acessada dentro e fora da função), basta criar a variável fora da função, ou simplesmente omitir a palavra "var".
Veja um exemplo para se criar uma variável global fora da função:
// Variável
var oi = 'Oi mundo!';
// Teste
function teste() {
// Resultado Oi mundo!
alert(oi);
}
// Chamo a função
teste();
// Oi mundo!
alert(oi);
Agora um exemplo da variável global, dentro da função, sem a palavra var:
// Teste
function teste() {
// Variável
oi = 'Oi mundo!';
// Resultado Oi mundo!
alert(oi);
}
// Chamo a função
teste();
// Resultado Oi mundo!
alert(oi);
Como você já deve ter imaginado, quando a sua variável está dentro da função, mesmo que ela seja criada sem a palavra "var", ela só será criada quando você chamar a função.
Se você fizer o que vou mostrar no trecho abaixo, terá um erro na sua função em Javascript.
// Teste
function teste() {
// Variável
oi = 'Oi mundo!';
// Resultado Oi mundo!
alert(oi);
}
// Resultado erro
alert(oi);
Um resumo sobre variáveis locais e globais:
- Variáveis locais são criadas quando a função é executada, e apagadas assim que a função termina sua ação
- Variáveis globais dentro de funções em Javascript são criadas quando a função é executada e só eliminadas quando a página é fechada
- Variáveis globais fora de funções são carregadas junto com a página e só apagadas quando a página é fechada
Este é o escopo das variáveis globais e locais.
Funções anônimas em Javascript
Funções em Javascript são objetos como todos os outros, como tal, você pode criar seus valores da seguinte maneira:
var oi = new Function('x', 'y', 'return x * y');
alert( oi(2,2) );
Ou seja, crio uma função como se fosse um objeto comum (e, na verdade, é) utilizando a seguinte estrutura:
- Uma variável;
- A palavra new;
- Um construtor Function;
- Parâmetro entre parênteses;
- O último parâmetro é o corpo da função anônima.
As funções anônimas são criadas dinamicamente, o que significa que cada vez que você tentar utilizar essa função, ela será recriada e apagada após a execução.
Funções literais em Javascript
As funções literais são simplesmente criadas literalmente. Sei que parece confuso e óbvio ao mesmo tempo, porém, assim como já expliquei sobre outros objetos em Javascript, tudo pode ser criado literalmente utilizando uma variável.
Veja um exemplo:
// Função literal
var funcao = function( x ){
alert( x );
}
// Chamo a função
funcao('Olha o alerta!');Ou seja, simplesmente crio uma variável e digo ao Javascript que ela é uma função.
A única diferença das funções estáticas para as funções literais, é que você não coloca o nome da função após a palavra function, e sim em uma variável.
Links úteis
Abaixo alguns links úteis para completar seu conhecimento:
Outras aulas
Caso tenha perdido a aula anterior, segue o link:
Próxima aula:
Caso queira visualizar todas as aulas dessa sessão em ordem cronológica invertida:
