Funes

Definindo Funes

Declarando uma funo

A definio da funo (tambm chamada de declarao de funo) consiste no uso da palavra chave function, seguida por:

• Nome da Funo.
• Lista de argumentos para a funo, entre parnteses e separados por vrgulas.
• Declaraes JavaScript que definem a funo, entre chaves { }.

Por exemplo, o cdigo a seguir define uma funo simples chamada square:

function square(numero) {
  return numero * numero;
}

A funo square recebe um argumento chamado numero. A funo consiste em uma instruo que indica para retornar o argumento da funo (isto , numero) multiplicado por si mesmo. A declarao return especifica o valor retornado pela funo.

return numero * numero;

Parmetros primitivos (como um nmero) so passados para as funes por valor; o valor passado para a funo, mas se a funo altera o valor do parmetro, esta mudana no reflete globalmente ou na funo chamada.

Se voc passar um objeto (ou seja, um valor no primitivo, tal como Array ou um objeto definido por voc) como um parmetro e a funo alterar as propriedades do objeto, essa mudana visvel fora da funo, conforme mostrado no exemplo a seguir:

function minhaFuncao(objeto) {
  objeto.make = "Toyota";
}

var meucarro = { make: "Honda", model: "Accord", year: 1998 };
var x, y;

x = meucarro.make; // x recebe o valor "Honda"

minhaFuncao(meucarro);
y = meucarro.make; // y recebe o valor "Toyota"
// (a propriedade make foi alterada pela funo)

Expresso de funo

Embora a declarao de funo acima seja sintaticamente uma declarao, funes tambm podem ser criadas por uma expresso de funo. Tal funo pode ser annima; ele no tem que ter um nome. Por exemplo, a funo square poderia ter sido definida como:

var square = function (numero) {
  return numero * numero;
};
var x = square(4); //x recebe o valor 16

No entanto, um nome pode ser fornecido com uma expresso de funo e pode ser utilizado no interior da funo para se referir a si mesma, ou em um debugger para identificar a funo em stack traces:

var fatorial = function fac(n) {
  return n < 2 ? 1 : n * fac(n - 1);
};

console.log(fatorial(3));

As expresses de funo so convenientes ao passar uma funo como um argumento para outra funo. O exemplo a seguir mostra uma funo map sendo definida e, em seguida, chamada com uma funo annima como seu primeiro parmetro:

function map(f, a) {
  var result = []; // Cria um novo Array
  var i;
  for (i = 0; i != a.length; i++) result[i] = f(a[i]);
  return result;
}

O cdigo a seguir:

map(
  function (x) {
    return x * x * x;
  },
  [0, 1, 2, 5, 10],
);

retorna [0, 1, 8, 125, 1000].

Em JavaScript, uma funo pode ser definida com base numa condio. Por exemplo, a seguinte definio de funo define minhaFuncao somente se num igual a 0:

var minhaFuncao;
if (num == 0) {
  minhaFuncao = function (objeto) {
    objeto.make = "Toyota";
  };
}

Alm de definir funes, voc tambm pode usar o construtor Function para criar funes a partir de uma string em tempo real, como no mtodo eval().

Um mtodo uma funo invocada por um objeto. Leia mais sobre objetos e mtodos em Trabalhando com Objetos.

Chamando funes

A definio de uma funo no a executa. Definir a funo simplesmente nomear a funo e especificar o que fazer quando a funo chamada. Chamar a funo executa realmente as aes especificadas com os parmetros indicados. Por exemplo, se voc definir a funo square, voc pode cham-la do seguinte modo:

square(5);

A declarao anterior chama a funo com o argumento 5. A funo executa as instrues e retorna o valor 25.

Funes devem estar no escopo quando so chamadas, mas a declarao de uma funo pode ser puxada para o topo (aparecem abaixo da chamada no cdigo), como neste exemplo:

console.log(square(5));
/* ... */
function square(n){return n*n}

O escopo de uma funo a funo na qual ela declarada, ou todo o programa se ela declarada no nvel superior.

console.log(square(5));
var square = function (n) {
  return n * n;
};

Os argumentos de uma funo no esto limitados a strings e nmeros. Voc pode passar objetos para uma funo. A funo show_props (definido em Trabalhando com Objetos) um exemplo de uma funo que recebe um objeto como um argumento.

Um funo pode chamar a si mesma. Por exemplo, a funo que calcula os fatoriais recursivamente:

function fatorial(n) {
  if (n == 0 || n == 1) return 1;
  else return n * fatorial(n - 1);
}

Voc poderia, ento, calcular os fatoriais de um a cinco:

var a, b, c, d, e;
a = fatorial(1); // a recebe o valor 1
b = fatorial(2); // b recebe o valor 2
c = fatorial(3); // c recebe o valor 6
d = fatorial(4); // d recebe o valor 24
e = fatorial(5); // e recebe o valor 120

H outras maneiras de chamar funes. Muitas vezes h casos em que uma funo precisa ser chamada dinamicamente, ou o nmero de argumentos de uma funo varia, ou em que o contexto da chamada de funo precisa ser definido para um objeto especfico determinado em tempo de execuo. Acontece que as funes so, por si mesmas, objetos, e esses objetos por sua vez tm mtodos (veja objeto Function). Um desses, o mtodo apply(), pode ser usado para atingir esse objetivo.

Escopo da funo

As variveis definidas no interior de uma funo no podem ser acessadas de nenhum lugar fora da funo, porque a varivel est definida apenas no escopo da funo. No entanto, uma funo pode acessar todas variveis e funes definida fora do escopo onde ela est definida. Em outras palavras, a funo definida no escopo global pode acessar todas as variveis definidas no escopo global. A funo definida dentro de outra funo tambm pode acessar todas as variveis definidas na funo hospedeira e outras variveis ao qual a funo hospedeira tem acesso.

// As seguintes variveis so definidas no escopo global
var num1 = 20,
  num2 = 3,
  nome = "Chamahk";

// Esta funo  definida no escopo global
function multiplica() {
  return num1 * num2;
}

multiplica(); // Retorna 60

// Um exemplo de funo aninhada
function getScore() {
  var num1 = 2,
    num2 = 3;

  function add() {
    return nome + " scored " + (num1 + num2);
  }

  return add();
}

getScore(); // Retorna "Chamahk scored 5"

Escopo e a pilha de funo

Recurso

Uma funo pode referir-se e chamar a si prpria. H trs maneiras de uma funo referir-se a si mesma:

1. o nome da funo
2. arguments.callee
3. uma varivel no escopo que se refere a funo

Por exemplo, considere a seguinte definio de funo:

var foo = function bar() {
  // declaracoes
};

Dentro do corpo da funo, todos, a seguir, so equivalentes:

1. bar()
2. arguments.callee()
3. foo()

Uma funo que chama a si mesma chamada de funo recursiva. Em alguns casos, a recursividade anloga a um lao. Ambos executam o cdigo vrias vezes, e ambos necessitam de uma condio (para evitar um lao infinito, ou melhor, recurso infinita, neste caso). Por exemplo, o seguinte lao:

var x = 0;
while (x < 10) {
  // "x < 10" a condio do lao
  // faa coisas
  x++;
}

pode ser convertido em funo recursiva e uma chamada para a funo:

function loop(x) {
  if (x >= 10)
    // "x >= 10" a condio de parada (equivalente a "!(x < 10)")
    return;
  // faa coisas
  loop(x + 1); // chamada recursiva
}
loop(0);

No entanto, alguns algoritmos no podem ser simples laos iterativos. Por exemplo, conseguir todos os ns da estrutura de uma rvore (por exemplo, o DOM) mais fcil se feito recursivamente:

function walkTree(node) {
  if (node == null)
    //
    return;
  // faa algo com o n
  for (var i = 0; i < node.childNodes.length; i++) {
    walkTree(node.childNodes[i]);
  }
}

Em comparao ao lao da funo, cada chamada recursiva realiza outras chamadas recursivas.

possvel converter qualquer algoritmo recursivo para um no recursivo, mas muitas vezes a lgica muito mais complexa e exige o uso de pilhas. Na verdade a prpria recurso usa pilha: a pilha de funo.

O comportamento da pilha pode ser vista a seguir no exemplo:

function foo(i) {
  if (i < 0) return;
  document.writeln("begin:" + i);
  foo(i - 1);
  document.writeln("end:" + i);
}
foo(3);

que produz:

begin:3
begin:2
begin:1
begin:0
end:0
end:1
end:2
end:3

Funes aninhadas e closures

Voc pode aninhar uma funo dentro de outra. A funo aninhada (interna) acessvel apenas para a funo que a contm (exterior). Isso constitui tambm uma closure. Uma closure uma expresso (tipicamente uma funo) que pode ter variveis livres em conjunto com um ambiente que conecta estas variveis (que "fecha" a expresso).

Uma vez que uma funo aninhada uma closure, isto significa que uma funo aninhada pode "herdar" os argumentos e variveis de sua funo de conteno. Em outras palavras, a funo interior contm o escopo da funo exterior.

Em resumo:

• A funo interna s pode ser acessada a partir de declaraes em funo externa.
• A funo interna forma uma closure: a funo interna pode usar os argumentos e variveis da funo externa, enquanto a funo externa no pode usar os argumentos e variveis da funo interna.

O exemplo a seguir mostra as funes aninhadas:

function addSquares(a, b) {
  function square(x) {
    return x * x;
  }
  return square(a) + square(b);
}
a = addSquares(2, 3); // retorna 13
b = addSquares(3, 4); // retorna 25
c = addSquares(4, 5); // retorna 41

Uma vez que a funo interna forma uma closure, voc pode chamar a funo externa e especificar argumentos para a funo externa e interna:

function fora(x) {
  function dentro(y) {
    return x + y;
  }
  return dentro;
}
fn_inside = fora(3); // Pense nisso como: Receba uma funo que adicionar 3 ao que quer que voc repasse para ela
result = fn_inside(5); // retorna 8

result1 = fora(3)(5); // retorna 8

Preservao de variveis

Observe como x preservado quando dentro retornado. Uma closure deve preservar os argumentos e variveis em todos os escopos que ela referencia. Uma vez que cada chamada fornece potencialmente argumentos diferentes, uma nova closure criada para cada chamada de fora. A memria s poder ser liberada quando o dentro retornado j no mais acessvel.

Isso no diferente de armazenar referncias em outros objetos, mas muitas vezes menos bvio, porque um no define diretamente as referncias e no pode inspecion-las.

Mltiplas funes aninhadas

Funes podem ter mltiplo aninhamento, por exemplo, a funo (A) contm a funo (B) que contm a funo (C). Tanto as funes B e C formam uma closure, ento B pode acessar A, e C pode acessar B. Alm disso, uma vez que C pode acessar B que pode acessar A, C tambm pode acessar A. Assim, a closure pode conter vrios escopos; eles recursivamente contm o escopo das funes que os contm. Isso chamado encadeamento de escopo. (O motivo de ser chamado "encadeamento" ser explicado mais tarde).

Considere o seguinte exemplo:

function A(x) {
  function B(y) {
    function C(z) {
      alert(x + y + z);
    }
    C(3);
  }
  B(2);
}
A(1); // Exibe um alerta com o valor 6 (1 + 2 + 3)

Neste exemplo, C acessa y do B e x do A. Isso pode ser feito porque:

1. B forma uma closure incluindo A, isto , B pode acessar argumentos e variveis de A.
2. C forma uma closure incluindo B.
3. Devido a closure B inclui A, a closure C inclui A, C pode acessar tanto argumentos e variveis de B como de A. Em outras palavras, C encadeia o escopo de B e A, nesta ordem.

O inverso, no entanto, no verdadeiro. A no pode acessar C, porque A no pode acessar qualquer argumento ou varivel de B. Assim, C privado somente a B.

Conflitos de nome

Quando dois argumentos ou variveis nos escopos da closure tem o mesmo nome, h um conflito de nome. Mas escopos internos tem prioridade, por isso o escopo mais interno tem a maior prioridade, enquanto que o escopo mais externo tem a menor. Esta a cadeia de escopo. O primeiro da cadeia o escopo mais interno, e o ltimo o escopo mais externo. Considere o seguinte:

function fora() {
  var x = 10;
  function dentro(x) {
    return x;
  }
  return dentro;
}
result = fora()(20); // retorna 20 em vez de 10

O conflito de nome acontece na declarao return x e est entre o parmetro x de dentro e a varivel x de fora. A cadeia de escopo aqui {dentro, fora, objeto global}. Por isso o x de dentro tem precedncia sobre o x de fora, e 20 (x de dentro) retornado em vez de 10 (x de fora).

Closures

Closures so um dos recursos mais poderosos de JavaScript. JavaScript permite o aninhamento de funes e garante acesso completo funo interna a todas as variveis e funes definidas dentro da funo externa (e todas as outras variveis e funes que a funo externa tem acesso). No entanto, a funo externa no tem acesso s variveis e funes definidas dentro da funo interna. Isto proporciona uma espcie de segurana para as variveis da funo interna. Alm disso, uma vez que a funo interna tem acesso ao escopo da funo externa, as variveis e funes definidas na funo externa vo durar na memria mais do que a prpria funo externa, isto se a funo interna permanecer na memria mais tempo do que a funo externa. Uma closure criada quando a funo interna de alguma forma disponibilizada para qualquer escopo fora da funo externa.

var pet = function (nome) {
    // A funo externa define uma varivel "nome"
    var getNome = function () {
      return nome; // A funo interna tem acesso  varivel "nome"  da funo externa
    };

    return getNome; // Retorna a funo interna, expondo-a assim para escopos externos
  },
  myPet = pet("Vivie");

myPet(); // Retorna "Vivie"

Ela pode ser mais complexa que o cdigo acima. Um objeto contendo mtodos para manipular as variveis da funo externa pode ser devolvida.

var criarPet = function (nome) {
  var sex;

  return {
    setNome: function (newNome) {
      nome = newNome;
    },

    getNome: function () {
      return nome;
    },

    getSex: function () {
      return sex;
    },

    setSex: function (newSex) {
      if (
        typeof newSex == "string" &&
        (newSex.toLowerCase() == "macho" || newSex.toLowerCase() == "fmea")
      ) {
        sex = newSex;
      }
    },
  };
};

var pet = criarPet("Vivie");
pet.getNome(); // Vivie

pet.setNome("Oliver");
pet.setSex("macho");
pet.getSex(); // macho
pet.getNome(); // Oliver

Nos cdigos acima, a varivel nome da funo externa acessvel para as funes internas, e no h nenhuma outra maneira para acessar as variveis internas, exceto pelas funes internas. As variveis internas da funo interna atuam como armazenamento seguro para as funes internas. Elas armazenam "persistentes", mas seguros, os dados com os quais as funes internas iro trabalhar. As funes no tem que ser atribudas a uma varivel, ou ter um nome.

var getCode = (function () {
  var secureCode = "0]Eal(eh&2"; // Um cdigo que no queremos que pessoas de fora sejam capazes de modificar

  return function () {
    return secureCode;
  };
})();

getCode(); // Retorna o secureCode

H, no entanto, uma srie de armadilhas que se deve ter cuidado ao usar closures. Se uma funo fechada define uma varivel com o mesmo nome de uma varivel em um escopo externo, no h nenhuma maneira de se referir para a varivel em um escopo externo novamente.

var createPet = function (nome) {
  // Funo externa define uma varivel chamada "nome"
  return {
    setNome: function (nome) {
      // Funo fechada define uma varivel chamada "nome"
      nome = nome; // ??? Como podemos acessar o "nome" definido pela funo externa ???
    },
  };
};

A palavra reservada this muito complicada em closures, elas tm de ser usadas com muito cuidado. O objeto ao que this se refere depende completamente de onde a funo foi chamada, ao invs de onde ela foi definida.

Usando objeto de argumentos

Os argumentos de uma funo so mantidos em um objeto do tipo array. Dentro de uma funo, voc pode enderear os argumentos passados para ele conforme:

arguments[i];

onde i um nmero ordinal do argumento, comeando com zero. Ento, o primeiro argumento passado para a funo seria arguments[0]. O nmero total de argumentos indicado por arguments.length.

Usando o objeto arguments, voc pode chamar a funo com mais argumentos do que o formalmente declarado. Isso muitas vezes til se voc no sabe de antemo quantos argumentos sero passados para a funo. Voc pode usar arguments.length para determinar a quantidade de argumentos passados para a funo, e ento acessar cada argumento usando o objeto arguments.

Por exemplo, considere uma funo que concatena vrias strings. O argumento formal para a funo uma string que especifica os caracteres que separam os itens para concatenar. A funo definida como segue:

function myConcat(separador) {
  var result = "", // inicializa a lista
    i;
  // itera por meio de argumentos
  for (i = 1; i < arguments.length; i++) {
    result += arguments[i] + separador;
  }
  return result;
}

Voc pode passar qualquer quantidade de argumentos para esta funo, e ela concatena cada argumento na string "list":

// retorna "red, orange, blue, "
myConcat(", ", "red", "orange", "blue");

// retorna "elephant; giraffe; lion; cheetah; "
myConcat("; ", "elephant", "giraffe", "lion", "cheetah");

// retorna "sage. basil. oregano. pepper. parsley. "
myConcat(". ", "sage", "basil", "oregano", "pepper", "parsley");

Veja objeto Function na referncia do JavaScript para maiores informaes.

Parmetros de funo

Comeando com ECMAScript 6, h dois tipos novos de parmetros: parmetros padro e parmetros rest.

Parmetros padro

Em JavaScript, parmetros padres de funes so undefined. No entanto, em algumas situaes pode ser til definir um valor padro diferente. Isto onde os parmetros padro podem ajudar.

No passado, a estratgia geral para definir padres era testar os valores de parmetro no corpo da funo e atribuir um valor se eles fossem undefined. Se, no exemplo a seguir, nenhum valor fornecido para b na chamada, seu valor seria undefined ao avaliar a*b e a chamada para multiplicar retornaria NaN. No entanto, isso pego com a segunda linha neste exemplo:

function multiplicar(a, b) {
  b = typeof b !== "undefined" ? b : 1;

  return a * b;
}

multiplicar(5); // 5

Com parmetros padro, a verificao no corpo da funo no mais necessria. Agora voc pode simplesmente colocar 1 como valor padro para b no campo de declarao de parmetros:

function multiplicar(a, b = 1) {
  return a * b;
}

multiplicar(5); // 5

Mais detalhes, consulte parmetros padro na referncia.

Parmetros rest

A sintaxe de parmetro rest permite representar um nmero indefinido de argumentos como um array. No exemplo, usamos parmetros rest para coletar argumentos do segundo argumento ao ltimo. Ento os multiplicamos pelo primeiro argumento. Neste exemplo usado uma arrow function, que ser introduzida na prxima seo.

function multiplicar(multiplicador, ...args) {
  return args.map((x) => multiplicador * x);
}

var arr = multiplicar(2, 1, 2, 3);
console.log(arr); // [2, 4, 6]

Funes de seta

Uma expresso funo de seta (anteriormente conhecida como funo de seta gorda) tem uma sintaxe pequena em comparao com a expresso de funo e lexicalmente vincula o valor this. Funes de seta so sempre annimas. Consulte tambm no blog hacks.mozilla.org no post: "ES6 In Depth: Arrow functions".

Dois fatores influenciaram a introduo de funes de seta: funes mais curtas e o lxico this.

Funes curtas

Em alguns padres funcionais, funes curtas so bem-vindas. Compare:

var a = ["Hydrogen", "Helium", "Lithium", "Beryllium"];

var a2 = a.map(function (s) {
  return s.length;
});

var a3 = a.map((s) => s.length);

Lxico this

At as funes de seta, cada nova funo definia seu prprio valor this (um novo objeto no caso de um construtor, indefinido em chamadas de funo no modo estrito, o objeto de contexto se a funo chamada como um "mtodo de objeto", etc.). Isso pode ser irritante com um estilo de programao orientada a objetos.

function Pessoa() {
  // O construtor Pessoa() define 'this' como sendo ele.
  this.idade = 0;
  setInterval(function crescer() {
    // No modo no estrito, a funo crescer define 'this'
    // como o objeto global, o que  diferente do 'this'
    // definido pelo construtor Pessoa().
    this.idade++;
  }, 1000);
}
var p = new Pessoa();

No ECMAScript 3/5, este problema foi resolvido atribuindo o valor em this a uma varivel que poderia ser fechada.

function Pessoa() {
  var self = this; // Alguns preferem 'that' em vez de 'self'.
  // Escolha um e seja consistente.
  self.idade = 0;

  setInterval(function crescer() {
    // A chamada de retorno refere-se  varivel 'self' na qual
    // o valor  o objeto esperado.
    self.idade++;
  }, 1000);
}

Como alternativa, uma funo vinculada poderia ser criada para que o valor da propriedade this seja passado para a funo crescer().

Funes de seta capturam o valor this do contexto delimitado, ento o cdigo a seguir funciona conforme o esperado.

function Pessoa(){
  this.idade = 0;

  setInterval(() => {
    this.idade++; // propriedade |this|refere ao objeto pessoa
  }, 1000);
}

var p = new Pessoa();

Funes pr-definidas

JavaScript tem vrias funes pr-definidas:

eval()

O mtodo eval() avalia cdigo JavaScript representado como uma string.

uneval()

O mtodo uneval() cria uma representao de string do cdigo-fonte de um Object.

isFinite()

A funo global isFinite() determina se o valor passado um nmero finito. Se necessrio, o parmetro primeiro convertido para um nmero.

isNaN()

A funo isNaN() determina se um valor NaN ou no. Nota: coero dentro da funo isNaN tem regras interessantes; voc pode, alternativamente, querer usar Number.isNaN(), como definido no ECMAScript 6, ou voc pode usar typeof para determinar se o valor no um nmero.

parseFloat()

A funo parseFloat() analisa um argumento do tipo string e retorna um nmero de ponto flutuante.

parseInt()

A funo parseInt() analisa um argumento do tipo string e retorna um inteiro da base especificada (base do sistema numrico).

decodeURI()

A funo decodeURI() decodifica uma Uniform Resource Identifier (URI) criada anteriormente por encodeURI ou por uma rotina similar.

decodeURIComponent()

O mtodo decodeURIComponent() decodifica um componente Uniform Resource Identifier (URI) criado anteriormente por encodeURIComponent ou por uma rotina similar.

encodeURI()

O mtodo encodeURI() codifica um Uniform Resource Identifier (URI), substituindo cada ocorrncia de determinados caracteres por um, dois, trs, ou quatro sequncias de escape que representa a codificao UTF-8 do caractere (s sero quatro sequncias de escape para caracteres compostos de dois caracteres "substitutos").

encodeURIComponent()

O mtodo encodeURIComponent() codifica um componente Uniform Resource Identifier (URI), substituindo cada ocorrncia de determinados caracteres por um, dois, trs, ou quatro sequncias de escape que representa a codificao UTF-8 do caractere (s sero quatro sequncias de escape para caracteres compostos de dois caracteres "substitutos").

escape()

O mtodo obsoleto escape() calcula uma nova string na qual certos caracteres foram substitudos por uma sequncia de escape hexadecimal. Use encodeURI ou encodeURIComponent em vez disso.

unescape()

O mtodo obsoleto unescape() calcula uma nova string na qual sequncias de escape hexadecimais so substitudas pelo caractere que ela representa. As sequncias de escape podem ser introduzidas por uma funo como escape. Por unescape() estar obsoleto, use decodeURI() ou decodeURIComponent ao invs dele.

• Anterior
• Prxima