How Type Conversion Works in JavaScript (+ Code Examples)

In today’s edition of writing about my JavaScript learning journey, we’re diving into type conversion in JavaScript.

Type conversion is a fundamental concept when coding, especially in JavaScript, because you’ll most likely need to convert data types from one form to another. And honestly, understanding how type conversion works just makes things way easier.

So, what does type conversion mean?

In simple terms, it’s the process of changing or converting one data type into another. That’s it. Whether you’re dealing with strings, numbers, or booleans, JavaScript allows you to convert between data types either automatically (implicit type conversion) or manually (explicit type conversion).

JavaScript Type Conversion Examples with Code

Now that we understand what type conversion means, let’s explore some practical JavaScript code examples to see it in action.

Convert a string to a number in JavaScript:

The code snippet above shows how to convert a string to a number in JavaScript. In this case, we’re working with the string '100'.

You can use any of the following methods:

• parseInt()

• the + unary operator

• Number()

When you log it to the console, you'll see that amount is now a number (100) and the typeof operator confirms the data type as 'number'. We can see the result from the image below.

Converting a number to a string in JavaScript:

The next on our list is how to convert a number to a string in JavaScript. This is super useful when you need to treat a number as text, maybe for display, concatenation, or storage.

To do this, you can use either:

• toString() method

• String() constructor

Both methods will convert a number to a string, and you can see how it works from the code example below:

Converting a string to a decimal in JavaScript:

Strings can also be converted to decimals, also known as floating point numbers and in JavaScript, these are still regarded as numbers.

To convert a string to a float in JavaScript, you can use the parseFloat() method. Check out the example and result below:

Converting number to booleans in JavaScript:

Our next target is converting a number to a Boolean in JavaScript. In JavaScript, numbers can be converted to Boolean values using Boolean(). An example is shown below:

Type Conversion in Action:

Now, having understood the various type conversions in JavaScript, let us break down this code step by step using the image below:

We are working with Conditional Type Conversion. This simply means that if we pass in a value, whether it's a number, a boolean, or a string, the function will try to convert that value and return the type it successfully matches.

We’re checking the following:

1. If the value can be converted to a Number, return "Number".

2. If not, but it can be converted to a Boolean, return "Boolean".

3. Otherwise, it defaults to "String".

Now, in the image below, the value "hello" was logged:

The reason we have this result is because:

• Number("hello") is NaN, so it's falsy.

• But Boolean("hello") is true, because non-empty strings are truthy in JavaScript.

So the function returns "Boolean".

Conclusion:

And with that, we’ve come to the end of today’s lesson.

If you want to dive deeper into JavaScript type conversion, as always, I highly recommend checking out the MDN Web Docs for a more thorough and detailed explanation of this concept.

Also, if you’d love to access all the code examples we’ve used today for practice and revision, feel free to head over to my GitHub repository. Everything you need is there to keep learning and experimenting.

Until next time, keep coding and stay consistent! 💻🔥