Aprenda sobre as funções geradoras (“generator functions”) do JavaScript. São aquelas que aparecem com a palavra chave function*, seguida de um asterisco.

JavaScript: Funções Geradoras

Funções Geradoras do JavaScript (Generator Functions)

Nesta aula nós vamos aprender sobre funções geradoras no JavaScript.
São as chamadas Generator Functions.
Essas funções geradoras aparecem com a palavra Shabby Functions seguida do asterisco.
Então, essa Function Asterisco são funções que podem ser interrupidas, isto é pausadas,
e depois serem continuadas.
Você pode interroper a função, e depois, se quiser, pode continuar a função depois.
Então, vamos aprender essas funções geradoras.
Para poder definir a função geradora, é só dizer Function seguida do asterisco.
Vamos aqui no terminal, ou no terminal do Firefox.
Vou fazer aqui uma função geradora bem simples para a gente ilustrar o seu uso.
Vou chamar a função de obt número sem nenhum argumento, nenhum parâmetro lá na definição.
Vou usar essa palavra Shave Yield com o número um, depois o outro Yield 2, Yield 3,
para você ver o que vai acontecer. Eu defini essa função.
Então, essa aqui é a função obt número, uma função geradora, porque tem o asterisco
seguido da palavra Shave Função.
Em função geradoras, tipicamente, você vai ver a palavra Shave Yield, que a gente vai aprender o que esse cara faz,
e já, já. Então, essa função aqui, a gente vai Yield, o valor um, o valor dois, o valor três.
Então, quando a gente chama obt número, uma função geradora, você vai obter o chamado generator,
um objeto chamado generator, certo, de tipo generator.
Esse objeto generator, ele conforma no, conforme com o protocolo, iterable, iterator.
Certo? Então, tá certo, mas o que é que vai dar aí?
Então, primeiro, quando você está usando a função gerador, primeiro você tem que botar esse cara,
vamos botar numa variável aqui, vamos chamar de gen, porque quando a gente chama a função,
obtém o generator. Então, eu chamei a variável de gen, abreviado para generator.
Agora, quando a gente tem um generator, você tem a opção de falar, pegar o próximo comando da função.
Você vai rodar a função, e a função vai começar aqui do começo, e quando vê a palavra Shave Yield,
ela vai pegar o valor e vai retornar o valor e vai parar, então, para a execução.
Então, vamos ver. Você vai digitar o nome da variável aqui que tem o generator, esse cara que vai estar armazenado,
tem armazenado o generator, o gerador.
A gerador tem uma função método chamado Next.
Quando você chamar o método Next, o cara vai lá, começa aqui no começo da função,
até chegar o palavra Shave Yield, pega o valor que foi dado ao Yield e retorna aqui.
Tá certo? Vamos ver.
Então, gen.Next foi até o primeiro Yield, pegou um, retorna um objeto cujo valor,
propriedade value, é o 1, e tem outro propriedade chamado Done, para dizer se acabou de passar por todos os comandos da função, ou não.
Certo? Sempre, quando você dá o ponto Next, retorna o objeto que tem o value, o valor que foi dado pelo Yield,
e tem o Done, para dizer se acabou, tá no final da função, ou não.
Agora, quando você dá o gen.Next de novo, vamos ver o que dá.
Então, a função aqui tinha parado lá nesse cara, então vai continuar para o próximo Yield, a showYield,
pega o valor dado pelo Yield, põe no objeto aqui e retorna o objeto, como ainda está aqui, ainda não terminou a função.
Então, ele fala o Done, ainda está falso. Done significa se terminou.
Aí você pode fazer o gen.De novo e vai dar no quê? Ele vai continuar, tinha parado aqui depois do 2,
vai até o próximo, próxima linha aqui, próximo Yield, pega o valor 3, põe no objeto com propriedade value,
e o Done ainda está falso porque parou aqui, ele não sabe ainda se chegou ao final.
Finalmente, quando a gente diz gen.Next de novo, você nota que o value é undefined,
e o Done se tornou true verdadeiro, por quê? Porque se você olhar aqui, ele estava no 3, chegou no final da função,
tem mais nada para fazer, para dar, né, Yield. Então, o valor vai ser indefinido,
porque não tem nada que retorna explicitamente. Então, o Done se torna true para indicar que terminou de correr toda a função.
Certo? Então, é isso. Se você continuar dizendo gen.Next, ele sempre vai fazer a mesma coisa porque já terminou a função.
Então, esse aqui é uma função geradora. Certo?
Fica até o... Vamos revisar aqui. Função geradora é a palavra Java Function com asterisco.
E a função geradora pode ser interrupida, isto é pausada e depois continuada.
Então, quando a gente chama a função geradora, a gente obtém um objeto de generator.
A gente põe o objeto aqui na variável para poder ficar chamando o ponto Next,
esse método que nos permite continuar a percorrer a função.
O Next vai até no próximo... Palava Java Yield, próximo statement aqui do Yield.
E pega o valor, põe dentro do objeto com a propriedade value e o Done para significar se terminou de percorrer a função ou não.
Aí você fica chamando Next, Next, Next todo o tempo até você chegar no fim quando o Done vira true.
E neste caso aqui, o valor foi indefinido porque ele não retornou nada.
Certo? Então, o detalhe é como você chama a function, você pega o objeto generator,
aí você põe na variável e vai ter que ficar chamando o Next, Next, Next todo o tempo.
Certo? Por essa aula é só e até a próxima.


000b-01 Funções Geradoras do JavaScript (Generator Functions)

Funções Geradoras do JavaScript, com Parâmetros

Nesta aula vamos continuar a aprender sobre as funções geradoras do JavaScript.
Em particular, vamos adicionar um parâmetro à função geradora para ver que a função
geradora também aceita parâmetros do jeito que as outras funções normais aceitam.
Vamos definir aqui uma função geradora, como é que faz?
Você faz a palavra xavi func, que é seguida do quê?
Seguido do arte de arisco.
Então, vamos fazer a mesma coisa aqui, obter número, vamos fazer de maneira diferente.
Vamos adicionar uma variável aqui como parâmetro, vamos chamar número inicial aqui, sei lá.
Então, vou fazer assim, yield número inicial mais um, número inicial mais dois e sim por
de onde?
Essas coisas aqui, só para gente ilustrar um exemplo de como a função geradora também pode aceitar parâmetros.
Então, eu defini essa função geradora chamada obter números que contem o parâmetro número inicial.
Para cada yield, a gente só pega o número inicial e adiciona um, adiciona dois e adiciona três.
Então, quando a gente chamar obter número, é uma função geradora, vamos botar um número aqui, sei lá, 17, por exemplo.
Ah, não está, é 17 mesmo.
Quando eu chamar a função geradora, o que é que a gente obtém?
Um objeto generator, certo?
Então, vamos botar esse generator, objeto generator, tenta variar meu gen.
Ah, que eu tinha definido anteriormente, então deixa eu fazer, vou usar o let.
Deixa eu fazer outro número, vou chamar generator, certo?
Desculpe.
Então, tenta variar e chamar generator e foi obtido com a chamada obter número, 17.
Aí, quando a gente tem o generator, a gente fala o ponto next, chama o método next para poder percorrer a função e
vai chegar no próximo yield, pega o valor, que nesse caso vai ser o quê?
Vai ser 17 mais um que é 18.
Então, pegar o 18 vai retornar um objeto cuja propriedade value é 18, o dano vai ser falso, porque ainda não terminou de percorrer
todo o bloco da função, não é?
Então, assim por diante, falo generator index de novo, ele vai para o próximo bloco, chega no próximo yield,
pega o número de 17 mais 2 é 19, chegou aqui, um objeto é retornado, cuja propriedade value é 19,
o valor que foi retornado pelo yield, foi dado pelo yield, o dano ainda está fácil, porque ainda tem mais a percorrer
pela função, não chegou ao final ainda não.
Aí, vai de novo, pega 20, porque foi no outro yield, 17 mais 3 é 20, chegou aqui, dano falso ainda,
vai de novo, chegou no final da função, dano virou true, não é?
Não tem mais nada para percorrer, um valor vai ser underfined, porque a gente não tinha retornado nada mesmo, certo?
Então, esse exemplo é só para ilustrar que a função geradora também pode aceitar parâmetros,
não obrigada a ser sem nenhum parâmetro, o parâmetro só vai ser substituído aqui nos valores,
aqui nesse caso da variável número de sial, aí quando você percorrer a função, o valor vai ser substituído aqui sempre,
daquilo que você passou inicialmente para poder obter o objeto generator, certo?
Então, por essa aula é só e até a próxima.


000b-02 Funções Geradoras do JavaScript, com Parâmetros

Uma Função Geradora de “Infinita” Execução no JavaScript (Nunca Acaba!)

Nesta aula nós vamos falar mais sobre a função geradora, vamos criar um contador infinito
para a gente contar.
Vamos fazer uma função geradora que nunca vai parar de ser percorrida porque vai ter
um loop dentro.
Tá bom?
Então deixa eu lembrar aqui o console do Firefox.
Vamos definir a função geradora de novo.
Como é que é?
Já pegou a manha, fala function, seguida do que?
Asterisco.
Vou chamar esse cara de contador assim.
Contador, se quiser para adicionar o valor inicial aqui do contador, mas eu não me
importo, você já sabe que a gente pode adicionar a parâmetro a função geradores também.
Então a gente vai fazer o seguinte, a gente vai ter um contador que começa do zero e
para cada chamada do next a gente vai obter o próximo valor do contador.
Deixa eu chamar a variável aqui, chamada quantia, vou iniciar com o valor zero.
Eu devo botar lete aqui.
Ah, deixa eu ver.
É lete porque eu quero mudar o valor.
Vou usar lete porque eu quero mudar a quantia para um, para dois, para três, assim por
diante.
Então o que a gente vai fazer?
A gente vai adicionar o loop aqui com o while.
Olhe o detalhe aqui, a gente vai usar o true para o loop ser infinito.
Normalmente o loops infinitos não são coisas de boa prática, não é?
Mas nesse caso aqui vai estar tudo bem porque a gente está usando a função geradora.
Essa função é sempre interrompida, pausada, dá uma pausa e você continua quando você
quiser na chamada do next.
Então essa função vai ficar realmente a função infinita.
Você pausa, continua, pausa, continua para sempre.
Então o contador vai até dar o overflow do valor da variável.
Então aqui a gente nesse loop para cada interação do loop você vai dar o yield da quantia mais
um, certo?
Você pode fazer quantia mais, mais, dessa maneira aqui.
Se você não sabe o que é mais, mais, só fazer essa maneira aqui.
Você faz, você dá o yield quantia, aí fala quantia, quantia mais um, certo?
Então é uma coisa.
Ele vai dar o valor, quantia, inicialmente vai ser zero, aí vai incrementar, vai virar
um, aí quando der a próxima interação vai ser um, aí vai aumentar, vai ser dois, se
torna dois e se impede antes, entendeu?
Então eu vou botar só mais ou mais para ficar mais breve aqui.
Porque o mais e mais funciona a seguinte maneira quando está no lado direito, no nome da variável,
ele vai usar o valor da variável que é zero, aí vai mandar para o yield.
Depois disso, certo?
Ele vai incrementar para um.
O valor do yield vai ser zero, não vai ser um.
Não vai ser depois desse cara pegar.
Está certo?
Então vamos ver, o que que dá?
Vou chamar contador, quando a gente chama a função geradora a gente obtém aquele objeto
generator, objeto gerador.
Vou chamar aqui let.
Acho que eu já tenho definido.
Eu já tenho definido.
Então precisa de let.
Então eu chamei o contador.
O contador nos deu o generator, object generator, vamos chamar next.
Vamos ver no que dá.
Então next nos retorna um objeto, tem a propriedade value com o valor zero, porque ele vai que
começa do começo da função.
Olha aqui.
Ele seta o quantia para zero.
Variável quantia tem valor zero.
Vai no loop, entrou no loop infinito, que o true vai dar infinito aqui.
Aí vai dar o primeiro yield, pegou o primeiro yield, pega o valor quantia que é zero, ponha
aqui no object, o dono ainda está fosco, que não terminou de percorrer a função.
Então a função foi interrompida, pausada.
Aí você chama o próximo next.
Você dá o generator next de novo.
Você nota que a quantia ainda está aqui, mas na próxima interação do loop, a quantia
tem valor um, um.
Então vai pegar valor um, vai retornar dentro do objeto value, propriedade value, e vai
incrementar.
Agora tem valor dois.
Quantia tem valor dois, mas você só vai obter na próxima interação.
Pela quantia valor dois retorna, porque está no yield de novo, só fica rodando a mesma
coisa porque está dando loop, cara interação.
Valor dois, dono false.
Aí fica dando esse cara direto, só fica contando.
E vai infinitamente até dar um overflow aqui.
Certo, você pode até fazer um loop aqui.
Deixa eu te mostrar.
Um loop infinito que chama o cara infinito.
While two, você vai falar generator next.
Pega esse cara aqui e põe dentro do console log para você ver.
Só para ver no que dá.
Eu acho que esse cara nunca vai parar.
Então eu estou um pouco assim, eu não quero fazer muito.
Não vou dar assim não.
Deixa eu fazer de outro maneira.
Vou dar uma variável aqui.
Index vou botar zero.
Eu vou dar um contar, sei lá, vai demorar não?
Uns 40 vezes para você ver.
Aí depois de dar o console log, dá um index, aumenta.
Vamos ver no que dá.
Certo, deu.
Deu, começou a ser not.
A gente fez um loop aqui começando do zero até o 39.
E ele fica chamando generator next.
Doze, o contador é doze, treze, quatorze, quinze.
E assim por diante, 39, 40, 41, uns 40 vezes.
Então pode continuar para fazer de novo.
Eu redeclarei o index, deixa eu tirar aqui.
Você note que ele fica rodando.
Então a função geradora nunca acaba, o que você fica chamando todo o tempo com generator
next.
Certo, então efetivamente você criou uma função infinita.
Está certo?
Então por essa aula só, essa aprendizada das funções geradoras no JavaScript generator
function.
Para você já sabe que esse cara faz o que significa.
Certo?
Então obrigado para assistir e até a próxima.
