Auto-type conversion in JavaScript

The following all expressions in JavaScript are far obvious.

var x = 10 + 10;

The value of x is 20.

x = 10 + '10';

The value of x in this case is 1010 because the + operator is overloaded. If any of the operands is of type string, string concatenation is made and if all the operands are numbers, addition is performed.

x = 10 - 10;
x = 10 - '10';

In both of these cases, the value of x will be 0 because the - operator is not overloaded in that way and all operands are converted to numbers, if they are not before the actual subtraction is performed (you may clarify, if anyway I'm wrong).


What happens in the following expression.

x = '100' - -'150';    

The value of x is 250. Which also appears to be obvious but this expression somewhat appears to be the equivalent to the following expression.

x = '100' +'150';

If it had been the case then these two strings would have been concatenated and assigned 100150 to x. So why is addition performed in this case?


EDIT :

+'10' + 5 returns 15 and 'a' + + 'b' returns aNaN. Does anyone know why?

Answers:

Answer

In your case - - is not evaluated first to become equivalent to +. -"150" is evaluated as a number, and so became -150.

As you can't subtract a string (NaN), JS then take "100" and make a number, and then it run 100 - -150 which is 250.

The key is really that you can't subtract type string, so it converts those strings to numbers.

Answer

The + and - operators respond differently to strings.

The + operator concatenates strings; however, the - operator does not do the reverse (split strings).

So if JavaScript sees '100' +'150', it thinks "Hey, I see strings with a +... I can concatenate them."

If JS sees '100' - -'150', it thinks, "Hey, I see strings with a - .. i can't really do any string functions, so I'll treat them as numbers..."

Answer

The unary - operator always converts its operand to Number (ECMA-262 s. 11.4.6). So

x = '100' - -'150';

is equivalent to

x = '100' - -150;

which reduces further to

x = 100 - -150;

because the binary - operator also always converts its operands to Number (s. 11.6.2).

By contrast, the unary + operator converts its operands to strings if either one is already a string (s. 11.6.1).

You can find the complete spec for ECMAscript (and therefore for the core of Javascript) at http://www.ecma-international.org/publications/standards/Ecma-262.htm.

Answer

If JS sees minus operator used on a string it firstly tries to type cast it to number and then evaluates expression because Minus operator is used only for arithmetical operations. Plus operator could mean in first place concatenation and then addition.

In some other weakly typed languages like PHP this ambiguity is eliminated by using two different operators for concatenation and addition.

However the proper way to use arithmetic on strings is to type cast them manually to numbers (using parseInt).

Answer

Addendum

This table shows the result of various conversions where variable s=string and n=number. You can also try your own values using the provided code snippet.

This thread answered some questions I had. And so I'm posting my test results to help others who arrive here looking for answers.

????????????????????????????????????
? INPUT       ? VALUE     ? TYPEOF ?
????????????????????????????????????
? n           ? 11.5      ? number ?
? s           ? -1.5      ? string ?
? s - 0       ? -1.5      ? number ?
? n + s - 0   ? NaN       ? error  ?
? n + (s - 0) ? 10        ? number ?
? s + 0       ? -1.50     ? string ?
? n + s + 0   ? 11.5-1.50 ? string ?
? n + (s + 0) ? 11.5-1.50 ? string ?
? n + s       ? 11.5-1.5  ? string ?
? s + n       ? -1.511.5  ? string ?
? +s + n      ? 10        ? number ?
? n + +s      ? 10        ? number ?
? n++s        ?           ? error  ?
? n+(+s)      ? 10        ? number ?
? Number(s)+n ? 10        ? number ?
????????????????????????????????????

var n = 11.5, s = '-1.5';

add('n');
add('s');
add('s - 0');
add('n + s - 0');
add('n + (s - 0)');
add('s + 0');
add('n + s + 0');
add('n + (s + 0)');
add('n + s');
add('s + n');
add('+s + n');
add('n + +s');
add('n++s');
add('n+(+s)');
add('Number(s) + n');

function add(eq) {
	var v, r, t;
  try { v = eval(eq); t = typeof v; } catch(e) { v = ''; t = 'error';}
  if (t=='number' && isNaN(v)) t = 'error';
  r = window.stdout.insertRow();
  r.className = t;
  r.insertCell().innerHTML = eq;
  r.insertCell().innerHTML = v;
  r.insertCell().innerHTML = t;
}
table { border-collapse: collapse; font-family: sans-serif; }
td { min-width: 5em; padding: 2px; border: 1px dimgray solid; text-align: right; }
tr {   background-color: lightgreen; }
.string { background-color: lightyellow; }
.error { background-color: pink; }
<table id="stdout"><caption>Type Conversion Results</caption></table>

Tags

Recent Questions

Top Questions

Home Tags Terms of Service Privacy Policy DMCA Contact Us

©2020 All rights reserved.