Pra quem não entendeu, a ideia é a seguinte: sabe quando usamos métodos em "chaining" de objetos, como 'string'.toUpperCase().split().join()? A ideia é fazer basicamente isso, mas utilizando funções em vez de métodos. No exemplo acima, ficaria: composição(toUpperCase, split, join)('string').
Deu uma clareada na ideia cara, muito obrigado, agora consegui ver de uma perspectiva diferente e entender melhor a utilidade e a forma de aplicar, vlw mesmo
O retorno da função filha vai ser o valor que a função pai (que "abração" a função filha) vai processar, e assim por diante. Explicando melhor: fn1(fn2(fn3(valor))). A fn3 vai retornar um valor. Esse valor retornado vai para a fn2 (ela vai executar suas instruções com esse retorno da fn3), e assim por diante.
A luz acendeu aqui quando entendi que funções no JS são nada mais que valores... Valores especiais, que representam ações, e não dados simples como strings e números.
@@nelson.costa.dev2536 RSRSRS mas é isso mesmo a repetição do conteúdo faz as coisas ficarem mais faceis, mais natural, p/ mim complicou depois do currying :(
Reduce em um array de funções pra gerar composição... sinto sabor de criatividade, mano! Amo ver uma maneira nova de resolver algo. Parabéns, cara. Amo seus vídeos e sou aluno de vários cursos. Sucesso!
A primeira vez que vi sobre função em JavaScript com o Léo, pensei que nunca fosse entender isso, depois de alguns meses estudando isso se tornou muito fácil e natural...o segredo pra aprender isso é praticar e estudar em conjunto com tecnologias que utilizam isso como o Angular, React, Node, junto com as Promises e os Observables.
Maravilhosa a introdução! Tem muito desenvolvedor experiente, que não conhece o poder deste padrão de projeto, composição! No mundo javascript dominar esse pattern é uma ferramenta poderosa na arquitetura da sua aplicação!
Eu amo brincar com funções kkk. Eu fico viajando fazendo experimentos assim. Função chamando outra função, objeto com funções... JavaScript é fantástico.
Comprei o curso do Cod3r na udemy e estou curtindo demais! Esse cara tem muito conhecimento para passar adiante, principalmente dos fundamentos da linguagem. Muito bom
C A R A C A!!!!! Que vídeo sensacional. Preciso revê-lo mais umas 10x para fixar e ter essa mentalidade, principalmente porque estou começando agora e não tenho nenhum vicio de linguagem. TOP! SENSACIONAL.
Muitos conceitos explicados de forma muito rapida em muito pouco tempo. Por esse video não deu pra entender muita coisa, mas vou pesquisar o assunto e estudar com calma. Valeu!
cara tive a mesma impressão que a sua , mas eu no final fiquei um pouco mais frustrado porque parece ser bem simples e não entendi nada. Parabéns para nós
Seria dificuldades de entender funções de primeira ordem e/ou o método de Array "reduce"? Seria melhor vocês verem sobre eles separadamente e voltar aqui depois.
Devia ter feito este vídeo 2 semanas atrás... kkkkkkkkkkkkkkkkkkk! Briguei justamente por conta de uma situação que precisava passar um terceiro parâmetro (no caso o "valor")... minha questão diferente é que eram promise results ... mas neste estrutura que vc apresentou funcionaria perfeitamente... shoooow!
Prof. Leonardo Obrigado mais uma vez! vale sim muito apena adquirir os curso da Cod3r, afirmo isto sem ganha um centavo. O curso de desenvolvimento web moderno foi o curso mais completo e custo-benefício que fiz até agora! Claro que exige atenção, revisão e prática como todo bom curso deveria exigir!
Muito bom, da para fazer um código bem mais limpo Amando esses vídeos novos quase todos os dias kkk 😮😁 Acho que um bom tema para abordar tbm seria Hoisting no JS
Muito bom conteúdo, sou um fã de programação funcional e esse método é maravilhoso para reforçar o uso de função assíncrona por exemplo para chamada API. Parabéns pelo conteúdo que vem postando, estou acompanhando diariamente o canal, já curtia a didática e agora estou ainda mais, para iniciante é maravilhoso, para quem já tem mais experiência é muito bom para rever conteudo.
Nossa foi top, isso é muito.util quando precisa de muito métodos , vou tentar fazer ele no react ,pois estou fazendo o react com script , puxando ele pro HTML , e colocando e colocando dentro das tags script , não tô usando o node ,tô fazendo nativo .
Quando tenho de usar uma função muitas vezes para fazer a mesma tarefa em elementos similares eu retono uma referência pra ela mesma. Por exemplo quando quero por o atributo disabled em vários campos input eu faço assim. function disableInput(id){ $('#'+id).attr('disabled', 'disabled'); return disableInput; } disableInput('nome')('sobrenome')('telefone');
Amigos da Cod3r, gostaria de sugerir um conteúdo. Um form master-detail em react ou Vue. Incrível que tenho uma tonelada de curso comprado e em nenhum é ensinado esta técnica/padrão. Observo que tenho vários cursos de vocẽs e se porventura algum tiver este conteúdo, agradeceria se me informasse, pois não achei. Abração !
Bem tentei reproduzir o codigo aqui no meu pc, mas sempre que mando abrir o arquivo no terminal da erro na linha 1 caractere 21 :/ function composicao(...funcoes){ return function(valor){ return funcoes.reduce((acc, fn) => { return fn(acc) }, valor) } } function gritar(texto){ return texto.toUpperCase(); } function enfatizar(texto){ return `${texto}!!!!` } function tornarLento(texto){ return texto.split('').join(' '); } const exagerado = composicao( gritar, enfatizar, tornarLento ) console.log(exagerado('Teste de composicao de variaveis')) console.log(exagerado('debbug'))
O reduce funciona como um loop. E ele faz 2 coisas. A cada loop ele pega um item do array (o fn), e retorna um valor. Valor esse q se torna o acumulado (acc) e pode ser reutilizado no próximo loop. Ou seja, digamos q o valor inicial seja "abc" Loop 1 retorna ABC Loop 2 retorna ABC!!! Loop 3 retorna A B C !!! E o resultado do último loop é o valor final da operação. A função, de forma mais 'aportuguesada': [gritar, enfatizar, tornarLento].reduce( (textoRetornado, itemDaLista) => { return itemDaLista(textoRetornado) }, valorInicial)
@Cod3r Cursos Excelente explicação, faço seu curso de desenvolvimento moderno. Só uma dúvida, meu VScode não está com o intellisense para javascript, há algum procedimento que eu possa fazer (desde já, pesquisei, porém sem sucesso) Obrigado
Po, eu preciso aprender um paradigma, to estudando OO pq é mais fácil. Aí me pergunto, no Javascript será que da pra conseguir emprego sabendo só OO (pra Javascript)?
@@cod3r Beleza. Muito obrigado, professor. Então eu vou continuar assistindo suas aulas lá na Udemy. Comprei o curso há um tempão já. Aulas excelentes a propósito.
Pra quem tem dificuldade de entender a logica é a seguinte: funcão executaFuncoes(funcao1,funcao2,funcao3){ return funcao1(funcao2,funcao3) } funcao1(){ return `O gato Mia` } funcao2(){ return 'o pinto pia' } funcao3(){ return 'o cachorro late' } executaFuncoes(funcao1,funcao2,funcao3){ aqui vai ser retornado é o que cada funcao faz, no caso o gato mia, o pinto pia, o cachorro late } a logica é simplesmente executar funcoes uma apos a outra algo como: funcao1() funcao2() funcao3() porem manipulando as posicoes e ordens ou ainda o conteudo de cada uma.
Olá, aulas excelentes! Sou aluno seu na plataforma udemy, queria saber quais livros pra iniciante em javascript eu deveria ler para complementar com seus cursos?
Isso é muito bom quando vc quer dificultar as pessoas enteder o seu código, esse monte de funções sintetizado dentro de parâmetros foge do escopo "Single-responsibility principle" nunca faça isso dentro do trabalho em equipe, a não ser que te peçam.
O que me ferra é esse parâmetro "funcoes" da função composição significar todas as outras funções... Isso me ferra muito e sempre! Eu tenho uma dificuldade de entender os parâmetros das funções em JavaScript que às vezes eu os escrevo sem entender e dá certo, de tão doida que essa parte é!
Olá professor Leo (você tem o nome do meu filho), fiquei com vontade de saber de aplicabilidade no mundo real em relação a este conceito de composição de funções. Grande abraço! Ah, e você tem um nome muito bonito =)
Pra quem não entendeu, a ideia é a seguinte: sabe quando usamos métodos em "chaining" de objetos, como 'string'.toUpperCase().split().join()?
A ideia é fazer basicamente isso, mas utilizando funções em vez de métodos. No exemplo acima, ficaria: composição(toUpperCase, split, join)('string').
Deu uma clareada na ideia cara, muito obrigado, agora consegui ver de uma perspectiva diferente e entender melhor a utilidade e a forma de aplicar, vlw mesmo
O conceito seria para facilitar a leitura e manutenção do código ou tem mais algum benefício?
Nesse sentido eu gostei bastante disso
nooo mano, abriu minha mente vlw
O retorno da função filha vai ser o valor que a função pai (que "abração" a função filha) vai processar, e assim por diante.
Explicando melhor: fn1(fn2(fn3(valor))). A fn3 vai retornar um valor. Esse valor retornado vai para a fn2 (ela vai executar suas instruções com esse retorno da fn3), e assim por diante.
Obrigado pela abstração
Quem mais sabe que o vídeo ficou top mas não entendeu nada? o/
0/
A luz acendeu aqui quando entendi que funções no JS são nada mais que valores... Valores especiais, que representam ações, e não dados simples como strings e números.
Confesso que terei que assistir umas 3 ou 4 vezes p fixar rsrsrs...
Só 3 ou 4... eu vou rever o ano todo kkkk
@@nelson.costa.dev2536 RSRSRS mas é isso mesmo a repetição do conteúdo faz as coisas ficarem mais faceis, mais natural, p/ mim complicou depois do currying :(
Que bom, não estou sozinho hsushauahaua
TMJ
tmj galera aewhuehawuehuwa rever o ano todo também
Reduce em um array de funções pra gerar composição... sinto sabor de criatividade, mano! Amo ver uma maneira nova de resolver algo. Parabéns, cara. Amo seus vídeos e sou aluno de vários cursos. Sucesso!
A primeira vez que vi sobre função em JavaScript com o Léo, pensei que nunca fosse entender isso, depois de alguns meses estudando isso se tornou muito fácil e natural...o segredo pra aprender isso é praticar e estudar em conjunto com tecnologias que utilizam isso como o Angular, React, Node, junto com as Promises e os Observables.
Pow, incrível a aula. Um pensamento simples mas diferente. Parabéns
Maravilhosa a introdução!
Tem muito desenvolvedor experiente, que não conhece o poder deste padrão de projeto, composição!
No mundo javascript dominar esse pattern é uma ferramenta poderosa na arquitetura da sua aplicação!
No caso conhecer até conheço, agora dominar só com muita prática.
Eu amo brincar com funções kkk. Eu fico viajando fazendo experimentos assim. Função chamando outra função, objeto com funções... JavaScript é fantástico.
;-;
Comprei o curso do Cod3r na udemy e estou curtindo demais! Esse cara tem muito conhecimento para passar adiante, principalmente dos fundamentos da linguagem. Muito bom
Fantástico a recursividade funcional aplicada no ultimo exemplo.. show
Não conhecia...será de grande ajuda daqui pra frente...vlw
Esse conhecimento é interessante pra quem quer fazer sua própria library. Obrigado por compartilhar.
Mais vídeos do tipo pfv, quero me aprofundar na linguagem
Obrigada pela sugestão, Elvis! 👾
Muito maneiro! Não foi por acaso que decidi fazer os cursos Udemy pela Cod3r. O cara manja muuuito!!!
C A R A C A!!!!! Que vídeo sensacional. Preciso revê-lo mais umas 10x para fixar e ter essa mentalidade, principalmente porque estou começando agora e não tenho nenhum vicio de linguagem. TOP! SENSACIONAL.
Muito legal essa dica. Top!!!
Vou exercitar isso pra fixar o conhecimento. 👏👏👏🚀
Muitos conceitos explicados de forma muito rapida em muito pouco tempo. Por esse video não deu pra entender muita coisa, mas vou pesquisar o assunto e estudar com calma. Valeu!
Olá, esse professor é legal, faço curso de Java com ele
Eu entendi, mas não compreendi kkkk. Sou novato no JS, e estou apanhando exatamente nas funções. Mas vou assistir com calma novamente. Ótimo vídeo!
No começo não entendi nada, quando chegou no final parece que tava no começo kkkk vou salvar pra ver mais com calma depois
cara tive a mesma impressão que a sua , mas eu no final fiquei um pouco mais frustrado porque parece ser bem simples e não entendi nada. Parabéns para nós
Seria dificuldades de entender funções de primeira ordem e/ou o método de Array "reduce"? Seria melhor vocês verem sobre eles separadamente e voltar aqui depois.
Seria legal um vídeo seu explicando função recursiva com JavaScript.
Adoro a sua maneira de explicar, fica muito fácil de entender. Só tenho a agradecer por você compartilhar seu conhecimento conosco.
Eu vejo muita gente usando atalhos do editor mas quanto a palavra chave console.log( eu raramente vejo ) e é bem simples: log+tab
valeu pela dica eu nao sabia disso
Mais um atalho anotado! Vlw.
clg
Existe algum site com todos esses atalhos?
@@FelipeAlves-sx5ld depende, se vc usao vscode é so ctrl + K S, ou é ctrl + K M
Muito massa esse vídeo, faz mas vídeos com técnicas pra JS xD
Muito interessante, apesar de eu nunca ter visto... mas provavelmente vai ser bem util.
Devia ter feito este vídeo 2 semanas atrás... kkkkkkkkkkkkkkkkkkk! Briguei justamente por conta de uma situação que precisava passar um terceiro parâmetro (no caso o "valor")... minha questão diferente é que eram promise results ... mas neste estrutura que vc apresentou funcionaria perfeitamente... shoooow!
Grato pelo vídeo! Lazy evaluation tem a ver com assincronismo?
Prof. Leonardo Obrigado mais uma vez! vale sim muito apena adquirir os curso da Cod3r, afirmo isto sem ganha um centavo.
O curso de desenvolvimento web moderno foi o curso mais completo e custo-benefício que fiz até agora!
Claro que exige atenção, revisão e prática como todo bom curso deveria exigir!
Show! Eu nao conhecia essa técnica.
Forma prática e fácil de abordagem do assunto. Show!
Valeu demais! O JavaScript pra mim é paradoxal... Tem suas muitas armadilhas, mas permite fazer coisas bem interessantes.
Muito bom, da para fazer um código bem mais limpo
Amando esses vídeos novos quase todos os dias kkk 😮😁
Acho que um bom tema para abordar tbm seria Hoisting no JS
Eu assisti vários vídeos da Cod3r na Udemy, mas eu sempre assisti na velocidade 1.5, é estranho ouvir o Leonardo falando na velocidade normal. Hehehe
Ele fala bem lento mesmo. Mas tem um raciocínio bem claro e linear.
Legal demais o video, eu uso isso bastante para criar funções de validação com informações genéricas, uso muito no angular e no vue haha .
Nossa excelente explicação! show de bola Leo!
Ajudou... Irá me ajudar em um probleminha.
Bem legal, conceitos muito usados no ReactJS, por exemplo. Parabéns pelo vídeo.
top demais, qual o número máximo de parametros do tipo função que dá pra colocar numa composição?
Não há um limite. Pelo menos desconheço. 😁
Parabéns pela excelência da aula!!!
Muito bom o vídeo!! Falei rapidamente sobre HOC no meu vídeo de Redux de ontem pra explicar o "connect", mas você matou a pau na didática, parabéns!
Perfeito! Muito claro e útil. Parabéns!
Muito bom conteúdo, sou um fã de programação funcional e esse método é maravilhoso para reforçar o uso de função assíncrona por exemplo para chamada API.
Parabéns pelo conteúdo que vem postando, estou acompanhando diariamente o canal, já curtia a didática e agora estou ainda mais, para iniciante é maravilhoso, para quem já tem mais experiência é muito bom para rever conteudo.
O grande problema q eu ainda não entendo o método reduce(), muito menos passagem de funções como argumento. Vou dar uma olhada nisso mais vezes...
Top demais! Parabéns, valeu.
Nossa foi top, isso é muito.util quando precisa de muito métodos , vou tentar fazer ele no react ,pois estou fazendo o react com script , puxando ele pro HTML , e colocando e colocando dentro das tags script , não tô usando o node ,tô fazendo nativo .
Excelente! Javascript é muito flexível.
Mais isso serve pra que ,vai ser ultilizado como ? Alguém explica por favor
Muito bom conteúdo do video. Gostaria de ver mais videos assim sobre JS. 👏
Excelente aula, Leonardo!
muito bom cara, acompanho teus cursos na Udemy, mas só agora me inscrevi no canal, vou acompanhar os outros vídeos! Vlw por compartilhar!
Mano eu gostaria de entender um pouco mais como funciona o Lazy evaluation
Estou caminhando... uma hora eu entendo isso tudo rsrs... estou fazendo seu curso
Esse conhecimento tá pairando ainda na minha cabeça... ainda não caiu a fixa, mas vou assistir mais umas quantas vezes hehehe.
O cara eh mto crânio! Meu Deus
Voces poderiam adicionar curso de vue3 com o vitejs agradeceria mt, so vou assinar o plano da cod3r se tiver esses 2
Caramba excelente video aula, obrigado!
Quando tenho de usar uma função muitas vezes para fazer a mesma tarefa em elementos similares eu retono uma referência pra ela mesma.
Por exemplo quando quero por o atributo disabled em vários campos input eu faço assim.
function disableInput(id){
$('#'+id).attr('disabled', 'disabled');
return disableInput;
}
disableInput('nome')('sobrenome')('telefone');
Eu passaria um array e rodaria um forEach, nunca tinha pensado em fazer assim kkk
Excelente vídeo. Vou estudá-lo hoje
Amigos da Cod3r, gostaria de sugerir um conteúdo. Um form master-detail em react ou Vue. Incrível que tenho uma tonelada de curso comprado e em nenhum é ensinado esta técnica/padrão. Observo que tenho vários cursos de vocẽs e se porventura algum tiver este conteúdo, agradeceria se me informasse, pois não achei.
Abração !
Meu Deus nunca tinha pensado nisso, se fosse eu, teria feito tudo numa função só kkkk
Caramba!
Muito massa!
Vlw Léo!!!!
Excelente conteúdo... Fantástico!
Bem tentei reproduzir o codigo aqui no meu pc, mas sempre que mando abrir o arquivo no terminal da erro na linha 1 caractere 21 :/
function composicao(...funcoes){
return function(valor){
return funcoes.reduce((acc, fn) => {
return fn(acc)
}, valor)
}
}
function gritar(texto){
return texto.toUpperCase();
}
function enfatizar(texto){
return `${texto}!!!!`
}
function tornarLento(texto){
return texto.split('').join(' ');
}
const exagerado = composicao(
gritar,
enfatizar,
tornarLento
)
console.log(exagerado('Teste de composicao de variaveis'))
console.log(exagerado('debbug'))
Rest é com 3 (...func) pontos, vc usou 4
Programação é simplesmente incrível.
Parabéns!!! Aula top
Muito legal.!!!parabéns.
Excelente vídeo, parabéns!!
Excelente explicação e didática!!!!!!!!
Eu só fiquei com duvida de quem são os acc e fn no return da função
O reduce funciona como um loop.
E ele faz 2 coisas.
A cada loop ele pega um item do array (o fn), e retorna um valor.
Valor esse q se torna o acumulado (acc) e pode ser reutilizado no próximo loop.
Ou seja, digamos q o valor inicial seja "abc"
Loop 1 retorna ABC
Loop 2 retorna ABC!!!
Loop 3 retorna A B C !!!
E o resultado do último loop é o valor final da operação.
A função, de forma mais 'aportuguesada':
[gritar, enfatizar, tornarLento].reduce(
(textoRetornado, itemDaLista) => {
return itemDaLista(textoRetornado)
}, valorInicial)
Será que dá para fazer isso também no typescript?
Sim! Sem dúvida
"todo JS válido é um TS válido"
Esses cursos da Udemy são atualizados ?
Incrível, muito massa esse assunto.
Fazendo um paralelo com poo isso substituiria a herança uma vez que se use apenas funções e não classes?
Se achou isso experimente ver os módulos do angular e tudo fará mais sentido!
tem uma maneira simples de entender isso de forma bem rapida e direta
Parabéns professor !
@Cod3r Cursos
Excelente explicação, faço seu curso de desenvolvimento moderno.
Só uma dúvida, meu VScode não está com o intellisense para javascript, há algum procedimento que eu possa fazer (desde já, pesquisei, porém sem sucesso)
Obrigado
Instala a extensão ESLINT
@@adrianofaria2834 ja fiz isso, acredito que tenha alguma configuração. Né?
Procura Visual Studio IntelliCode
@@cod3r obrigado
Esse negócio de funcional é novo pra mim, confesso que embaralhou tudo o meu cérebro
Po, eu preciso aprender um paradigma, to estudando OO pq é mais fácil. Aí me pergunto, no Javascript será que da pra conseguir emprego sabendo só OO (pra Javascript)?
O ideal pra Javascript é entender bem a parte de função... Depois de um tempo vc verá que não tão complicado.
@@cod3r Beleza. Muito obrigado, professor. Então eu vou continuar assistindo suas aulas lá na Udemy. Comprei o curso há um tempão já. Aulas excelentes a propósito.
OO Ainda deveria ser uma prioridade
Pra quem tem dificuldade de entender a logica é a seguinte:
funcão executaFuncoes(funcao1,funcao2,funcao3){
return funcao1(funcao2,funcao3)
}
funcao1(){
return `O gato Mia`
}
funcao2(){
return 'o pinto pia'
}
funcao3(){
return 'o cachorro late'
}
executaFuncoes(funcao1,funcao2,funcao3){
aqui vai ser retornado é o que cada funcao faz, no caso
o gato mia,
o pinto pia,
o cachorro late
}
a logica é simplesmente executar funcoes uma apos a outra algo como:
funcao1()
funcao2()
funcao3()
porem manipulando as posicoes e ordens ou ainda o conteudo de cada uma.
Olá, aulas excelentes! Sou aluno seu na plataforma udemy, queria saber quais livros pra iniciante em javascript eu deveria ler para complementar com seus cursos?
Excelente!!!
Esse conceito de composiçao é melhor que o de herança na poo né?
Sim, mas no caso a composição do vídeo se refere a técnica de fazer composição de funções utilizada em programação funcional.
Interessante o conteúdo =)
Isso é muito bom quando vc quer dificultar as pessoas enteder o seu código, esse monte de funções sintetizado dentro de parâmetros foge do escopo "Single-responsibility principle" nunca faça isso dentro do trabalho em equipe, a não ser que te peçam.
em uma única linha de código: const composicao = (...fns) => (valor) => fns.reduce((acc, fn) => fn(acc), valor)
.
isso é muito louco hahah
bagunça da merda
O que me ferra é esse parâmetro "funcoes" da função composição significar todas as outras funções... Isso me ferra muito e sempre! Eu tenho uma dificuldade de entender os parâmetros das funções em JavaScript que às vezes eu os escrevo sem entender e dá certo, de tão doida que essa parte é!
Obg dicas too
Olá professor Leo (você tem o nome do meu filho), fiquei com vontade de saber de aplicabilidade no mundo real em relação a este conceito de composição de funções. Grande abraço! Ah, e você tem um nome muito bonito =)
o framework flutter usa composição nos widgets,programando-se na linguagem Dart,esses frameworks usa muita composição
nossa nao entendi kkkkkk que desespero. Estou estudando funções mas nao entendi. :(
Muito foda!!!!
Neste caso, não. Mas isso torna o código difícil !!
Obrigadooooo
Vários conteúdos showw2
Interessante!
top, como sempre!!!
Relativamente fácil.
Top top top!!!
Achei muito bacana a ideia! Mas não consigo abstrair isso pra um exemplo real. Alguém poderia dar um exemplo de aplicabilidade?
Olha esse vídeo que eu explico a ideia de composição em um exemplo mais complexo... th-cam.com/video/Gu7fsv4Lf7E/w-d-xo.html
Cod3r Cursos Massa, muito show o exemplo! Obrigado
M u i t o B a c a n a, L E O !!!!
Muito obrigado!
Praticamente tudo q ele passou aí foi algoritmos e estrutura de dados, AED