JavaScript ToNumber Operation Tutorial

In this section, we will learn what the ToNumber operation is and how does it works in JavaScript.

What is ToNumber Operation in JavaScript?

When there’s a non-Number type value involved in an operation that needs values of type Number, the execution engine will run the `ToNumber` operation on the target value to coerce that value into Number data type.

Example: ToNumber operation in JavaScript

const res = "20" * 10;

console.log(res);

Output:

200

Take a look at this statement:

const res = "20" * 10;

Here the first operand is the String value `20`. But because here we have the multiplication operation, both operands should be of type Number.

So the execution engine will run the `ToNumber` operation on the first operand and coerce that value into number type.

Note: if the result of this coercion is a non-numeric value, then the execution engine will return the value `NaN` instead. We will explain the value `NaN` in later sections, but in short this value stands for `Not a Number` and refers to the fact that the target value that the execution engine tried to coerce didn’t result a value of type Number.

Example: JavaScript ToNumber operation and the NaN value

const res = "sdfds" * 10;

console.log(res);

Output:

NaN

The result of multiplying the value `NaN` to another value is again `NaN`. That’s how we got this value on the console.

List of Primitive Values and the Result of Applying ToNumber Operation

In the table below you can see a list of primitive values and the result of applying `ToNumber` operation on them:

Primitive value After ToNumbr operation
“” 0
“0” 0
“-0” -0
“009” 9
“3.14159” 3.14159
“0.” 0
“.0” 0
“sfsdf” NaN
“0xaf” 175
false 0
true 1
null 0
undefined NaN

Example: converting Boolean to number in JavaScript

console.log(20 - true);

Output:

19

Example: converting string to number in JavaScript

console.log("18" - true);

Output:

17

JavaScript Object to Number

Applying the `ToNumber` operation to values of type object (including arrays) will cause the `valueOf()` method of that target object to be invoked. Or, to be more specific, the execution engine will run the `ToPrimitive` operation on that object. The details are explained in the ToPrimitive section.

There are a few corner cases to be aware of when invoking the `ToNumber` operation on objects, as the table below shows:

Object value After ToNumber operation
[“”] 0
[“0”] 0
[“-0”] -0
[null] 0
[undefined] 0
[1,2,3] NaN
[[[[]]]] 0
{/*body…*/} NaN
{valueOf(){return 10;}} 10

Example: converting object to number in JavaScript

const obj = {
  name: "John", 
  age: 200,
  valueOf(){
    return this.age; 
  }
}
console.log(obj - 50);

Output:

150

Leave a Reply