Funções JavaScript

As funções JavaScript são capazes de mais do que simplesmente incluir vários códigos enquanto aguardam a execução da chamada. As funções evoluíram ao longo do tempo, levando a novas definições, métodos de execução e sintaxes. Este post irá cobrir alguns dos papéis presentes que as funções JavaScript desempenharam até agora.

Conhecer as diferentes maneiras de expressar e definir funções abre a possibilidade de implementando uma lógica de uma forma mais otimizada em JavaScript. Além disso, você poderá responder mais facilmente às perguntas da entrevista.

Expressões de Função

Quando você simplesmente afirma uma função com função palavra-chave, parâmetros opcionais e corpo de código, é um função declaração.

Coloque essa declaração em uma expressão JavaScript (como em uma atribuição ou expressão aritmética), torna-se um função expressão.

// Função de declaração de função function_name () ; // Expressão de função var function_name = function () ;

Todas as declarações JavaScript são içadas (subidas no escopo) durante a avaliação. Portanto, escrever uma chamada de função antes que a declaração da função esteja correta (já que a declaração será movida de qualquer maneira).

function_name () // função chamada [WORKS] function function_name () ;

No entanto, as expressões de função não são hasteadas, pois as funções se tornam parte das expressões e não são declarações independentes..

function_name () // Chamada de função [WON'T WORK] var function_name = function () ;

Expressão da Função Imediatamente Invocada (IIFE)

É uma expressão de função, cujo código é executado imediatamente (apenas uma vez quando é avaliado). Você pode criar um simplesmente adicionando () (sintaxe usada para chamar uma função) logo após uma expressão de função. Eles podem ser anônimos (sem nome para chamá-lo).

Abaixo estão as duas sintaxes mais comuns para criar o IIFE:

(função optional_function_name () // body ());

(function optional_function_name () // body) ();

O parêntese ao redor da declaração de função o converte em uma expressão e, em seguida, adiciona () depois de chamar a função. Você pode usar outras maneiras de criar o IIFE enquanto você adicionar () depois de uma expressão de função (como abaixo), mas os métodos preferidos são os dois.

// Algumas das maneiras de criar IIFEs! Function () / *… * / (); + function () / *… * / (); nova função () / *… * /;

O IIFE é ideal para escrever códigos que precisam ser executados apenas uma vez, namespacing, criação de closures, criação de variáveis privadas e muito mais. Abaixo está um exemplo de uso do IIFE.

var page_language = (function () var lang; // Código para obter o idioma da página return lang;) ();

O código para obter o idioma da página é executado apenas uma vez (preferencialmente após o carregamento da página). O resultado é armazenado em page_language para uso posterior.

Métodos

Quando uma função é uma propriedade de um objeto, ela é chamada de método. Como uma função também é um objeto, uma função dentro de outra função também é um método. Abaixo está um exemplo para um método dentro do objeto.

var calc = adicionar: function (a, b) retornar a + b, sub: function (a, b) retornar a-b console.log (calc.add (1,2)); // 3 console.log (calc.sub (80,2)); // 78

o adicionar e sub funções são métodos de calc objeto.

Agora, para uma função dentro do exemplo de função:

function add (a) função return (b) return a + b; console.log (add (1) (2)); // A saída é 3

A função anônima retornada é um método de função adicionar.

Nota: Como o parâmetro (uma) da função adicionar no exemplo acima está disponível para a seguinte função invocar, este tipo de processo é chamado curry.

Construtores

Quando você adiciona Novo palavra-chave antes de uma função e chamá-la, ela se torna um construtor que cria instâncias. Abaixo está um exemplo onde os construtores são usados para criar instâncias de Fruta e valores são adicionados a cada Frutapropriedades de.

função Fruit () nome var, família; // Nome científico e familiar this.getName = function () return name;; this.setName = function (value) nome = valor; this.getFamily = function () retornar família;; this.setFamily = função (valor) família = valor;  var apple = new Fruit (); apple.setName ("Malus domestica"); apple.setFamily ("Rosaceae"); var laranja = novo Fruto (); orange.setName ("Citrus Ã ?? Ã" Ã¢??? sinensis "); orange.setFamily (" Rutaceae "); console.log (orange.getName ()); //" Citrus Ã ??¢??? sinensis "console.log (apple.getName ()); //" Malus domestica "console.log (laranja.getFamily ()); //" Rutaceae "

Funções de seta (padrão ES6) [somente no Firefox]

Uma nova definição de função do ES6 Standard fornece uma sintaxe mais curta para a expressão de função. A sintaxe é

() => / * corpo * /

Esta função de amostra:

var sing = function () console.log ('cantando…');

é o mesmo que:

var sing = () => console.log ('cantando…');

As funções de seta são anônimas e não possuem suas próprias isto valor, isto dentro dele será o mesmo que isto no código de inclusão. Além disso, você não pode alterá-lo para um construtor com Novo palavra chave.

Eles são úteis para quando você quiser isto dentro de uma função para ser o mesmo que fora e sua sintaxe menor faz código para escrever função dentro da função concisa (como abaixo)

setInterval (function () console.log ('mensagem'), 1000);

para dentro

setInterval (() => console.log ('mensagem'), 1000);

Funções do Gerador (Padrão ES6) [Somente no Firefox]

Outra nova definição de função do ES6 Standard é a Função Geradora. As funções do gerador são capazes de parar e continuar sua execução. Sua sintaxe é:

function * function_name ()

function * function_name ()

Funções de gerador criam iteradores. O iterador Próximo método é então usado para executar o código dentro da função do gerador até que o produção palavra-chave é alcançada. Depois disso, o valor iterado identificado pelo produção palavra-chave é retornada pela função geradora e a execução é interrompida.

A função de gerador é executada novamente quando o Próximo método é chamado até o próximo produção palavra-chave é alcançada. Uma vez que todos os produção expressões são executadas, o valor retornado retorna Indefinido.

Abaixo está um exemplo simples:

function * generator_func (count) para (var i = 0; i Aqui está outro exemplo:
 function * randomIncrement (i) rendimento i + 3; rendimento i + 5; rendimento i + 10; rendimento i + 6;  var itr = randomIncrement (4); console.log (itr.next (). value); // 7 console.log (itr.next (). Value); // 9 console.log (itr.next (). Value); // 14 
 Há também um produção* expressão que passa o valor para outra função geradora
 função * frutas (frutas) rendimento * veggies (frutas); rendimento "uvas";  function * veggies (fruit) rendimento de frutas + "e espinafre"; rendimento de frutas + "e brócolis"; rendimento de frutos + "e pepino";  var itr = fruits ("Apple"); console.log (itr.next (). value); // "Apple and Spinach" console.log (itr.next (). Value); // "Apple and Broccoli" console.log (itr.next (). Value); // "Apple e Pepino" console.log (itr.next (). Value); // "Grapes" console.log (itr.next (). Value); //Indefinido 
 As funções do gerador são úteis se você quiser passar por valores um por um em seu ponto preferido no código pausando-o, em vez de ir de uma só vez como em um loop por meio de uma matriz.
 Conclusão
 Eu incluí uma lista de referências abaixo, onde você encontrará links para referências e artigos que vão em profundidade sobre diferentes tópicos separadamente. Ambas as funções padrão ES6 funcionarão apenas no Firefox no momento.
 Referências
 Linguagem ECMAScript: Funções e Classes
 Expressão de Função Imediatamente Invocada (IIFE)
 O básico dos geradores ES6
 Funções de seta
 Função - Rede de desenvolvedores Mozilla