Type Conversion (or "Type Coercion") from one type to another in JavaScript
Tags: coercion, javascript, webdev, beginners
Published: 2021-02-22 07:26:09

Simply put: Type Coercion is the process of converting from one data type to another(be it a number, string or a boolean). Coercion can be necessary for cases where you have a number in the form of a string(say, `"67"`), and you need to perform some numeric operations on it, for example.

In this article, we're going to look at how to convert from a data type to a number or string in JavaScript. You cannot(you can, but it's a bit clunky :sob:) convert something to an array or object since they are not primitives.

## String/Boolean → Number
To convert a string or Boolean to a number, there are 3 possible ways:

### `parseInt()` and `parseFloat()` function
The `parseInt()` and `parseFloat()` methods are built-in to the global or window object in JavaScript. These methods **take in a string and try to parse the value from the first character until the string has a valid numeral**. 
The `parseInt` function returns only the integer part, while `parseFloat` function returns whatever is parsed, with the decimal part.
You can also specify an optional parameter `radix`(only available in parseInt), which tells the function the numeral system to use while parsing. If nothing is specified, the following conditions are applicable:
- If the string starts with "0x", then the radix parameter will default to 16(hexadecimal)
- If the string starts with 0, then the radix parameter will default to 8(octal). This behaviour is deprecated since ES6, where it will default to 10 unless specified otherwise.
- If the above conditions are not met, the value of the radix parameter will be 10.

If the value cannot be parsed, the function will return `NaN`(not a number).

**Usage**:
```js
parseInt("123582jdme"); // 123582
parseInt("37.19"); // 37
parseFloat("37.19"); // 37.19
parseInt("0x8F"); // 143
parseInt("abcr2929"); // NaN
parseInt(true); // NaN
parseInt(10n); // 10
```
### `Number` constructor
The `Number` constructor function or "primitive object wrapper" is, again, a built-in one in JavaScript. It takes in any primitive type and converts it into a number. It can take a boolean or string(or even a number!) and tries to convert it into a numeric value. You need not use the `new` keyword with it, since it is a primitive type wrapper. Like `parseInt` and `parseFloat`, you can pass into it a hexadecimal number starting with "0x", and if it cannot be converted, it returns `NaN`
**Usage**:
```js
Number("0x89FAC"); // 565164
Number("0x0F"); // 15
Number(true); // 1
Number(false); // 0
Number(null); // 0
Number("123abc"); // NaN
Number(10n); // 10
```

If you notice the last line, it returns NaN if 123abc is tried to be converted. If you are using `parseInt`, this will be 123. This is because `parseInt` and `parseFloat` coerce a string to a number "from the first non-whitespace character until a valid numeral", while the `Number` function tries to convert the number in a whole.

Also, you may notice that when a boolean is passed to `parseInt` or `parseFloat`, it returns `NaN`, while `Number` returns a number, 1 or 0, depending on the boolean. This has to do with "auto-coercion". Any thing passed to `parseInt` or `parseFloat` will be coerced to a string behind the scenes, so `true` will be coerced to `"true"` and `false` will be coerced to `"false"`.

### The unary plus(+) operator
The unary plus operator is used before its operand. The expression will be evaluated to the numeric form of the operand(if not already a number). Again, like `Number`, you can have hexadecimal numbers, prefixed with "0x", and the expression will be evaluated to `NaN` if the operand cannot be parsed.

**Usage**:
```js
+"7" // 7
+"-3" // -3
+true // 1
+false // 0
+null // 0
+"abc123" // NaN
+10n // Uncaught TypeError: Cannot convert a BigInt value to a number
```

Here, you may notice that when we try to convert a `BigInt` value to a number using the unary plus, it throws an exception, while the other two methods stated above convert it to regular numbers.
> If you don't know what a `BigInt` is, check out the [MDN docs](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/BigInt).

#### My fav: Unary plus(+)

### Browser support
You can check that out from the caniuse reports:
- `parseInt` and `parseFloat`: https://caniuse.com/mdn-javascript_builtins_parseint and https://caniuse.com/mdn-javascript_builtins_parsefloat
- `Number`: https://caniuse.com/mdn-javascript_builtins_number
- Unary plus: https://caniuse.com/mdn-javascript_operators_unary_plus

---

## Number/Boolean/Array → String
To convert a boolean, number or an array to a string, there are two possible ways:

### `String` constructor
Like `Number`, `String` is a primitive object wrapper built-in to JavaScript. It coerces whatever is passed into it, to a string. This is a super straightforward one and doesn't have any sort of weird effects.

**Usage**:
```js
String(true); // "true"
String(false); // "false"
String(0x0F); // "15"
String(27); // "27"
String(undefined); // "undefined"
String(null); // "null"
String(12948975894798759879867587646); // "1.294897589479876e+28"
String(12948975894798759879867587646n); // "12948975894798759879867587646"
String([1,2,3,true]); // "1,2,3,true"
String({a: 1, b: 2, c: 3}); // '[object Object]'
```

### `.toString()` function
The `toString()` method is a property in all data types: number, string(!), boolean, array and object and even things like Date, Error, etc. This method, when used, yields the same result as the `String` primitive object wrapper, except that the `undefined` and `null` do not contain any `.toString` method(will error out), as they are... _`undefined`_ and _`null`_ :wink:

**Usage**:
```js
true.toString(); // "true"
false.toString(); // "false"
(0x0F).toString(); // "15"
(27).toString(); // "27"
(12948975894798759879867587646).toString(); // "1.294897589479876e+28"
(12948975894798759879867587646n).toString(); // "12948975894798759879867587646"
[1,2,3,true].toString(); // "1,2,3,true"
({a: 1, b: 2, c: 3}).toString(); // '[object Object]'
```

## Conclusion
Aaaaaannnd, that's it for this one. I hope you've enjoyed this article and learnt something new.

Thank you and have a great day!