Variables not treated as numbers

Question

I was explaining some basic javascript stuff to someone and found myself very embarrassed when a variable was not treated as a number, albeit being a number.

There are no NaN checks here, but we only input numbers.

var number1 = prompt("choose any number");
var number2 = prompt("choose another number");
alert("thank you I will multiply your numbers now!");
var multiplication = function(a, b) {
    var c = a * b;
    alert("the product of " + number1 + " and " + number2 + " is: " + c);
    var number3 = prompt("please choose a number to add to the product.");
    var sum = c + number3;
    alert(sum);
};

multiplication(number1, number2);

It seems that variable "number3" is not treated as a number and the last alert does not give a sum but rather treats "number3" as a string.

Things get better when I use trivial

var sum = c + +number3;

I cannot understand why number3 is not treated as a number, any ideas? I could not explain this to my friend and had to retreat in disgrace.

Tired on Chrome and Firefox with the same effect.

score 1 · Answer 1 · answered Dec 10 '14 at 19:49

Window.prompt always returns a String, event if it's numeric like "5". Still string. You need to perform casting from string type to number. For example using Number constructor:

var number1 = Number(prompt("choose any number"));
var number2 = Number(prompt("choose another number"));

score 1 · Answer 2 · answered Dec 10 '14 at 19:49

1

prompt() returns a string, simple as that. The * operator apparently casts the first two cases into numbers, but + is also the concatenation operator. So what happens is that now you have number + string = string. When you do +number3, that (the unary +) casts to a number. So now you have number + number = number, which is what you want.

answered Dec 10 '14 at 19:49

Scimonster

32,893
9
77
89

Thanx, this is most excellent explanation! Did not know that prompt was doing this and that * somehow overrides this. – Vadimster Dec 10 '14 at 19:52

Guffa · Answer 3 · 2014-12-10T21:54:20.677

The prompt method always returns a string, it doesn't try to convert the text that you entered into a number even if it looks like it could be a number.

When you use the multiplication operator on two strings, both will implicitly be converted to numbers, because the multiplication operator only accepts numbers.

When you use the + operator on a number (c) and a string (number3), it will do string concatenation, not addition, because at least one of the operands is a string. It will convert the number to a string and concatenate it to the other string.

Using the unary + operator on the number3 variable will implicitly convert the string into a number, because the unary plus operation can only be done on a number. It's clearer to use a function that explicitly converts the string to a number than using implicit conversion:

var number1 = parseFloat(prompt("choose any number"));
var number2 = parseFloat(prompt("choose another number"));
alert("thank you I will multiply your numbers now!");
multiplication(number1, number2);

function multiplication(a, b) {
  var c = a * b;
  alert("the product of " + number1 + " and " + number2 + " is: " + c);
  var number3 = parseFloat(prompt("please choose a number to add to the product."));
  var sum = c + number3;
  alert(sum);
};

vol7ron · Answer 4 · 2014-12-10T20:27:09.257

The + operator is overloaded as a arithmetic addition operator and as a string concatenation operator.

For the majority of cases, a value added to a string results in a string. Because prompt() returns a string, that is what's happening. You can use the unary + to turn the string back into a number (+number3), thus removing all the strings from the equation.

Note: Order of Operation does Matter

4 + 5 + '1' + 1     // '911'

The 4 and 5 are operated on first (both not strings) so arithmetic addition is executed. Then the first '1' is encountered, which is a string, so a string is involved going forward and every + will be a string concatenation.

The OP already tried that and saw that it worked, he wanted to know what's actually happening. — Guffa, Dec 10 '14 at 20:14

score 0 · Answer 5 · edited May 23 '17 at 12:05

0

As everybody explained you are working withstrings returning by the prompt.

And just for the sake of fun/quirks things that javascript have. look how you can turn that strings in numbers

multiplying by number 1 will automatically turn all the string in numbers. so in the prompt side you could you multiply the result of prompt1 and prom2 * 1 and you will not have that problem

also you can do "1" * 1 -> 1 integer

more interesting hide javascript features Hidden Features of JavaScript?

edited May 23 '17 at 12:05

Community

1
1

answered Dec 10 '14 at 20:08

ncubica

8,169
9
54
72

*"if you have "1" * "2" * 1 multiplying by number 1 will automatically turn all the string in numbers."* - The multiplication between the strings will implicitly convert both to numbers, multiplying by a number doesn't make any difference. – Guffa Dec 10 '14 at 20:29
well what about "1" + "11" = `111` "1" + "11" * 1 = `12` – ncubica Dec 10 '14 at 20:50
I edited my question a little bit and you were right whit that specific exmaple... – ncubica Dec 10 '14 at 20:52
The expression `"1" + "11" * 1` doesn't evaluate to `12` but `111`; eventhough the multiplication turns `"11"` to `11`, the first operand is still a string so the `11` will be turned back to a string. – Guffa Dec 10 '14 at 21:08
`"11"*1 + "1"*1` >> 12 now – ncubica Dec 10 '14 at 21:31

score 0 · Answer 6 · answered Dec 10 '14 at 20:22

0

The specification helps explain how automatic type conversion is working here. + performs string concatenation if one of the operands is a string, while * only performs numeric multiplication, and so converts the operands to numbers.

answered Dec 10 '14 at 20:22

Stuart

9,597
1
21
30

Variables not treated as numbers

6 Answers6