Do You Know What Type Casting Is?

Hello HaWkers! Jeff Bruchado here.

This is another article in our series that will cover our journey to Learn Programming from Scratch.

Today will be a slightly shorter article than usual, but it's still about extremely important content to proceed with your learning.

So please! If you don't have mastery over what I'll talk about today, read to the end!

Well, without further ado, let's get started!

Today, we're going to talk about a super interesting and essential topic: Type Casting in JavaScript.

Type Casting, or Type Coercion, is a crucial concept in JavaScript, mainly because it's a dynamically typed language.

But what does this mean in practice? Let's understand.

Imagine that, at times, we need to convert one data type to another.

For example, transforming a string into a number, or vice versa. This is where Type Casting comes in.

There are two main types of Type Casting in JavaScript: Explicitly or Implicitly.

• Explicitly, using type conversion functions;
• Implicitly, using type conversion operators.

Explicitly

We have different functions we can use to make explicit type conversions, and the most used are the following:

• String(x): converts the value of x to a string.
• Number(x): converts the value of x to a number.
• Boolean(x): converts the value of x to a boolean.

Below I'll show you some examples of using these functions, and I encourage you to open your console in the browser itself, and run some tests by writing some lines of code.

Always remember that it's practice that will really transform you into a Programmer.

Just consuming theoretical content won't make you learn and retain knowledge to use in different ways.

So don't miss the chance to get your hands dirty.

Examples of using these mentioned functions above:

let x = 42;
let y = '42';
console.log(String(x)); // '42'
console.log(Number(y)); // 42
console.log(Boolean(x)); // true
console.log(Boolean(y)); // true

Implicitly

The main implicit type conversion operators are:

• +x: converts the value of x to a number using the same logic as the Number() operator.
• !!x: converts the value of x to a boolean using the same logic as the Boolean() operator.

I know reading like this can be a bit difficult to understand, so let's see the use of these operators with some practical examples:

let x = '42';
let y = 0;
let z;
console.log(+x); // 42
console.log(+y); // 0
console.log(+z); // NaN
console.log(!!x); // true
console.log(!!y); // false
console.log(!!z); // false

It's important to remember that, in some cases, type conversion can lead to unexpected or undesired results.

For example:

If you try to convert an empty string to a number using the + operator, the result will be 0, while if you use the Number() function, the result will be NaN.

Therefore, it's always important to be careful when doing type casting, it's important to always test the code to ensure it's producing the expected results.

To help you better understand these possible unexpected results, I'll show you some more practical examples:

let value1 = '10';
let value2 = 5;

let sum = Number(value1) + value2; // Here we convert value1 to number and then add
console.log(sum); // 15

let value3 = 1;
let value4 = true;

let sum2 = String(value3) + String(value4); // We convert both values to string
console.log(sum2); // '1true'

These examples show how you can control and manipulate data types in JavaScript, allowing you to write more robust, versatile, and more maintainable code.

Conclusion

Well HaWker, I hope this article has illuminated your mind with knowledge of Type Casting in JavaScript.

This is a slightly shorter article than the previous ones, but it's an extremely important article.

As always, if you have any questions or want to explore any point further, just reply with your question to this email.

And remember, I'm here to help you every step of the way!

Awesome HaWker! 👏🏻

We've reached the end of another article. 😮‍💨

And if you made it this far, as usual, please reply to this email with "I understood and mastered Type Casting".

This way I'll know that this article series is being useful for you, and that you're following along and taking advantage.

You already know! Only a true HaWker makes it to the end.

Congratulations!

I'm happy to have you here.

See you soon, let's go! 🦅

- Jeff Bruchado

Congratulations on making it this far, HaWker! 🎉

Now that you've learned about the concept of Type Casting in JavaScript, how about testing your knowledge? Take the quiz below and see how much you absorbed from our article.

It's a great way to reinforce learning and prepare for the next steps in your programming journey.

Click to access the quiz.

Good luck and have fun!