JavaScript - 4. Funções

Para que serve uma função em um JavaScript? Simplesmente para incluir nesta função várias ações que você queira executar para controlar algum item que deseja, ou vários itens ao mesmo tempo, sendo acionados por algum clique, ou evento no HTML.

Para criar uma função simples, basta realizar da seguinte forma:

function tata() {alert("olá mundo!!")}

Isto não irá executar o "olá mundo!!", mas somente ao chamar a função. Para chamar a função, basta em qualquer lugar no script chamar desta forma:

tata()

E então teremos o resultado:

Há outra forma para criar uma função, que é atribuindo o seu valor para uma variável, e esta por sua vez, se tornará uma função.

var tata = function(){ alert("olá mundo!!") }

Também pode criar funções contendo variáveis de entrada.

var tata = function(nome) { alert("Olá, tudo bem com você "+nome+"?") }

Para chamar a função, deve-se passar o valor:

tata("Ricardo Teixeira");

 Caso queira, poderá criar uma função que irá retornar um valor que poderá ser usado em outra variável, como por exemplo:

var calculoX = function(num) { return num * 23 / 2 };
var novoValor = calculoX(200);
alert(novoValor);

O resultado do novoValor será de: 2300, mas repare nesta seguinte função:

var calculoX = function(num) { return num + 23 / 2 };
var novoValor = calculoX(200);
alert(novoValor);

Qual seria o resultado? Se você achou que é algo abaixo de 200, você está bem equivocado. O JavaScript, assim como na expressão matemática, segue a mesma regra de precedência: divisão e multiplicação tem prioridade sobre soma e subtração.

Funções IIFE

Immediately-Invoked Function Expression

Você pode escrever um código JavaScript colocando variáveis, e funções no seu código, como por exemplo:

var livros = 50;
function somarLivros(qte) {
   livros = livros + qte;
};
somarLivros(50);
console.log(livros) // 100 livros.

Mas e se houver alguma outra função que utiliza a mesma variável livros para executar alguma outra mecânica, ou funcionalidade no seu sistema, como um código JavaScript de terceiros? Alguma coisa pode não funcionar como esperado.

Para isto, é uma prática de bom desenvolvimento, criar as funções e executá-las a partir de outras funções, usando funções que serão imediatamente chamadas, mantendo as variáveis protegidas.

Veja o mesmo exemplo de código, usando a metodologia de boa prática usando apenas funções:

function somarLivros(qte) {
   livros = livros + qte;
};
(function(){
  var livros = 50;
  somarLivros(50);
})();
console.log(livros) // Uncaught ReferenceError: livros is not defined

É bem comum programadores confundirem este padrão de desenvolvimento com algum evento que ocorreu na página como "document.onload", mas este conceito é errado, apenas porque ao testar o código, o valor não está disponível, mas ao executar o código, ele ficará acessível e funcional, mas a realidade é que o código é executado imediatamente assim que ele é chamado, e como a variável está sendo declarada dentro das chaves " { } ", não existe no escopo global do navegador, ou seja, o valor não ficará disponível se chamá-lo fora das chaves.

Isto é bom para evitar conflitos entre várias funções em uma mesma página Web.