Javascript - Brincando com números

Quando você começa a estudar sobre a estrutura léxica da Javascript, você vê que as “bizarrices” encontradas em http://wtfjs.com/ são todos comportamentos esperados! Hoje eu quero mostrar algo simples, mas que pode te ajudar bastante ao trabalhar com números em Javascript :D

Conversão de números

Em um projeto que você recebe uma entrada de dados do usuário, você precisa sempre tratar essa entrada, para saber se está realmente recebendo o valor que você espera. Vamos dar um exemplo, onde você tem uma função chamada sum(), que soma dois números. Esses dois números são recebidos através de dois inputs (vou deixar tudo em um só arquivo somente para exemplificar. Eviter fazer isso):

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Somar dois números</title>
</head>
<body>
  <h1>Somar dois números</h1>
  <input type="text" data-js="number1">
  <input type="text" data-js="number2">
  <button type="button">Somar</button>
  <div data-js="result"></div>
  
  <script>
    document.querySelector( 'button' )
      .addEventListener( 'click', handleClick, false );
    
    function handleClick() {
      var number1 = document.querySelector( '[data-js="number1"]').value;
      var number2 = document.querySelector( '[data-js="number2"]').value;
      
      document.querySelector( '[data-js="result"]' ).innerHTML = sum( number1, number2 );
    }
    
    function sum( number1, number2 ) {
      return number1 + number2;
    }
  </script>
</body>
</html>

Esse seria mais ou menos o código que você iria utilizar para fazer a soma, correto?

Entre com dois números nos inputs e veja o resultado:

Somar "1" e "2" é igual a "12"

Eu entrei com os números 1 e 2 e tive como resultado… 12!

12??? Como assim?

O Javascript recebeu os valores dos inputs da forma como eles vieram. Normalmente esses valores vêm como String. Se você conhece a estrutura léxica do Javascript, você sabe que, ao usar o sinal de +, ele pode tanto somar números, como concatenar strings. Quando você tem ao menos uma string em uma das partes, ele assume que o que você quer fazer é concatenar.

Então como eu posso resolver isso?

Precisamos converter esses valores de string para números, antes de efetuar a soma!

parseInt()

Temos a função parseInt(), que recebe dois parâmetros: o primeiro é o valor que você quer converter para um número inteiro, e o segundo, um número inteiro que vai representar o tipo de conversão que será feito.

No nosso caso, vamos utilizar como segundo parâmetro o número 10, que representa números decimais.

Mudamos um pouco nossa função de soma para ficar assim:

1
2
3
4
function sum( number1, number2 ) {
  var DECIMAL = 10;
  return parseInt( number1, DECIMAL ) + parseInt( number2, DECIMAL );
}

Como já vimos em posts anteriores, vamos utilizar boas práticas de Clean Code. Coloquei o número 10 em uma variável chamada DECIMAL (tudo maiúsculo, pois é convenção para constantes), para que saibamos o que significa esse segundo parâmetro.

A boa prática é nunca usar números mágicos, mas sempre atribuí-los à uma constante.

Agora tente novamente fazer a soma:

Soma 1 + 2 = 3

E temos o resultado correto :)

É importante frisar o uso do segundo parâmetro do parseInt(), pois isso pode alterar o resultado final. Por exemplo:

1
2
3
4
parseInt( '10px' ); // 10
parseInt( '10px', 10 ); // 10
parseInt( '0x' ); // NaN
parseInt( '0x', 10 ) // 0

Como você pode ver nos exemplos acima, o parseInt() converte a string baseado nos primeiros caracteres, se o segundo parâmetro não for passado.

No primeiro e segundo exemplos, ele retorna 10. Mas no terceiro e quarto exemplos, temos uma pequena diferença.

Quando uma string é iniciada em 0X ou 0x, e o segundo parâmetro não for definido, o parseInt() entende que essa é uma notação hexadecimal, e tenta converter ao inteiro equivalente. Como 0x é só o início da string, não retorna número algum, o resultado é NaN (Not a number).

No quarto exemplo, nós dizemos ao parseInt() que a string deve ser interpretada como decimal. Então ele apresenta o resultado esperado.

Muito cuidado com isso ;)

Para ver todos os tipos disponíveis para usar no segundo parâmetro, acesse https://developer.mozilla.org/pt-BR/docs/Web/JavaScript/Reference/Global_Objects/parseInt.

O operador +

Mas tem outra malandragem pouco conhecida para a conversão de números: o sinal de +. Quando usado antes de uma string, e a string for um número, ele converte o tipo dessa string para Number! Duvida? Mude a função sum() novamente:

1
2
3
4
5
function sum( number1, number2 ) {
  number1 = +number1;
  number2 = +number2;
  return number1 + number2;
}

Convertemos os valores para número antes de somar e… agora nosso resultado está correto novamente!

Conclusão

A intenção desse post foi mostrar o uso do operador +, que facilita muito na hora de converter String para Number, além de frisar a importância do uso do segundo parâmetro no parseInt().

Gostou da dica? Ficou com alguma dúvida? Comente!

Até a próxima!

Sobre o #1postperday: https://blog.da2k.com.br/2014/12/31/um-post-por-dia/

Tem alguma sugestão para os próximos posts do #1postperday? Deixe ela aqui: https://github.com/fdaciuk/fdaciuk.github.io/issues/1