Dúvida sobre conversão para Number no JavaScript

[veronicamedeiros]

Gostaria de um auxilio em uma dúvida: Por que é preciso converter o número para Number diversas vezes? Não bastaria fazer a conversão uma vez só antes da função? Por exemplo:

let num = document.querySelector('input#fnum')
let num = Number(num.value)

Tentei fazer dessa forma (convertendo apenas no começo), mas não funcionou e eu gostaria de entender o motivo, alguém poderia me explicar?)

O código que estou me baseando para fazer essa pergunta está abaixo:

<script> let num = document.querySelector('input#fnum') let lista = document.querySelector('select#flista') let res = document.querySelector('div#res') let valores = [] function isNumero(n){ if(Number(n) >= 1 && Number(n) <= 100){ return true }else{ return false } } function inLista(n, l){ if (l.indexOf(Number(n)) != -1){ return true } else { return false } } function adicionar(){ if(inLista(num.value, valores) == false){ valores.push(Number(num.value)) let item = document.createElement('option') item.text = `valor ${num.value} adicionado.` lista.appendChild(item) res.innerHTML = '' }else { window.alert('Valor inválido ou já encontrado na lista') } num.value = '' num.focus() } function finalizar(){ if (valores.length == 0){ window.alert('Adicione valores anes de finalizar') }else{ let tot = valores.length let maior = valores [0] let menor = valores [0] let soma = 0 let media = 0 for(let pos in valores){ soma += valores[pos] if(valores[pos] > maior){ maior = valores[pos] if(valores[pos] < menor) menor = valores[pos] } } media = soma / tot res.innerHTML = '' res.innerHTML += `Ao todo temos ${tot} cadastrados
` res.innerHTML += `O maior valor informado foi ${maior}
` res.innerHTML += `O menor valor informado foi ${menor}
` res.innerHTML += `Somando todos os valores temos ${soma}
` res.innerHTML += `A média dos números é ${media}` } } </script>

[Dnuns]

Salvo erro, nada impede que se faça uma conversão numa variável global e que esse valor seja reutilizado várias vezes. Aconselho-te a mudar a nomenclatura das variáveis:
let num = document.querySelector('input#fnum')
let numToInt = Number(num.value) -> utilizar esta variável quando necessário.

[veronicamedeiros]

Obrigada pelo retorno.
Então, já tentei alterar o nome da variável, mas também não funciona. Na verdade, a parte que não funciona (quando faço a conversão no começo), é essa:

function inLista(l, n){
if(l.indexOf(n) != -1){
return true
} else {
return false
}

Só funciona se faço a conversão para Number no n, fazendo apenas no começo, não funciona.

Não sei se é erro, mas sigo buscando sanar esta dúvida.

[Dnuns]

Gostaria, se possível, de ver o código completo para testar (html, js, css).

[felquis]

Eai parceira, de buenas? Você esqueceu de usar os backsticks para fazer syntax highlight do código aqui, e o GitHub deixou o código ilegível, aqui vai seu snippet formatado de forma legível.

let num = document.querySelector("input#fnum");
let lista = document.querySelector("select#flista");
let res = document.querySelector("div#res");
let valores = [];

function isNumero(n) {
  if (Number(n) >= 1 && Number(n) <= 100) {
    return true;
  } else {
    return false;
  }
}
function inLista(n, l) {
  if (l.indexOf(Number(n)) != -1) {
    return true;
  } else {
    return false;
  }
}
function adicionar() {
  if (inLista(num.value, valores) == false) {
    valores.push(Number(num.value));
    let item = document.createElement("option");
    item.text = `valor ${num.value} adicionado.`;
    lista.appendChild(item);
    res.innerHTML = "";
  } else {
    window.alert("Valor inválido ou já encontrado na lista");
  }
  num.value = "";
  num.focus();
}
function finalizar() {
  if (valores.length == 0) {
    window.alert("Adicione valores anes de finalizar");
  } else {
    let tot = valores.length;
    let maior = valores[0];
    let menor = valores[0];
    let soma = 0;
    let media = 0;
    for (let pos in valores) {
      soma += valores[pos];
      if (valores[pos] > maior) {
        maior = valores[pos];
        if (valores[pos] < menor) menor = valores[pos];
      }
    }
    media = soma / tot;
    res.innerHTML = "";
    res.innerHTML += `Ao todo temos ${tot} cadastrados`;
    res.innerHTML += `O maior valor informado foi ${maior}`;
    res.innerHTML += `O menor valor informado foi ${menor}`;
    res.innerHTML += `Somando todos os valores temos ${soma}`;
    res.innerHTML += `A média dos números é ${media}`;
  }
}

[veronicamedeiros]

Obrigada! Não conhecia essa função. Na verdade ainda estou meio perdida em como fazer.

[felquis]

Entendi seu questionamento, é que seu script está usando muito o input.value e por definição essa propriedade do elemento input sempre retorna uma string.

[veronicamedeiros]

Minha dúvida seria o motivo de não poder converter uma única vez a variável. O outro colega disse que poderia, e talvez seja um erro.

[felquis]

Entendi, o negocio é que o script está pegando de input.value e isso não é uma variável, é um getter do elemento input que por definição sempre irá retornar string.

O que você pode e deve fazer, é no inicio do script ou sempre que ele começa a lidar com input.value você define:

function adicionar() {
  const parsedNum = Number(input.value)
  // ...
}

Agora você usa este parsedNum em vez de input.value, exemplo:
Essa função:

let num = document.querySelector("input#fnum");
function adicionar() {
  if (inLista(num.value, valores) == false) {
    valores.push(Number(num.value));
    let item = document.createElement("option");
    item.text = `valor ${num.value} adicionado.`;
    lista.appendChild(item);
    res.innerHTML = "";
  } else {
    window.alert("Valor inválido ou já encontrado na lista");
  }
  num.value = "";
  num.focus();
}

Ficaria assim:

let num = document.querySelector("input#fnum");
 function adicionar() {
    const parsedNum = Number(num.value)
    if (inLista(parsedNum, valores) == false) {
     valores.push(parsedNum);
     let item = document.createElement("option");
     item.text = `valor ${num.value} adicionado.`;
     lista.appendChild(item);
     res.innerHTML = "";
   } else {
     window.alert("Valor inválido ou já encontrado na lista");
   }
   num.value = "";
   num.focus();
 }

Veja como ficou a linha inLista(parsedNum), por você estar passando o valor já com o efeito de Number(num.value) a definição da função inLista não precisa mais de Number()... refatorando:

function inLista(n, l) {
  if (l.indexOf(n) != -1) {
    return true;
  } else {
    return false;
  }
}

Eai ficou mais claro? Mais confuso? Diz ai.

[felquis]

Se minha resposta responde sua dúvida marca como resolvido para eu ganhar um 🍪 obrigado ❤️

[felquis]

Oi @veronicamedeiros, tudo bem? Consegui responder sua questão?

[felquis]

@veronicamedeiros olha a dica que descobri hoje no Twitter:

const input = document.querySelector('input#fnum')

console.log(typeof input.valueAsNumber) // number
console.log(typeof input.value) // string

spec: https://html.spec.whatwg.org/multipage/input.html#dom-input-valueasnumber
blog post: https://bigfatsoftwareinc.wordpress.com/2020/07/02/methods-valueasnumber-valueasdate/
video: https://twitter.com/Steve8708/status/1522041315239755778
suporte de browsers: https://caniuse.com/mdn-api_htmlinputelement_valueasnumber