Building Blocks in JS

Type Conversions in JavaScript: All you need

Let’s talk about something that might seem a bit technical at first but is super important when it comes to working with JavaScript—Type Conversions. But don’t worry, we’ll make it as easy as learning to cook your favorite meal.

So, What Exactly is Type Conversion?

Imagine you’re texting a friend, and you type a message in English. But what if your friend only understands Bengali? You’d need to translate your message so they can understand it, right? In the world of programming, type conversion is kind of like that. It’s the process of converting one type of data into another so different parts of a program can understand and work with it. We have talked about this in one of our previous articles in the section Type Coercions, but let's dive deeper into it in this article.

For example, in JavaScript, you might have a number, like 5, but you need it to be a string, like "5", so it can be used in a different way—maybe displayed as text on a website. That’s where type conversion comes in.

If you’re building an app, you’ll be dealing with different kinds of data—numbers, text, maybe even a few true and false values (which we call booleans). These different types of data need to “talk” to each other. But for them to do that, they sometimes need to be converted from one type to another.

Automatic vs. Manual Conversions

Here’s the cool part - JavaScript is pretty smart ( So am I ). It often converts types for you automatically, like a superhero sidekick who’s always got your back. But sometimes, you need to step in and tell JavaScript exactly what to do, especially when things get tricky.

Image generated using Microsoft Copilot AI

Let’s break it down into three main types of conversions: String Conversion, Numeric Conversion, and Boolean Conversion.

1. String Conversion: Turning Data into Words

A string is basically just text—anything between quotes, like "Hello" or "LearnYard". String conversion happens when you need a value to be treated as text.

Let’s say you have a number and you want to show it on the screen as part of a message. You’ll need to convert that number into a string.

let value = 5;
console.log(typeof value); // number

value = String(value); // now value is a string "5"
console.log(typeof value); // string

In this example, 5 (a boolean) gets converted into "5" (a string).

Why would you need to do this?

Imagine you’re displaying a score in a game, and you want to show the message "Your score is 100". ( Yeah you are a smart one too) The number 100 needs to be part of that string, so you convert it to a string.

let score = 100;
console.log("Your score is " + String(score)); // "Your score is 100"

2. Numeric Conversion: Numbers rule the world no?

Numbers are everywhere in programming. Whether it’s the age of a user, the price of an item, or just counting how many times someone has clicked a button, you’ll be using numbers a lot.

Sometimes, you have something that looks like a number but is actually a string. For example, "123" is a string, not a number. But what if you need to do some math with it? You’d need to convert it to a number first.

Here’s how:

let score = "100";
console.log(typeof score); // string

let num = Number(score); // becomes a number 100
console.log(typeof num); // number

Automatic Numeric Conversion

JavaScript often converts strings to numbers automatically when you use them in mathematical operations. Check this out:

console.log("6" / "2"); // 3, strings are converted to numbers

Pretty neat, right? But be careful here, if the string can’t be converted into a valid number, you’ll get NaN, which stands for “Not a Number.” More about this is discussed in the blog "Data types in Javascript" ( todo: Add the link of the article here once it gets published)

let age = Number("an arbitrary string instead of a number");
console.log(age); // NaN, conversion failed

Conversion Rules

Here’s a quick cheat sheet on how different values convert to numbers:

undefined becomes NaN.
null becomes 0.
true becomes 1, and false becomes 0.
A string that can’t be converted into a valid number, like "123z", becomes NaN.

Here at LearnYard we always have great examples for you, check this out:

console.log(Number("   123   ")); // 123
console.log(Number("123z"));      // NaN
console.log(Number(true));        // 1
console.log(Number(false));       // 0

3. Boolean Conversion: True or False?

A boolean is a type of data that has only two values: true or false. Boolean conversion happens when you need to check if something is “truthy” or “falsy.” That’s just a fancy way of saying, “Is this something or is it nothing?”

In JavaScript:

Values that are “empty” or “nothing,” like 0, an empty string "", null, undefined, and NaN, become false.
Everything else becomes true.

console.log(Boolean(1)); // true
console.log(Boolean(0)); // false

console.log(Boolean("hello")); // true
console.log(Boolean("")); // false

Watch out though!

One thing that might trip you up is the string "0". In some languages, "0" is considered false, but in JavaScript, it’s true because it’s a non-empty string.

console.log(Boolean("0")); // true
console.log(Boolean(" ")); // true (any non-empty string is true)

The "Why" - "Karna kyu hai"?

Understanding type conversion is crucial because it helps you avoid bugs and write cleaner, more efficient code. Imagine you’re working on a sign-up form for a website. If you expect users to enter their age, you’d probably want that to be a number, right? If they enter it as text, you’ll need to convert it to a number to do things like check if they’re old enough to sign up.

Practical Example: Let's build the "Worlds smallest app"

Let’s tie everything together with a practical example. Say you’re building a simple app where users can enter their age and get a message telling them if they’re old enough to vote.

Here’s how you might handle that:

function isAllowedToVote() {
    let age = prompt("Enter your age:");
    age = Number(age);

    if (isNaN(age)) {
        console.log("Please enter a valid number.");
    } else if (age >= 18) {
        console.log("You are old enough to vote!");
    } else {
        console.log("Sorry, vote? no, may be old enough to date? 😉");
    }
}

isAllowedToVote();

In this code:

We ask the user for their age using prompt(), which returns a string.
We convert that string to a number using Number().
We check if the conversion resulted in a valid number using isNaN().
Depending on the number, we display the appropriate message. "Simple hai boss"

Summary and Key Takeaways

String Conversion happens when you need text from a value. You can use String(value) to do this explicitly.
Numeric Conversion happens in math operations or when you need a number from a string. Use Number(value) to convert explicitly.
Boolean Conversion is about checking if something is true or false. Use Boolean(value) to convert explicitly.

Remember, JavaScript often handles conversions for you, but knowing how and when to do it yourself gives you more control over your code. And as you keep coding, you’ll find that understanding type conversions is like having a superpower—it helps you make your apps smarter, faster, and more reliable. But with great power comes great responsibilities - even Superman had to learn to control his abilities!

So next time you’re building something, whether it’s a game, a website, or just a cool little project, you’ll know exactly how to get your data talking in the right language! And if you get blocked, I am here to help you, Learn with LearnYard!

Building Blocks in JS