why javascript show string all arithmetic operation?

Question

as you show below, when javascript doing an arithmetic operation all value concatenation with the string it shows a string value but I have some confusion...

var x = 10;
var y = 20;
var sum = x + y;
console.log("sum is :" + sum); //this is number

But confusion is

var x = 10;
var y = 20;
console.log("sum is : " + 10 + 20 ); //why this is string

var x = 10;
var y = "The value is " + x; // why this is string 

var x = 10;
var y = 20;
var sum = x + y;
var z = 'sum is' + sum; //why this string
console.log("sum is : " + sum) // why this is not string coz it is also concatenation with string. 

Answer 1

JavaScript will concatenate and coerce in a certain order of operations. You can add parentheses to add numbers before coercing to a string.

console.log("sum is : " + 10 + 20); // sum is : 1020
console.log("sum is : " + (10 + 20)); // sum is : 30

Answer 2

The unary + operator can be used to convert a variable to a number:

var y = "5";      // y is a string
var x = + y;      // x is a number

If the variable cannot be converted, it will still become a number, but with the value NaN (Not a Number):

var y = "John";   // y is a string
var x = + y;      // x is a number (NaN)

When JavaScript tries to operate on a "wrong" data type, it will try to convert the value to a "right" type.

5 + null    // returns 5         because null is converted to 0
"5" + null  // returns "5null"   because null is converted to "null"
"5" + 2     // returns "52"      because 2 is converted to "2"
"5" - 2     // returns 3         because "5" is converted to 5
"5" * "2"   // returns 10        because "5" and "2" are converted to 5 and 2

So if you put numbers inside parenthesis like (10 + 20) then it will perform arithmetic operation first then it will do the concatenation outside. If either one of them would be string then it would do the concatenation inside as well.

var console.log("sum is : " + (10 + 20) ); // sum is : 30
var console.log("sum is : " + (10 + '20') ); // sum is : 1020

Answer 3

When you are adding a number with a string it counts the number as a string, like console.log("sum is : " + 10 + 20 ). But when 10 and 20 is under a variable it counts the number as a variable value. If you want to use numbers with a string use "sum is: " + parseInt(10) like this.