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 JavascriptNaN
is technically anumber
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.
Top comments (0)