## DEV Community is a community of 700,720 amazing developers

We're a place where coders share, stay up-to-date and grow their careers.

# Type Conversion with String, Number, and Boolean Functions

Quinn Lashinsky
Front End Developer. Huge fan of Nintendo, baseball, cats, and fitness.

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.

``````/*
* 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"
``````
``````/* 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:

``````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

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

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.

``````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.

``````// 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.

``````// 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.