fdaciuk
commented
3 years ago Oi @Alexandre1202! Vamos lá =)
Estou repensando e me questiono se vale a pena para o de ReactJS agora para fazer o de JavaScript. O que você recomenda para quem está querendo focar em ReactJS?
React.js é JavaScript, simples assim. Então ainda que você queira focar somente em React, você não vai ter como fugir do JS, pois ele estará ali sempre presente xD
Mas você não precisa parar seus estudos em React: você pode estudar JS em paralelo, sem problema algum, até porque você já tem uma noção base da linguagem, certo? Então você pode ir estudando sob demanda mesmo, conforme forem surgindo as dúvidas, você pesquisa sobre elas a vai aprendendo assim =)
Quando você fala de colocarmos uma função dentro de outra para resolvermos a questão de concorrência dentro da recursividade, qual é o termo que você diz? Parece "Clojure". Seria isso mesmo, tal como a linguagem de backend chamada Clojure?
O termo é closure (a pronúncia é a mesma da linguagem Clojure, que tem esse nome como um trocadilho para a palavra real "closure" 😊 ).
Na linha 9 o result e o zero estão sendo passados como parâmetro para a mapInternal. Poderia explicar como é essa sintaxe onde o parâmetro vai depois do return?
O nome desse tipo de função é IIFE (Imediately Invoked Function Expression, ou Expressão de Função Invocada Imediatamente). Na verdade o parâmetro não vai depois do return. Veja que os parâmetros estão fora da função. Essa sintaxe é similar a esse código aqui:
function mapInternal (arrayInternal, counter) {
// ...
}
mapInternal(result, 0)Veja que, nesse exemplo, eu criei uma função literal, que espera dois argumentos: arrayInternal e counter. E logo após a definição da função, eu invoco a função, passando os argumentos result (que será arrayInternal, dentro da função) e o zero (que será counter dentro da função).
É exatamente isso que nós fazemos ali no exemplo, só que sem precisar criar a função primeiro para depois invocá-la.
Importante notar os parênteses em volta da função mapInternal. Isso vai fazer com que a função criada se torne uma expressão, e retorne um valor. Uma expressão de função retorna a própria função, logo é possível usar o operador parênteses para invocá-la:
(function mapInternal (arrayInternal, counter) {
// ...
})No exemplo acima eu criei uma expressão. Eu poderia atribuir essa expressão à uma variável, por exemplo:
const mapInternal = (function mapInternal (arrayInternal, counter) {
// ...
})Mas ao invés disso, eu decidi apenas invocá-la imediatamente assim que ele é criada, só passando os parâmetros que ela espera como argumento:
(function mapInternal (arrayInternal, counter) {
// ...
})(result, 0)O resultado da invocação da IIFE é sempre o retorno dela. Por exemplo:
const hello = function giveMeHello () {
return 'hello!'
}
console.log(hello()) // 'hello!'Veja a função acima: é uma expressão de função que foi passada para uma variável hello, certo? Para obter o retorno da função, é preciso invocá-la, usando o nome da variável hello, para a qual a função foi atribuída.
Se eu não quisesse invocar a função, mas sim passar diretamente a string hello! para a variável hello, ainda usando a sintaxe de função, eu poderia usar uma IIFE:
const hello = (function giveMeHello () {
return 'hello!'
})()
console.log(hello) // 'hello!'Veja que, nesse exemplo, eu não precisei invocar a função hello no console.log para exibir a mensagem hello!, pois a invocação já foi feita no momento da criação da função. É como se a função giveMeHello nem existisse nesse caso, ela serve apenas para retornar o valor, que será atribuído à variável hello =)
Tem dois artigos que eu escrevi que podem ser interessantes para complementar esse assunto:
- Os segredos da IIFE: https://blog.da2k.com.br/2015/02/20/os-segredos-da-iife/
- Como invocar funções: https://blog.da2k.com.br/2015/01/30/javascript-como-invocar-funcoes/
Pra mim ficou claro o que foi explicado anteriormente sobre Spread Operator quando se usa ...variavel para passar um parâmetro na declaração da função, conforme explicado no exemplo da soma recebendo n elementos vindo de um array. Embora aqui na linha 8 também se use esse esses três pontos "...mapInternal(tail, counter + 1)", entendi que não tem nenhuma relação com Spread Operator, mas sim, um novo termo, que ele está pegando o restante do conteúdo que vem de retorno da recursividade. Como se escreve o nome do termo para essa funcionalidade dessa linha? Mesma pergunta para os três pontos utilizado para a linha 5?
Os 3 pontinhos no JS é um operador chamado Spread Operator, independente de como ele é usado.
Na verdade, o nome mais comum agora é _Spread Syntax_, pois você tem duas formas diferentes de usar essa sintaxe:
- para declarar variáveis (ou nomear parâmetros de funções), chamamos de Rest Syntax;
- para definir valores, chamamos de Spread Syntax.
Na linha 5, como estamos definindo uma variável, estamos usando a sintaxe Rest Syntax: primeiro pegamos o head (primeiro elemento do array), e então pegamos o resto dos valores do array, e atribuímos à variável tail.
Essa sintaxe só pode ser usada como última chamada na declaração de de variáveis, ao fazer destructuring usando arrays ou objetos, ou usando para pegar os últimos argumentos em uma função, pois queremos sempre separar algo "do resto".
Já no código da linha 8, nós estamos criando um array, então ali nós usamos a sintaxe chamada Spread Syntax, pois estamos *espalhando" o valores retornados da chamada da função mapInternal.
Perceba um ponto importante aqui (não está diretamente relacionado com suas dúvidas, mas é importante colocar): a função mapInternal, para funcionar como esperamos, deve sempre retornar um array.
Isso fica muito claro na linha 7, onde verificamos se arrayInternal.length === 0, e retornamos um array vazio.
Na linha 8, retornamos um array preenchido, e usamos a Spread Syntax para pegar todos os valores de mapInternal para espalhar dentro do novo array.
Como queremos espalhar valores dentro de um array, o retorno da função mapInternal precisa, necessariamente, retornar um array. Se estivéssemos espalhando valores em um objeto, a Spread Syntax precisa ser feita em cima de um objeto. E assim por diante =)
Bom, espero que tenha clareado um pouco com essas respostas. Se ainda ficou alguma dúvida, me avise =)
alexandre1202
Oi Fernando,
Tudo bom?
Sei que faz todo sentido fazer o curso de JavaScript antes de aprender ReactJS, mas só agora que voltei a praticar ReactJS, é que estou realmente entendendo melhor sobre o assunto a ponto de saber o quanto é crucial pra mim.
Estou repensando e me questiono se vale a pena para o de ReactJS agora para fazer o de JavaScript. O que você recomenda para quem está querendo focar em ReactJS?
Assisti esse video sobre o Map Recursivo com importantes questões de programação funcional e recursos poderosos de Javascript, umas quatro vezes até poder conseguir entender cada linha mas ainda assim eu tenho dúvidas:
Considerando o código acima que é praticamente uma cópia do que você ensina no curso, por favor:
1) Quando você fala de colocarmos uma função dentro de outra para resolvermos a questão de concorrência dentro da recursividade, qual é o termo que você diz? Parece "Clojure". Seria isso mesmo, tal como a linguagem de backend chamada Clojure?
2) Na linha 9 o result e o zero estão sendo passados como parâmetro para a mapInternal. Poderia explicar como é essa sintaxe onde o parâmetro vai depois do return?
3) Pra mim ficou claro o que foi explicado anteriormente sobre Spread Operator quando se usa ...variavel para passar um parâmetro na declaração da função, conforme explicado no exemplo da soma recebendo n elementos vindo de um array. Embora aqui na linha 8 também se use esse esses três pontos "...mapInternal(tail, counter + 1)", entendi que não tem nenhuma relação com Spread Operator, mas sim, um novo termo, que ele está pegando o restante do conteúdo que vem de retorno da recursividade. Como se escreve o nome do termo para essa funcionalidade dessa linha? Mesma pergunta para os três pontos utilizado para a linha 5?
@fdaciuk