 # JavaScript Variable coercion/conversion

## Remarks

Some languages require you to define ahead of time what kind of variable you're declaring. JavaScript doesn't do that; it will try to figure that out on its own. Sometimes this can create unexpected behavior.

If we use the following HTML

``````<span id="freezing-point">0</span>
``````

And retrieve its content through JS, it will not convert it to a number, even though one might expect it to. If we use the following snippet, one might expect `boilingPoint` to be `100`. However, JavaScript will convert `moreHeat` to a string and concatenate the two string; the result will be `0100`.

``````var el = document.getElementById('freezing-point');
var freezingPoint = el.textContent || el.innerText;
var moreHeat = 100;
var boilingPoint = freezingPoint + moreHeat;
``````

We can fix this by explicitly converting `freezingPoint` to a number.

``````var el = document.getElementById('freezing-point');
var freezingPoint = Number(el.textContent || el.innerText);
var boilingPoint = freezingPoint + moreHeat;
``````

In the first line, we convert `"0"` (the string) to `0` (the number) before storing it. After doing the addition, you get the expected result (`100`).

## Converting a string to a number

``````Number('0') === 0
``````

`Number('0')` will convert the string (`'0'`) into a number (`0`)

A shorter, but less clear, form:

``````+'0' === 0
``````

The unary `+` operator does nothing to numbers, but converts anything else to a number.
Interestingly, `+(-12) === -12`.

``````parseInt('0', 10) === 0
``````

`parseInt('0', 10)` will convert the string (`'0'`) into a number (`0`), don't forget the second argument, which is radix. If not given, parseInt could convert string to wrong number.

## Converting a number to a string

``````String(0) === '0'
``````

`String(0)` will convert the number (`0`) into a string (`'0'`).

A shorter, but less clear, form:

``````'' + 0 === '0'
``````

## Double Negation (!!x)

The double-negation `!!` is not a distinct JavaScript operator nor a special syntax but rather just a sequence of two negations. It is used to convert the value of any type to its appropriate `true` or `false` Boolean value depending on whether it is truthy or falsy.

``````!!1            // true
!!0            // false
!!undefined    // false
!!{}           // true
!![]           // true
``````

The first negation converts any value to `false` if it is truthy and to `true` if is falsy. The second negation then operates on a normal Boolean value. Together they convert any truthy value to `true` and any falsy value to `false`.

However, many professionals consider the practice of using such syntax unacceptable and recommend simpler to read alternatives, even if they're longer to write:

``````x !== 0        // instead of !!x in case x is a number
x != null      // instead of !!x in case x is an object, a string, or an undefined
``````

Usage of `!!x` is considered poor practice due to the following reasons:

1. Stylistically it may look like a distinct special syntax whereas in fact it is not doing anything other than two consecutive negations with implicit type conversion.
2. It is better to provide information about types of values stored in variables and properties through the code. For example, `x !== 0` says that `x` is probably a number, whereas `!!x` does not convey any such advantage to readers of the code.
3. Usage of `Boolean(x)` allows for similar functionality, and is a more explicit conversion of type.

## Implicit conversion

JavaScript will try to automatically convert variables to more appropriate types upon use. It's usually advised to do conversions explicitly (see other examples), but it's still worth knowing what conversions take place implicitly.

``````"1" + 5 === "15" // 5 got converted to string.
1 + "5" === "15" // 1 got converted to string.
1 - "5" === -4 // "5" got converted to a number.
!0 === true // 0 got converted to boolean
if ("hello") {} // runs, "hello" got converted to boolean.
new Array(3) === ",,"; // Return true. The array is converted to string - Array.toString();
``````

Some of the trickier parts:

``````!"0" === false // "0" got converted to true, then reversed.
!"false" === false // "false" converted to true, then reversed.
``````

## Converting a number to a boolean

``````Boolean(0) === false
``````

`Boolean(0)` will convert the number `0` into a boolean `false`.

A shorter, but less clear, form:

``````!!0 === false
``````

## Converting a string to a boolean

To convert a string to boolean use

``````Boolean(myString)
``````

or the shorter but less clear form

``````!!myString
``````

All strings except the empty string (of length zero) are evaluated to `true` as booleans.

``````Boolean('') === false   // is true
Boolean("") === false   // is true
Boolean('0') === false  // is false
Boolean('any_nonempty_string') === true // is true
``````

## Integer to Float

In JavaScript, all numbers are internally represented as floats. This means that simply using your integer as a float is all that must be done to convert it.

## Float to Integer

To convert a float to an integer, JavaScript provides multiple methods.

The `floor` function returns the first integer less than or equal to the float.

``````Math.floor(5.7); // 5
``````

The `ceil` function returns the first integer greater than or equal to the float.

``````Math.ceil(5.3); // 6
``````

The `round` function rounds the float.

``````Math.round(3.2); // 3
Math.round(3.6); // 4
``````
6

Truncation (`trunc`) removes the decimals from the float.

``````Math.trunc(3.7); // 3
``````

Notice the difference between truncation (`trunc`) and `floor`:

``````Math.floor(-3.1); // -4
Math.trunc(-3.1); // -3
``````

## Convert string to float

`parseFloat` accepts a string as an argument which it converts to a float/

``````parseFloat("10.01") // = 10.01
``````

## Converting to boolean

`Boolean(...)` will convert any data type into either `true` or `false`.

``````Boolean("true") === true
Boolean("false") === true
Boolean(-1) === true
Boolean(1) === true
Boolean(0) === false
Boolean("") === false
Boolean("1") === true
Boolean("0") === true
Boolean({}) === true
Boolean([]) === true
``````

Empty strings and the number 0 will be converted to false, and all others will be converted to true.

A shorter, but less clear, form:

``````!!"true" === true
!!"false" === true
!!-1 === true
!!1 === true
!!0 === false
!!"" === false
!!"1" === true
!!"0" === true
!!{} === true
!![] === true
``````

This shorter form takes advantage of implicit type conversion using the logical NOT operator twice, as described in http://www.riptutorial.com/javascript/example/3047/double-negation----x-

Here is the complete list of boolean conversions from the ECMAScript specification

• if `myArg` of type `undefined` or `null` then `Boolean(myArg) === false`
• if `myArg` of type `boolean` then `Boolean(myArg) === myArg`
• if `myArg` of type `number` then `Boolean(myArg) === false` if `myArg` is `+0`, `‑0`, or `NaN`; otherwise `true`
• if `myArg` of type `string` then `Boolean(myArg) === false` if `myArg` is the empty String (its length is zero); otherwise `true`
• if `myArg` of type `symbol` or `object` then `Boolean(myArg) === true`

Values that get converted to `false` as booleans are called falsy (and all others are called truthy). See Comparison Operations.

## Convert an array to a string

`Array.join(separator)` can be used to output an array as a string, with a configurable separator.

Default (separator = ","):

```["a", "b", "c"].join() === "a,b,c"
```

With a string separator:

```[1, 2, 3, 4].join(" + ") === "1 + 2 + 3 + 4"
```

With a blank separator:

```["B", "o", "b"].join("") === "Bob"
```

## Array to String using array methods

This way may seem to be uselss becuase you are using anonymous function to acomplish something that you can do it with join(); But if you need to make something to the strings while you are converting the Array to String, this can be useful.

``````var  arr = ['a', 'á', 'b', 'c']

function upper_lower (a, b, i) {
//...do something here
b = i & 1 ? b.toUpperCase() : b.toLowerCase();
return a + ',' + b
}
arr = arr.reduce(upper_lower); // "a,Á,b,C"
``````

## Primitive to Primitive conversion table

ValueConverted To StringConverted To NumberConverted To Boolean
undefinded"undefined"NaNfalse
null"null"0false
true"true"1
false"false"0
NaN"NaN"false
"" empty string0false
" "0true
"2.4" (numeric)2.4true
"test" (non numericNaNtrue
"0"0true
"1"1true
-0"0"false
0"0"false
1"1"true
Infinity"Infinity"true
-Infinity"-Infinity"true
[]""0true
"3"3true
['a']"a"NaNtrue
['a','b']"a,b"NaNtrue
{ }"[object Object]"NaNtrue
function(){}"function(){}"NaNtrue

Bold values highlight conversion that programmers may find surprising

To convert explicitly values you can use String() Number() Boolean()