Etapa 3, nome do vídeo: Correção dos exercícios da aula 01 - Aula 02-01 - Exercício 06

[DiegoSampaio80]

Roger, boa noite.

Bom, tenho uma certa dificuldade em entender o caminho percorrido em alguns fluxos, dúvidas da necessidade de quando criar variáveis e o motivo de ir e voltar tantas vezes em uma única função (como função callback). Então pergunto:

01) No item 06 do exercício 08, por que optou por colocar a função dentro de uma "const"? Apenas por causa do hosting ou há outro motivo? 02) Por que criou um array "number = [ ]" dentro da função se criou outra logo abaixo como "newArray = [ ] para receber os itens? Tem a ver com o fato do "getOddNumbers" passar um array dentro dos parênteses? Ou seja, como não tem parâmetro e se trata de array, só outro array poderia receber esses números?

Grato,

O exercício é este abaixo

• Descomente a invocação da função abaixo e implemente-a;
• Ela deve retornar um novo array com apenas os números ímpares do array passado por argumento;
• Exiba o novo array no console, sem inserir um console.log() dentro da
  função.

@Roger-Melo

[Roger-Melo]

Olá @DiegoSampaio80!

Bom, tenho uma certa dificuldade em entender o caminho percorrido em alguns fluxos, dúvidas da necessidade de quando criar variáveis e o motivo de ir e voltar tantas vezes em uma única função (como função callback).

Funções de callback são fundamentais em JS. Talvez ainda não tenha "caído a ficha" pq vc ainda está no começo do treinamento. Mas não se preocupe, vc ainda será exposto à vários casos de uso diferentes delas =)

01) No item 06 do exercício 08, por que optou por colocar a função dentro de uma "const"? Apenas por causa do hosting ou há outro motivo?

Nesse caso, tanto faz o tipo de função. Eu fiz dessa forma apenas para lembrar que essa é uma das formas disponíveis.

Na real, conforme vc for avançando no treinamento, verá que na maior parte do tempo (há não ser em casos onde eu mostro como usar o this) arrow functions serão usadas ao invés de funções tradicionais, pois são mais concisas.

02) Por que criou um array "number = [ ]" dentro da função se criou outra logo abaixo como "newArray = [ ] para receber os itens? Tem a ver com o fato do "getOddNumbers" passar um array dentro dos parênteses? Ou seja, como não tem parâmetro e se trata de array, só outro array poderia receber esses números?

A const number não é um array. Ela armazena um item do array numbers. Como esse item é um número, eu nomeei ela como number.

Essa const foi declarada para que a expressão que indica se o número é ímpar fosse mais legível:

// com a const number
number % 2 !== 0

// sem a const number
numbers[i] % 2 !== 0

É uma questão de preferência. Se vc preferir, pode não declará-la.

Agora, se vc está se referindo ao default parameter numbers = [] (no plural), eu sugiro que vc veja essa aula novamente, apenas para reforçar o que de fato são default parameters. É muito comum assistir algo pela segunda vez e pegar coisas que parecem que não estavam ali na primeira vez =)

(numbers = []) é apenas um valor padrão caso a invocação da função não receba um argumento.

Isso pode parecer desnecessário agora, mas em certos casos, você não tem controle do valor que será inserido como argumento da função, e aí vc terá que testar vários casos de uso inesperados. Um deles, será o caso em que a função é invocada sem argumento.

No front-end, por exemplo, pode ser que esse valor venha de um input do usuário, e vc nunca pode confiar que o usuário fará a coisa certa. Isso será visto com mais detalhes na etapa de testes, quando eu falar sobre unhappy path, mas é interessante entender o que default parameters fazem e, se possível, se habituar a usá-los.

Já a criação da newArray aconteceu devido à um princípio da programação funcional: imutabilidade. Sempre que possível, não modifique o valor de um objeto/array diretamente. Ao invés de modificar, crie um novo. Vc verá isso com detalhes mais à frente.

O push modifica o array original e, para evitar isso, ao invés de encadear a invocação dele no numbers, ela foi encadeada no newArray =)

Respondi as dúvidas?

[DiegoSampaio80]

Oi, Roger.

Respondeu sim, obrigado. Minha dúvida era com relação ao "numbers = [ ]" (default). Eu entendi o conceito na aula - que assume valor do default caso não seja informado um argumento -, mas não estava entendedo que esse parâmetro era o default. Como eu não estava conseguindo receber os números apenas utilizando "function getOddNumbers( ){..." (antes de apelar para o vídeo), achei que para receber getOddNumbers([83, 52, 31, 73, 98, 37, 61, 56, 12, 24, 35, 3, 34, 80, 42]) eu precisava desse array dentro do parênteses.

Uma última dúvida, sobre esse exercício, o que estou fazendo de errado que a função não está recebendo os valores? Se o default seria opcional, uma segurança, por que o sistema não realiza a ação sem ele? Tentei passar os parâmentros dentro de dos parênteses e também não rodou, exemplo: "function getOddNumbers(num1,...,num15){..." Somente quando coloco "numbers = [ ]" ou "numbers = [num1, ..., num15]"

function getOddNumbers(){
  let newArray = []
  for(let i = 0; i < getOddNumbers.length; i++){
      if(getOddNumbers[i] % 2 !== 0){
        newArray.push(getOddNumbers[i]);
      }  
  }
  return newArray
}
console.log(getOddNumbers([83, 52, 31, 73, 98, 37, 61, 56, 12, 24, 35, 3, 34, 80, 42])) 

@Roger-Melo

[Roger-Melo]

No exemplo acima, o for está usando getOddNumbers.

getOddNumbers é a referência de uma função =)

Agora que dei a dica, como vc resolveria esse problema?

Poste o código da resolução aqui abaixo =)

[Roger-Melo]

Outra dica: parâmetro é uma coisa, default parameters é outra.

Execute o passo a passo abaixo comigo.

Parâmetro

Parâmetro é uma variável local usada dentro da função.

A função abaixo tem um parâmetro str:

function getString (str) {}

Se a invocação dessa função recebe um valor como argumento, ela precisa ter a declaração de um parâmetro (str) para que esse parâmetro armazene o valor inserido na invocação.

A invocação da função abaixo recebeu uma string como argumento, então a declaração dessa função precisa ter um parâmetro para armazenar 'my string':

getString('my string')

Ou seja, se vc executar o código abaixo, verá que o parâmetro str armazenou 'my string'.

function getString (str) {
  console.log(str)
}

getString('my string')

---

Default parameters

Default parameters são valores padrão que você pode atribuir à um parâmetro para impedir que o parâmetro receba undefined, caso a função seja acidentalmente invocada sem um argumento.

No código abaixo, undefined foi exibido no console pq getString foi invocada sem receber um valor como argumento. Isso fez com que str recebesse undefined automaticamente:

function getString (str) {
  console.log(str)
}

// invocada sem receber um valor como argumento
getString()

Para impedir que str receba undefined, um valor padrão (default parameter) pode ser atribuído ao parâmetro str:

function getString (str = 'valor padrão') {
  console.log(str)
}

getString()

No código acima, como a função foi invocada sem argumento, str recebeu 'valor padrão'.

Se a função é invocada com um argumento, 'valor padrão' é sobrescrito pelo valor que foi inserido como argumento:

function getString (str = 'valor padrão') {
  console.log(str)
}

getString('sobrescreveu o valor padrão')

Está ficando mais claro?

@DiegoSampaio80

[DiegoSampaio80]

Oi, Roger.

Vou te dar um pouco de trabalho, porque tenho algumas dificuldades que espero resolver com esse curso. Engraçado é que alguns exercícios mais complexos eu consegui resolver de forma muito parecida com a sua, mas empaquei nesse.

Então, esse conceito de argumento, parâmetro e valor padrão (default) atribuído ao parâmento, creio que esteja OK. Suspeito que minha dúvida esteja na sintaxe, na forma de escrever o código, pois as vezes tenho que ficar reescrevendo trechos de código para achar a posição correta que trará o resultado esperado... Não é sempre , mas acontece. Exemplo: loop aninhado, console.log e return (o último, com a revisão que fiz hoje das aulas, consegui fixar).

Com relação a função "getOddNumbers", entendi que estou utilizando o nome errado para fazer o loop, pois se trata de função. Então, revi todos vídeos de loops a funções e nos exemplos utilizava a função expression (atribuido em uma contante), e depois usava a constante como referência para o "for loop". Nesse caso, sempre terei que usar a expression para usar a variável como referência no loop?

[Roger-Melo]

@DiegoSampaio80 pode ficar à vontade para perguntar sempre que precisar =)

Suspeito que minha dúvida esteja na sintaxe, na forma de escrever o código, pois as vezes tenho que ficar reescrevendo trechos de código para achar a posição correta que trará o resultado esperado

Sempre abra a issue com a dúvida específica na hora que ela surgir. Assim eu tenho informações mais precisas para ajudar.

Nesse caso, sempre terei que usar a expression para usar a variável como referência no loop?

Não sei se entendi bem a pergunta, pode exemplificar com algum código?

De qualquer forma, não importa qual tipo de função esteja sendo usada. Qualquer função pode ter parâmetros, argumentos e referências de variáveis dentro dela:

const myConst = 1

function showValue () {
  console.log(myConst)
}

showValue() // 1

const myConst = 1

const showValue = function () {
  console.log(myConst)
}

showValue() // 1

Nos exemplos acima, myConst é acessada dentro da função, independente do tipo da função =)

Era essa a dúvida?

[Roger-Melo]

Vou fechar a issue mas no que precisar, é só abrir uma nova =)