Type Conversion with String, Number, and Boolean Functions
Tags: javascript, webdev, codenewbie, programming
Published: 2021-03-02 17:40:05

Whenever we write code, we should make an attempt to organize its meaning in powerful, expressive ways. While code helps us control computers, it is also read by humans and discerning meaning is arguably just as important as how a computer reads it. As we write more and more code, we'll find a need to coerce types, changing one type to a different type. Today we're gonna explore type conversions between `string`, `boolean`, `number`, `undefined`, and `null` types. Javascript gives us ways to make these conversions using the built-in `Boolean`, `Number`, and `String` functions. But how do we use them? And when should you take a different approach when making type conversions? 

> 📖 - We'll also throw in `NaN` for good measure, 
> though it is good to note in Javascript `NaN` is technically a `number` type

> 📖 - Before we jump in, it's important to note the > difference between using the  `new` operator vs. not using it. 

> This applies to three types we are looking at today. 

```javascript
/* 
 * Creates a Primitive Wrapper Object. 
 */

new String()

// String {""}

/* 
 * This Primitive Wrapper Object contains 
 * a set of built-in methods you can call. 
 */

new String("Hello").valueOf()

// "Hello"
```

```javascript
/* Creates a string */
String("Hello")

// "Hello"
```

## String

First up, we have the `String` function.

### String Conversion

| Type               | Example           | Result      |
|--------------------|-------------------|-------------|
| Boolean (true)     | String(true)      | "true"      |
| Boolean (false)    | String(false)     | "false"     |
| Number             | String(5)         | "5"         |
| String             | String("1234")    | "1234"      |
| null               | String(null)      | "null"      |
| undefined          | String(undefined) | "undefined" |
| NaN                | String(NaN)       | "NaN"       |
| no argument passed | String()          | ""          |

`String` is probably the most predictable of the three. For primitive data types, the `String` function takes in exactly what you type and turns it into a `string`. 

`String(arguments)` is functionally the same as doing `value + ""`.

## Boolean

Now let's see how we can use the `Boolean` function!

Boolean Conversion

| Type               | Example                    | Result |
|--------------------|----------------------------|--------|
| Number (= 0)       | Boolean(0)                 | false  |
| Number (≠ 0)       | Boolean(1), Boolean(-1000) | true   |
| String             | Boolean("Hello")           | true   |
| String (empty)     | Boolean("")                | false  |
| null               | Boolean(null)              | false  |
| undefined          | Boolean(undefined)         | false  |
| NaN                | Boolean(NaN)               | false  |
| no argument passed | Boolean()                  | false  |

`Boolean` will convert falsy values to `false` and truthy values to `true`. 

`Boolean` and `!!` are interchangeable as they do the same thing. 

For example:

```javascript
const differentTypes = [NaN, 0, 1, true, "1234" null, undefined]

differentTypes.filter(Boolean) // same as array.filter(x => Boolean(x))

// [1, true, "1234"]

differentTypes.filter(x => !!x)

// [1, true, "1234"]
```

## Number

Lastly, let's look at how the `Number` function works for common use cases in Javascript.

Number Conversion

| Type               | Example                    | Result |
|--------------------|----------------------------|--------|
| Number (= 0)       | Boolean(0)                 | false  |
| Number (≠ 0)       | Boolean(1), Boolean(-1000) | true   |
| String             | Boolean("Hello")           | true   |
| String (empty)     | Boolean("")                | false  |
| null               | Boolean(null)              | false  |
| undefined          | Boolean(undefined)         | false  |
| NaN                | Boolean(NaN)               | false  |
| no argument passed | Boolean()                  | false  |

`Number(new Date())` will give us the current date in milliseconds from the [epoch](https://en.wikipedia.org/wiki/Unix_time)

`Number` shines when making conversions from a `string` representation of a `number`, into a `number`. For example, let's look at a common case:

 {% codepen https://codepen.io/quinnlashinsky/pen/OJbZBeX %}

When we increment our value without using the `Number` function, because our value is a `string` type it will concatenate. 

In Javascript, `"0" + 1 === "01"`

When we increment our value using the `Number` function, because we convert our value to a `number` type, we get our expected behavior.

In Javascript, `0 + 1 === 1`

### Number vs. parseInt/parseFloat

`Number` is wonderful for simple `string` to `number` conversions, but `parseInt` or `parseFloat` may be a more robust option if you are changing values with a unit attached.

```javascript
parseInt("100px") // 100
parseFloat("100.23") // 100.23

Number("100px") // NaN
```

It's important to note that `parseInt`/`parseFloat` will only parse numbers up until it reaches a non-number, ignoring leading or trailing whitespace.

```javascript
// parseInt and parseFloat yield the same results in this example

parseInt("a100") // NaN
parseInt("1a00") // 1

Number("a100") // NaN
Number("1a00") // NaN
```

This makes it so you can only use hexadecimal, octal, or binary numbers using their full `string` representation while using `parseInt`'s second argument, *radix.* `parseFloat` does not take any arguments.

```javascript
// Both function calls should return a binary representation of the number, 4

// Works as expected 
parseInt("100", 2) //4

// Does not work as expected
parseInt("0b100", 2) // 0 
```

---

Through learning about the `String`, `Boolean`, and `Number` functions, we've learned when it might make sense to use them, and when an alternative is better. Learning code involves adding new information to your toolbox, employing you to write more semantic, expressive, easily readable code. Let these three functions be another piece helping you learn and build with code.