JavaScript Plus Sign Concatenates Instead of Giving Sum

We know that JavaScript is a flexible programming language, but one common issue arises when adding numbers; they get concatenated instead of summed. This happens because JavaScript changes its datatype automatically in some situations. We will discuss why this happens and how to fix it in this blog.

Table of Contents:

• Why Does JavaScript Concatenate Instead of Adding?
• Methods for Calculating the Sum Instead of Concatenating Them
• Method 1: Using Number() Function
• Method 2: Using parseInt() or parseFloat()
• Method 3: Using Unary + Operator
• Conclusion
• JavaScript Plus Sign Concatenates Instead of Giving Sum – FAQs

Why Does JavaScript Concatenate Instead of Adding?

You may know that in JavaScript, “+” is used to add and join strings. If any one of the operands is a string, JavaScript will treat another operand as a string. Thereby, it joins both of them instead of adding. 

Example:

let num1 = "5";

let num2 = "10";

let result = num1 + num2;

console.log(result);

Output: 

Here you can see that num1 and num2 are strings and the + operator is used. JavaScript thinks that both can be joined together as “510”  instead of adding them to get “15”.

Methods for Calculating the Sum Instead of Concatenating Them 

You can use methods such as Number(), parseInt(), parseFloat(), and Unary + Operator to ensure the numbers are added correctly, and you need to convert the string before adding them. Let’s discuss these methods below.   

Method 1: Using Number() Function

You can use the Number() function to convert a string to a number. This method makes sure that the numbers are added without concatenation.

Example:

<input type="text" id="num1" value="5">

<input type="text" id="num2" value="10">

<button onclick="addNumbers()">Add</button>

<p id="result"></p>

<script>

    function addNumbers() {

        let num1 = Number(document.getElementById("num1").value);

        let num2 = Number(document.getElementById("num2").value);

        let sum = num1 + num2;

        document.getElementById("result").textContent = "Sum: " + sum;

    }

</script>

Output: 

Explanation: You can enter two numbers to add them and click the “Add” button. And you can use the addNumbers() function to convert the input to numbers for the addition operation. 

Method 2: Using parseInt() or parseFloat()

You use parseInt() to convert a string into an integer, which is suitable for whole numbers, and you can also use parseFloat() to convert a string into a floating-point number(decimal number).

Example 1:

<input type="text" id="num1" value="5">

<input type="text" id="num2" value="10">

<button onclick="addNumbers()">Add</button>

<p id="result"></p>

<script>

    function addNumbers() {

        let num1 = parseInt(document.getElementById("num1").value);

        let num2 = parseInt(document.getElementById("num2").value);

        document.getElementById("result").textContent = "Sum: " + (num1 + num2);

    }

</script>

Output: 

Explanation: You can enter two numbers to add them and click the “Add” button. You can use the addNumbers() function to convert the input to numbers and use the parseInt() function for addition.  

Example 2: For decimal numbers

<input type="text" id="num1" value="5.5">

<input type="text" id="num2" value="10.2">

<button onclick="addNumbers()">Add</button>

<p id="result"></p>

<script>

    function addNumbers() {

        let num1 = parseFloat(document.getElementById("num1").value);

        let num2 = parseFloat(document.getElementById("num2").value);

        document.getElementById("result").textContent = "Sum: " + (num1 + num2);

    }

</script>

Output:

Explanation: You can enter two numbers to add them and click the “Add” button. You can use the addNumbers() function to convert the input to numbers and use the parseFloat() function for addition. 

Method 3: Using Unary + Operator

You can use the unary function with the “+” operator before the variable in JavaScript, which attempts to convert it to a number. It only converts the string; if it’s already a number, it remains the same.  

Example:

<input type="text" id="num1" value="5">

<input type="text" id="num2" value="10">

<button onclick="addNumbers()">Add</button>

<p id="result"></p>

<script>

    function addNumbers() {

        let num1 = +document.getElementById("num1").value;

        let num2 = +document.getElementById("num2").value;

        document.getElementById("result").textContent = "Sum: " + (num1 + num2);

    }

</script>

Output: 

Explanation: You can enter two numbers to add them and click the “Add” button. You can use the addNumbers() function with the unary + for conversion from a string to a number, followed by addition.  

Conclusion 

The above-discussed methods are the most efficient way to calculate the sum of numbers instead of concatenation. Because JavaScript sometimes joins together instead of adding them. You can use functions such as Number(), parseInt(), parseFloat(), and Unary + Operator to make sure the numbers are added together. This way, you can avoid unexpected results. 

JavaScript Plus Sign Concatenates Instead of Giving Sum – FAQs