Explicando a Composição de Funções em JavaScript

ei pessoal nesse vídeo Eu gostaria de falar com vocês a partir de um exemplo de código já fiz um exemplo de código parecido com esse em outro vídeo do canal Mas eu acredito que nesse vídeo tenha ficado Talvez um tanto quanto rápido a explicação e algumas pessoas tiveram dificuldade de entender mas o que eu quero falar nesse vídeo tem a ver com a formação de uma mente de um programador java script para você ser um programador java script pensar como programador java script você tem que ter habilidades de como você trabalhar com as funções como você organizar suas funções de uma forma que você consiga ter composição que você consiga ter eu uso a gente tá sempre trabalhando com função seja função callback seja você tá trabalhando passando função como parâmetro para outra função você retornar ou a função a partir de outro e tal e é importante você dominar que achou da função e mensal especificamente eu quero falar um dos recursos mais importantes da programação que é composição e eu quero mostrar para vocês um exemplo bem cadenciado como funciona a composição de funções em JavaScript vou dar um exemplo simples para que você entenda mecânica e a partir daí você procure não é boas oportunidades de usar a composição dentro das suas aplicações tô aqui inaugurando o Chrome aqui do estúdio certo que não é Chrome aqui normalmente mas hoje a gente tá aqui no modo um pouquinho diferente vamos lá e é eu vou criar algumas funções que tem uma assinatura de receber uma string como parâmetro e retornar uma string modificada então por exemplo eu vou criar aqui uma função chamada gritar e a gente sabe quando alguém está gritando no modo texto ele coloca todas as letras em caixa alta então eu vou receber aqui uma string como parâmetro então usar aqui uma era fanfiction e vou simplesmente colocar é se distingue. Two upper Case então é aquilo no completo né tô acostumada a usar typescript Mas beleza então Aqui nós temos uma stringhi. A pertence então ele fez colocou todas as fontes em caixa alta e eu vou criar aqui uma outra função que eu chamei aqui no meu planejamento de enfatizar e essa função enfatizar ele vai simplesmente retornar uma string é obviamente a gente tem que eu recebi com parâmetros só que com várias exclamações então duas funções bem simples se eu mostrar para vocês aqui ó é console.

Log aí eu vou de colocar aqui para me chamar a função gritar e vou passar para o resultado disso se eu executar aqui em salvar e executar vai ser para com letra maiúscula já que o gritar faz simplesmente colocando as letras letras maiúsculas legal o que que eu posso fazer para compor funções eu posso depois que ele terminar de gritar eu posso pedir para ele enfatizar então eu posso chamar a função enfatizar E aí eu tô chamando a função gritar com o texto para o resultado dessa função vai passar por enfatizar que aí ele vai colocar as exclamações e o resultado dessa função tô passando pro console. Log não deixa de ser uma composição de funções dentro de uma mesma sentença de código você vai executar você vai ver que ele colocou isso eu posso quebrar isso em várias linhas então eu posso colocar o constante eu vou colocar aqui gritado recebe gritar para aí eu vou colocar e enfatizado vou colocar aqui a função enfatizar pegando o resultado da outra função que é o gritado e agora pegando enfatizado eu posso colocar isso aqui no console o ponto log só diminuir aqui um pouco o terminal e o que nós temos agora nesse momento é isso mas temos uma função chamada gritado outra enfatizado e aqui eu estou jogando no console pontolog legal então eu chamei uma função que é uma constante Chamei outra que eu te constante e mandei para o console legal esse eu criar uma função que vai me a e a compor ou isso então eu posso por exemplo em vez de chamar só as funções assim eu vou chamar vou criar aqui uma função vai ser uma ao funk ou qualquer outra vai ser uma funk o mesmo daquela Fashion Então vou compor e essa função com pô vai receber duas funções Então vão receber aqui uma função um para gente começar a simples Tá e uma função dois e a ideia é que dentro dessa função eu faço a composição dessas duas funções e o terceiro parâmetro vai ser a stringhi que eu quero trabalhar eu vou chamar aqui de texto para cão pouco mais claro do que se trata legal então o que é que eu vou fazer aqui eu vou criar uma variável chamada resultado vou aplicar a função um com o texto que eu recebi e aqui eu recebi um resultado é um outro stringhi vou chamar aqui resultado nós Oi gente vai receber a função dois passando o resultado que foi obtido na linha anterior e no final eu vou retornar resultado Então dessa forma que eu tenho aqui né usando os princípios ela programação funcional usando o fato de que a gente consegue passar uma função como parâmetro eu posso simplesmente fazer o seguinte ó com Pô vou passar a referência da função então vou passar aqui que ele tá vou passar enfatizar e vou passar aqui um texto por exemplo Bom dia ou seja isso aqui vai gerar para mim um novo texto que eu vou colocar aqui como texto Ou posso chamar de resultado e agora eu posso pegar aqui o console outro log resultado ou seja se eu executar aqui você vai ver que mostrando o resultado e colocou aqui Bom dia então eu acabei de fazer um método chamado compôr esse método ele vai receber apenas duas funções ficou amarrado para duas funções mas tudo bem a gente vai incrementando devagar aqui o exemplo e eu passei aqui Astrid então basicamente ele pegou a função um que nesse caso é a referência da função gritar então eu passei uma referência aqui dentro eu chamo ela de FM FM um mas o nome é indiferente o fato é que aponta para a mesma função e memória e eu executo a gritar com o texto que foi passado que algum dia e aí pegando esse resultado aqui e coloca um resultado E aí depois na próxima função já pego o resultado anterior cálculo e já era aqui sobre escrevo essa variável resultado e no final retorna O resultado poderia ter por exemplo três funções então poderia criar a função chamada sei lá pergunta então posso colocar aqui constante perguntar que vai receber uma stringhi assim e que vai pegar essa streamers e colocar aqui umas interrogações tá então se eu receber aqui por exemplo uma fm3 mesmo que ficar amarrado por enquanto o código Eu Posso duplicar isso aqui Executar a FM três e agora eu passo aqui por exemplo mais uma função que a função perguntar então eu vou só quebrar aqui mais uma linha para ficar claro eu vou colocar aqui o valor embaixo e as funções da Lindíssima então basicamente que eu tô fazendo uma composição de três funções passando uma função depois da outra depois da outra e forma amarrado ainda e dessa forma e olha quanto a primeira função pega o resultado executar segunda função pega o o culto a terceira função pega o resultado e assim sucessivamente a coloco aqui agora ele vai tanto enfatizar com as exclamações como ele vai colocar as interrogações então ficou assim ó bom dia né exclamações interrogações atualmente porque eu fiz a composição das três funções legal é da forma como como tá aqui nesse momento nós temos Obrigatoriamente sempre passar as funções e passar o parâmetro eu tenho que passar as funções eu posso até colocar em ordem diferente tal por exemplo eu posso primeiro colocar perguntar para depois enfatizar E aí ele vai O resultado vai ser um pouco diferente obviamente vai aparecer as interrogações antes das exclamações tudo bem mas sempre que eu quiser executar eu preciso passar todas as funções e preciso passar o valor se eu quiser executar uma segunda vez por exemplo eu tenho aqui um o resultado domingo se eu quiser executar Exatamente esse mesmo processamento só que agora com uma outra stringhi eu preciso copiar tudo isso eu vou colocar a resultado dois Vou colocar aqui resultado dois e vou passar a string em Boa tarde então vou colocar aqui ó onde tem Bom dia a boa boa tarde legal beleza então se eu executar Agora eu tenho bom dia tenha um boa tarde usando o mesmo processamento como é que eu poderia trabalhar os recursos do Java script para que eu consiga ter reuso nesse caso não quero ter que repetir sempre chamar o método com Pou passar a função gritar perguntar enfatizar existe um mecanismo E para isso eu vou criar aqui um exemplo Paralelo Só para gente ver aqui para Lelo ponto de S e eu vou já voltar para o exemplo principal quando você cria uma função uma fanfiction você tem aqui uma função externa e você sabe que dentro de uma função qualquer nome que seja você pode criar funções internas então eu posso por exemplo criar que uma função interna e essa função interna pode fazer alguma coisa por exemplo console. Log Olá sou a função interna Beleza então nós temos aqui uma função externa e uma função interna e essa função interna ela pode inclusive ser retornada quando eu chamar a função interna em vez de retornar por exemplo poderia retornar o número 3 Tudo bem não tem problema então eu posso colocar aqui ó console outro log vou chamar a função externa e executar até que ele vai imprimir aqui número 3 Exatamente porque o retorno e três mas se eu quisesse retornar uma função a partir de outra função não posso fazer posso nesse caso se eu executar vocês vão perceber que nós teremos aqui ó uma função função interna sendo retornada a partir da função externa E aí o que eu posso fazer é tenho duas coisas que eu posso fazer né na verdade eu tenho dezenas de milhar de coisa que eu posso fazer eu posso fechar embora né tomar um café mas tudo bem eu vou armazenar Isso numa variável que eu chamei dfn Léo mas o nome não era interna porque tu armazenou não nome fn porque eu posso na verdade quando eu retorno aqui interna é um Imagine que isso é um local de memória que tem uma função definida lá e a partir desse local de memória eu posso referenciar a partir de uma outra variável então é que eu tô fazendo aqui Já que essa função retorna uma O que é a função interna Então agora eu posso pegar fn e chamar a função fn ou seja essa função que eu estou chamando é a função interna que foi definido aqui na linha 2 dentro da função externa então executando você vai ver que agora o na verdade eu não preciso nem colocar aqui dentro do console.

Log basta e o executar porque a própria função já está colocando aqui um console. Log ou eu poderia deixar no console. Log em vez de chamar aqui eu poderia simplesmente chamar o Vitor pronto então agora executando tchau é limpar aqui Aqui tá mais uma vez você vai ver que ele imprimiu Olá sou a função interna toda a mesma forma que eu posso retornar o número uma stringhi qualquer coisa que você queira a partir de uma função eu também posso retornar uma outra função e retornando essa outra função eu posso chá a função e armazenar a função interna em uma variável no constante executar essa função legal dito isso também tem uma outra forma de fazer é de você pegar essa função aqui e jogar diretamente aqui eu posso inclusive transformar essa função em uma função anônima então a função externa já retorna uma função anônima e essa função anônima está sendo armazenada nessa variável f n a partir do momento que eu chamei essa função externa e aqui eu vou executar da mesma forma vai funcionar então limpando aqui e executando você tem texto né que está sendo retornado aqui né Olá eu sou a função interna a só que aquilo retornei como uma função anônima beleza Léo porque ele tá falando isso porque tu fez esse exemplo paralelo para voltar aqui porque a gente tá conseguindo problema nesse momento nós temos basicamente o mesmo em duplicado duas vezes mudando apenas o parâmetro não seria legal se eu pudesse chamar a função com pô gerar aqui toda a sequência de passos e eu consegui armazenar essa sequência de passos no outra função por exemplo Então o que é que eu posso fazer o seguinte ó em vez de eu receber as funções juntamente com parâmetro logo de cara exige todos os parâmetros ao mesmo tempo eu posso no exemplo paralela aqui só para ficar mais fácil imagina que eu tô passando uma variável a aqui né você lá eu vou passar aqui uma variável nome e aqui eu vou passar uma variável idade então aqui dentro eu posso colocar por exemplo Olá meu nome é E aí eu vou colocar o nome e tenho idade o anos tá ficou um pouco maior aqui mas tudo bem minami um pouco uso daqui a pouco eu volto para o normal então basicamente o que nós temos aqui é a possibilidade eu passar por exemplo o nome por exemplo João E aí eu posso armazenar aqui na função um e tenho aqui Como armazenar por exemplo o nome Maria então vou colocar aqui sei lá João f n Oi e Maria fn parte dos parâmetros já foram fornecidas então o nome já foi fornecido tá faltando agora a fornecer a idade Então posso chamar por exemplo falou que tenha dois joões né e o arranjo aos você Qual é o plural de João não mas dois joãos né Acho que fica mais mais correto então eu tenho duas pessoas com o nome João e eu vou colocar a por exemplo tem 13 anos e o outro tem 15 anos então se vai executar você vai ver meu nome é João e tenho 13 anos meu nome é João e tenho 15 anos e a mesma coisa eu posso reusar é para Maria já que eu resolvi parte da função dos parâmetros da função e aqui eu posso chamar a função Maria fn e Maria fn uma vai ter 23 e a outra vai ter apenas quatro anos então executando você vai ver o nome João João Maria marinha com o mesmo nome só que com idades diferentes a beleza esse aqui é um um exemplo Super simples de algo extremamente poderoso dentro da programação funcional do conceito da programação funcional chamado querem se você procurar querem você vai ver que essa técnica que você faz com que uma função retorne uma outra função e você tem a possibilidade de passar os parâmetros de forma parcelada e vejo você passar todos os parâmetros de uma vez você pode passando os parâmetros de forma parcelada e isso faz com que você consiga armazenar funções intermediárias com parte dos parâmetros resolvidas então por exemplo aqui eu já passei o nome ficou faltando passar apenas a idade então se você tiver uma situação que você tem muitos nomes iguais com idades diferentes essa aqui poderia ser uma solução interessante a Eu tenho um cenário que ao contrário eu tenho muita gente com a mesma idade é e o nome varia então você pode trocar é de colocar nome em cima você coloca idade e bota o nome embaixo Então você armazena por exemplo é pessoas com 13 anos talvez faça mais sentido então ó só refatorando você pode pegar a idade jogar aqui para cima você pode pegar o nome e jogar aqui para baixo e aí você pode armazenar por exemplo uma função chamado é com 13 anos e aqui você vai colocar por exemplo número 13 e aqui por exemplo com 18 anos e aí você vai lá e coloca 18 anos 18 e aqui você vai por exemplo fazer com 13 anos e com 18 anos é obviamente agora eu vou ter que passar é o nome né então eu vou tirar aqui esse número passar um stringhi aqui também vai ser uns 30 então eu vou colocar Maria e Maria e aqui vai ser o Pedro e aqui vai ser o se você executar esse código agora a gente tem mesma coisa passando de forma parcelada mas você tem obra em nome é Maria e tenho 13 anos meu nome é Pedro e tenho 13 anos e você pode ir organizando e passando esses parâmetros de uma forma parcelada voltando aqui para o nosso exemplo é o que é que eu posso fazer aqui faz sentido que eu peço todas as funções de uma vez pode ser interessante só que o texto eu posso pedir para passar no segundo momento e aí vai trazer um efeito muito interessante que é o seguinte ó eu vou colocar vou retornar uma função que vai receber o texto como parâmetro e eu vou colocar todo esse processamento para ser feito Apenas quando o texto fornecido ou seja vou ter que fornecer todas as funções e também vou ter que fornecer o texto lembrando que quando você passar as três funções né e eu posso até por enquanto eu vou deixar três depois a gente ajusta para ficar genérico mas o eu vou passar as três funções e depois eu tenho que passar o texto no segundo momento e isso vai fazer com que eu consiga com por aqui ó então vou fazer o seguinte vou pegar aqui a função com pô já não vou passar o bom dia vou passar apenas os três as três funções e aqui eu vou chamar de falar constante gritar perguntar enfatizar Vou colocar aqui de exagerar e pesar gerar pronto então eu acabei de compor três funções e aí essas três funções vai simplesmente só vai executar nesse momento mas é Victor nada nesse momento ele está simplesmente retornando essa função e essa função está sendo armazenada para cá Só que eu já informei Qual é o F1 fn1 fn2 e a fim de três ou seja Agora eu tenho uma função que já sabe quais são as funções que vão ser executadas nessa ordem aqui tá faltando a fornecer um texto e aqui agora em vez de ter que chamar isso mais uma vez eu posso simplesmente chamar ó exagerar em cima do texto bom dia olha como fica mais simples a chamada a mesma coisa aqui embaixo eu vou chamar exagerar não preciso passar as funções vou passar apenas o texto Olha como eu consigo agora fazer essa composição essa lógica e eu transformei uma chamada que tinha vários parâmetros e apenas uma chamada que tem é o único parâmetro que já é o parâmetro final que é o texto que a partir daqui de fato ele vai executar o código então se eu é colocando aqui olha como é interessante essa questão das técnicas de programação funcional que você vai conseguindo utilizar essa questão de passam função como parâmetro curry e coisas do gênero para que você consiga ter aqui um É interessante como é que a gente pode evoluir agora agora que a gente tem uma função que tem um texto como é que a gente pode fazer para que isso fique de forma mais flexível Então o que eu poderia fazer aqui em vez de ter fn1 fn2 e fm3 eu posso colocar aqui por exemplo para ele passar funções então eu tenho agora uma rede funções posso ter que é um resultado inicial para ser vazio por exemplo resultado vazio e eu posso fazer que um só então por exemplo let função off funções e aí eu vou Executar a função pegando no primeiro momento O resultado vai ser igual a texto Então eu tenho que inicializar contexto que eu vou pegar o resultado vai executar e o resultado dessa execução aqui ele vai salvar nessa variável resultado de tal forma que ele vai executar as funções e no final a gente vai retornar aqui o resultado vamos ver se funciona então eu vou executar só para ver se o nosso código continua funcionando eu limpar aqui pronto tá executando Então bom dia boa tarde vamos supor que eu queria criar aqui uma outra função chamada exagerar - e o exagerar menos não vai ter o perguntar vai ter só o gritar e o enfatizar E aí eu posso por exemplo chamar no caso do Bom dia exagerar menos e boa tarde o exagerar e aqui eu posso limpar e executar E aí você vai ter o bom dia ele chamou exagerar menos então não tem as exclamações e o Boa tarde tem a questão de perguntar e assim você pode compondo eu queria que uma outra função é chamada é este cá até que eu vejo É mas ele pega as letras do nome e triplica cada letra né então eu fiz mais ou menos assim eu coloquei a stringhi.

Split para eu quebrar e transformar Isso numa rei e aí depois eu fiz aqui um um reduz né que não é uma função tão fácil de ser entendida né Acho que muita gente tem dificuldade mas vou colocar aqui só como referência eu vou receber o final mais a letra certo que vai vai ser já que eu quebrei aqui né ó isso aqui virou um Array com cada uma das Letras então reduce eu vou ter que o texto final e todas as letras então basicamente que eu vou fazer é o seguinte eu vou pegar aqui o texto final e vou concatenar com as letras então vou fazer aqui letra eu vou colocar aqui l só para ficar um pouquinho menor para caber na tela Então vai ter aqui e a letra três vezes então vou pegar isso aqui e fazer dessa forma e no final das contas ele vai pegar o valor final e vai pegar a cada uma das letras e vai concatenando três em três letras até que no final eu tenho a stringhi completa vou começar com ela vazia então o esticar eu posso até criar aqui uma função exagerar mais que vai ter o gritar ao perguntar ao enfatizar e o esticar e aqui eu posso criar aqui um terceiro exemplo resultado três não é lá eu posso colocar isso aqui direto dentro do console. Log né então não precisaria nem criar essas essas constantes aqui então vou chamar exagerar mais então eu vou pegar isso aqui e vou colocar aqui só para ficar um pouco menor código e vou pegar o exagerar menos e colocar aqui pronto o cão limpando aqui o console e executando então ele vai lá ó coloca bebê ó a boa tarde gigante porque isso aqui foi o a versão mais exagerada a versão exagerada EA versão menos exagerado legal até teria como você também é evitar essa questão dos três espaços em brancos né que ele colocou aqui então eu poderia aqui e fazer aqui um replace usando uma regex ou posso colocar aqui que no caso é o barra é É sim mas de forma Global eu quero substituir vários espaços em brancos por apenas um espaço em branco então fazendo dessa forma a gente tem Como duplicar apenas o que é letra e os espaços em brancos ficariam normais né então limpando aqui e a secando Então você teria aqui ó Boa tarde é Exagerado Exagerado e menos exagerado legal aqui pessoal dentro dessa função que a gente fez um só para executar também daria para usar um reduce tá na implementação que eu tenho aqui na minha referência eu acabei usando um reduce você poderia transformar isso em um reduçao ficaria assim vou comentar aqui a versão talvez a versão interativa né mas fica um pouco mais fácil e principalmente para quem está começando fazendo um só para cada forte é uma função o jogo no resultado e tem o resultado final é no caso do reduce eu tenho uma rei de funções que essa esse Array aqui eu posso colocar aqui funções. Reduz e eu vou ter o primeiro valor que eu acumulador que é exatamente o resultado E vou ter cada função sendo passado como segundo parâmetro e é com valor inicial eu vou ter o texto que foi passado então texto vai ser o meu valor inicial e basicamente o que eu vou fazer aqui ó é retornar passando a função retornando cada um dos resultados como resultado vai ser modificado a cada interação então ele vai fazendo aqui a execução então isso aqui seria a forma como a gente poderia fazer a mesma coisa só que usando o reduce tá e se você é mentalmente quiser reduzir aqui e colocar RD resultado FD função chamar aqui FD função e RD resultados sempre você até conseguiria colocar Praticamente tudo isso em uma única linha tá com única linha de código não que você tem uma única linha de código seja positivo em alguns é porque o código fica mais difícil de ser entendido é Mas você gosta de colocar o mínimo possível de código ali eventualmente isso aqui já resolve essas múltiplas execuções né para você ter um método com porque pega funções ao realmente todas as funções têm o mesmo parâmetro né de entrada e geram de saída então por exemplo você até poderia fazer aqui uma uma função que vai calcular a quantidade de letras e transformar isso número mas você tem que lembrar de que o resultado dessa função vai passar para essa ou seja o que essa função gerar de resultado vai ser passado como parâmetro para essa né nesse outro caso aqui tem quatro então o resultado de gritar vai ser o parâmetro de perguntar o resultado de perguntar será o parâmetro de enfatizar o resultado enfatizar será o parâmetro de esticar e assim sucessivamente então se você tem uma função por exemplo que recebe uma string e já um número então eu posso colocar quantidade de letras então eu vou receber uma stringhi e vou pegar aqui stringhi.