#3 Desvendando o JavaScript functions #iniciante

Tempo de leitura: 6 minutos

Continuando nossa série desvendando o JavaScript, damos inicio ao nosso terceiro post, se você ainda você não leu os posts anteriores volte e leia!! Irá ajudar você a compreender os conceitos que serão abordados e conhecer um pouco mais sobre a história do JavaScript.

Agora então chegou a vez delas as tão comentadas functions ou funções dentro do mundo JavaScript. Vamos abordar suas estruturas e algumas diferenças entre elas.

Descrição

Em JavaScript função ou function é um “subprograma” que pode ser chamado por código externo ou interno nos casos onde ocorre a recursão à função. Em outras palavras uma function nada mais é do que um objeto que contém um bloco de código executável, esse bloco é isolado, não sendo possível acessá-lo externamente.

Funções são também conhecidas como objetos de primeira classe(first class objects), pois elas podem ter propriedades e métodos como qualquer outro objeto. O que as difere dos outros objetos é que as funções podem ser chamadas ou invocadas em outros objetos, como vimos no post anterior desta série, pois JavaScript não possui classes e sim objetos.

Funções podem ser de escopo global ou pertencer a um escopo local, e por serem de objetos de primeira classe podem ser passadas por parâmetro ou retornadas por outra função. Uma linguagem que tem suporte a First Class Functions, ou function literal, permite que funções sejam criadas a qualquer momento, armazenadas em memória como uma variável qualquer e podem ser referenciadas como tal, até mesmo no retorno de funções.

Toda função em JavaScript é um objeto function que para retornar um valor ela deve ter uma instrução return especificando o valor a ser retornado. Uma função sem um return retornará sempre o valor padrão undefined. No caso de um método construtor chamado com a palavra reservada new, o valor padrão é o valor do parâmetro this. Os parâmetros de uma função são chamados de argumentos da função. Se uma função muda o valor de um argumento, esta mudança não é refletida globalmente ou na chamada da função. Contudo, referência de objetos são valores também, e eles são especiais: se a função muda as propriedades do objeto referenciado, estas mudanças são visíveis fora da função, como é mostrado no exemplo a seguir:

/* Declara a função 'minhaFunção' */
function minhaFuncao(objeto) {
   objeto.marca = "Volkswagen";
 }
 /*
  * Declara a variável 'meucarro';
  * cria e inicializa um novo Objeto;
  * atribui a referência para 'meucarro'
  */
 var meucarro = {
   marca: "Honda",
   modelo: "Accord",
   ano: 1998
 };

 /* Exibe 'Honda' */
 console.log(meucarro.marca);

 /* Passa a referência do objeto para a função */
 minhaFuncao(meucarro);

 /*
  * Exibe 'Volkswagen' como valor para a propriedade 'marca'
  * do objeto, mudado pela função.
  */
 console.log(meucarro.marca);

A palavra reservada this não se refere a função sendo executada no momento, então você deve referenciar um objeto function pelo nome, mesmo dentro do corpo da função.

Diferença entre argumento e parâmetro

Antes de entrarmos em mais detalhes, é necessário saber a diferença entre dois termos que são frequentemente confundidos entre os desenvolvedores. São eles:

Parâmetros e Argumentos.

Parâmetro é a variável que irá receber um valor em uma função enquanto que um argumento é o valor (que pode originar de uma variável ou expressão) que você passa para a função. Você não passa parâmetros, você passa argumentos. Você recebe argumentos também, mas recebe em parâmetros. Você parametriza sua função com informações que virão posteriormente. Você argumenta com o que deseja executar uma função devidamente parametrizada. Pode haver menos os mais argumentos para cada parâmetro já que existem parâmetros que são opcionais e outros que podem ser listas variáveis de dados. Portanto não há uma relação de um para um e a distinção entre eles é importante.

// x e y são parâmetros 
function multiply (x, y) {
  return x * y;
}

//10 e 5 são argumentos 
var valor = multiply(10,5);

Criando funções

Há várias maneiras de se criar funções, vamos comentar algumas delas aqui abaixo:

Declaração

function nome([param[, param[, ... param]]]) {
   instruções
}

nome : O nome da função.
param : O nome de um argumento a ser passado para a função. Uma função pode ter até 255 argumentos.
instruções : As instruções que formam o corpo da função.

Expressão

([param] [, param]) => {
   instruções
}

param => expressão

param: O nome de um argumento. Quando não há argumentos deve ser indicado com o uso dos parênteses ( ). Para apenas um argumento os parênteses não são obrigatórios. (por exemplo foo => 1)
instruções ou expressão: Múltiplas instruções precisam ser envolvidas por chaves. Uma única expressão não requer chaves. A expressão também é implicitamente o valor de retorno desta função.

Declaração x Expressão

Veja as seguintes declarações:

Uma função definida com function de declaração atribuída à variável multiply

function multiply(x, y) {
   return x * y;
}

Uma função de expressão anônima atribuída à variável multiply

var multiply = function(x, y) {
   return x * y;
};

Uma função de expressão chamada func_name atribuída à variável multiply

var multiply = function func_name(x, y) {
   return x * y;
}

As diferenças são bem sutis, por isso muita atenção aqui:

Uma diferença bem clara pode ser vista em uma função declarada no formato de expressão. O nome da função não pode ser alterado, enquanto a variável à qual a função está atribuída pode ser reatribuída. A função de expressão por exemplo pode ser usada somente dentro do corpo(escopo) da função. A tentativa de usá-lo fora do corpo da função resultará em um error (ou undefined se o nome da função foi declarado anteriormente por meio de uma declaração de variável). Por exemplo:

var multiply = function func_name(x, y) {
   return x * y;
}
alert(func_name(a,b)); // throws an error

No próximo post da serie abordaremos os operadores seus conceitos práticos e fundamentos, as boas e más práticas de programação.

Gostou do conteúdo? não deixe de seguir a uebile nas redes sociais, pois toda semana tem post novo aqui no blog com mais dicas para o seu impulso digital.