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
NaNfor good measure,
though it is good to note in JavascriptNaNis technically anumbertype📖 - Before we jump in, it's important to note the > difference between using the
newoperator 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.
Top comments (0)