Como resolver: somar dois números juntam eles em vez de somar

Neste artigo você vai aprender a como resolver o classico problema: somar dois números juntam eles em vez de somar, em JavaScript.

Fala programador(a), beleza? Bora aprender mais sobre JavaScript!

Introdução

Uma situação comum que os programadores enfrentam ao trabalhar com JavaScript é quando tentam somar dois números, mas, em vez disso, eles são concatenados como strings.

Isso ocorre porque o JavaScript é uma linguagem de tipagem dinâmica e, às vezes, não distingue corretamente entre números e strings.

Neste artigo, discutiremos o problema de somar dois números juntam eles em vez de somar e abordaremos várias soluções para resolvê-lo.

Entendendo o problema

Vamos começar com um exemplo simples:

const a = "10";
const b = "20";
const soma = a + b;
console.log(soma); // "1020" em vez de 30

Neste exemplo, esperamos que a e b sejam somados e o resultado seja 30.

No entanto, como a e b são strings, o operador + os concatena em vez de somá-los, resultando em “1020”.

Isso ocorre porque o JavaScript trata o operador + como uma concatenação de strings quando pelo menos um dos operandos é uma string.

Converter strings em números

A solução mais simples para esse problema é converter as strings em números antes de somá-los. Existem várias maneiras de fazer isso no JavaScript:

Usar o construtor Number:

const a = "10";
const b = "20";
const soma = Number(a) + Number(b);
console.log(soma); // 30

Usar o operador unário +:

const a = "10";
const b = "20";
const soma = +a + +b;
console.log(soma); // 30

Usar a função parseInt:

const a = "10";
const b = "20";
const soma = parseInt(a, 10) + parseInt(b, 10);
console.log(soma); // 30

Usar a função parseFloat para números decimais:

const a = "10.5";
const b = "20.5";
const soma = parseFloat(a) + parseFloat(b);
console.log(soma); // 31

Qualquer uma dessas abordagens converterá as strings em números antes de realizar a soma, fornecendo o resultado esperado.

Garantindo que os valores sejam números

Se você estiver trabalhando com dados de entrada que podem ser números ou strings, pode ser útil garantir que todos os valores sejam números antes de realizar operações matemáticas.

Uma maneira de fazer isso é usar a função Number.isFinite:

function somar(a, b) {
  if (!Number.isFinite(a) || !Number.isFinite(b)) {
    throw new Error("Os valores devem ser números.");
  }

  return a + b;
}

const a = "10";
const b = "20";
const soma = somar(Number(a), Number(b));
console.log(soma); // 30

Neste exemplo, a função somar verifica se ambos os argumentos são números finitos e lança um erro se algum deles não for.

Isso pode ajudar a evitar problemas ao somar valores inesperadamente tratados como strings.

Usando o TypeScript

Se você encontrar esse problema com frequência e desejar uma solução mais robusta, pode considerar o uso do TypeScript.

O TypeScript é um superconjunto de JavaScript que adiciona tipos estáticos à linguagem.

Com o TypeScript, você pode especificar os tipos de variáveis e funções e o compilador TypeScript verificará se os tipos estão corretos durante a compilação.

function somar(a: number, b: number): number {
  return a + b;
}

const a = 10;
const b = 20;
const soma = somar(a, b);
console.log(soma); // 30

Neste exemplo, a função somar recebe dois argumentos do tipo number e retorna um number.

Se você tentar passar uma string para a função, o compilador TypeScript lançará um erro.

const a = "10";
const b = "20";
const soma = somar(a, b); // Erro: Argumento do tipo 'string' não é atribuível ao parâmetro do tipo 'number'.

Isso pode ajudar a evitar problemas com a concatenação de strings em vez da soma de números.

Lidando com entradas de usuário e validação

Muitas vezes, o problema de somar dois números juntam eles em vez de somar surge quando lidamos com entradas de usuário.

Ao receber entradas de usuário, é importante validar e limpar os dados antes de usá-los em cálculos ou outras operações.

Aqui estão algumas dicas para lidar com entradas de usuário:

• Use a função Number ou parseFloat para converter strings em números antes de realizar operações matemáticas.
• Verifique se os valores convertidos são números finitos usando a função Number.isFinite.
• Informe o usuário sobre erros de entrada e forneça orientações sobre como corrigi-los.
• Considere o uso de bibliotecas de validação de entrada, como Joi, para simplificar a validação e limpeza de dados de entrada.

Quer aprender mais sobre JavaScript? Confira o vídeo abaixo:

Conclusão

Neste artigo, exploramos o problema de somar dois números juntam eles em vez de somar no JavaScript e discutimos várias soluções para resolvê-lo.

Aprendemos como converter strings em números antes de somá-los, garantir que os valores sejam números antes de realizar operações matemáticas, usar o TypeScript para adicionar tipos estáticos e lidar com entradas de usuário e validação.

Ao aplicar essas técnicas, você pode evitar problemas com a concatenação de strings em vez da soma de números e escrever código JavaScript mais robusto e confiável.

Está buscando em evoluir como Programador? Confira o nossos cursos clicando aqui.

Nosso principal objetivo é tornar você um dev profissional que é capaz de resolver problemas de alta dificuldade e criar projetos complexos, através de uma metodologia planejada nos mínimos detalhes, após formar muitos outros desenvolvedores.

Cursos com vários projetos, exercícios, material apoio, comunidade de alunos e muito mais!