loader

Changing Data Types in JavaScript Made Easy

Changing Data Types in JavaScript Made Easy

Introduction:

JavaScript uses different types to organize and handle data. Each type has its own set of values and actions you can do with it.

Sometimes JavaScript will automatically change values to match the type it needs, but it’s usually better to change them yourself to make sure things work as you expect.

This guide will show you how to change JavaScript’s basic types, like numbers, words and true/false values.

Automatic Type Conversion in JavaScript

In JavaScript, when you give it something it didn’t expect, like a number instead of a word, it tries to make sense of it instead of just saying ‘no.’ This is called ‘type coercion.’ So basically, JavaScript tries to understand and work with what you give it, even if it’s not exactly what it wanted.

Some actions in JavaScript can change things for you automatically. For example, the alert() method is used to show messages on the screen. It expects a word (technically called a ‘string’) to be shown. But if you give it a number instead, JavaScript will change that number into a word so it can show it in the message

alert(8.5);
Copy

When you run that line of code, your web browser will show a pop-up with the number 8.5. But here’s the trick: JavaScript turns that number into a word (technically called a ‘string’) to show it.

Now, if you use words that could be numbers, like ‘8.5’, and do math with them, JavaScript can figure it out. It quietly changes those words into real numbers, so you can do calculations with them.

// Subtraction
"15" - "10";
Copy
Output
5
Copy
// Modulo
"15" % "10";
Copy
Output
5
Copy

But not every math symbol works the same way. Take the + symbol, for example. Sometimes it adds numbers together, and sometimes it sticks words together. That can cause some confusion.

// When working with strings, + stands for concatenation
"2" + "3";

Copy
Output
"23"

Copy

Because the + sign does different jobs, when you try to add the numbers ‘2’ and ‘3’ together, JavaScript thinks you’re sticking words together instead of adding. So, instead of getting 5, you’ll see ’23’.

Since things can get confusing, it’s a good idea to be clear about what you want. By telling JavaScript exactly what type of data you’re using, you can avoid surprises and deal with mistakes better. This is especially handy when you’re getting information from users or trying to fix errors.

Transforming Data into Text: Converting Values to Strings

You can change things into words by using either String() or n.toString().

Let’s try the String() way. We’ll turn the word ‘true’ into a sentence by putting it inside the parentheses of String().

String(true);
Copy

When we try this, we’ll get the word “true” back as a result.

Output
"true"
Copy

Instead, we can also give a number to the function.

String(49);
Copy

You’ll get the number written out as a word.

Output
"49"

Copy

Next, we’ll try using the String() function with a variable. We’ll give a number to a variable called ‘odyssey’ and then check what type it is using the typeof operator.

let odyssey = 2001;
console.log(typeof odyssey);
Copy
Output
number
Copy

Now, our variable “odyssey” has the number 2001 assigned to it, which we know is a number.

Next, we’ll change “odyssey” to have the same value but written as a word instead of a number. Then, we’ll check using typeof to make sure it’s now a word, not a number.

odyssey = String(odyssey);	// "2001"
console.log(typeof odyssey);

Copy
Output
string

Copy

In the previous example, we checked that “odyssey” turned into a word after we changed its type.

We can do something like this with n.toString() too. Just put your variable instead of ‘n’.

let blows = 400;
blows.toString();

Copy

The word ‘blows’ will turn into a string.

Output
"400"
Copy

Another way is to put a value inside parentheses instead of a variable when using n.toString().

(1776).toString();			// returns "1776"
(false).toString();			// returns "false"
(100 + 200).toString();	  	       // returns "300"
Copy

When we use String() or n.toString(), we can change Boolean or number values into words on purpose. This helps make sure our code does what we expect it to do.

Transforming Data into Numbers: Converting Values to Numeric Format

When we want to change something into a number, we’ll use the Number() method. Mostly, we’ll be changing words that look like numbers into actual numbers, but we can also change true/false words into numbers.

Let’s try giving a number word to the Number() method:

Number("1984");
Copy

The word will turn into a number, and it won’t have quotation marks around it anymore.

Output
1984

Copy

You can also put a word into a box called a variable and then change it into a number.

let dalmatians = "101";
Number(dalmatians);

Copy
Output
101
Copy

The word “101” turned into the number 101 when we used its box called a variable.

If you have empty space words or no words at all, they’ll turn into the number 0.

Number(" ");	         // returns 0
Number("");		// returns 0
Copy

Just so you know, if you try to change words that aren’t numbers, they’ll turn into something called “NaN,” which means “Not a Number.” This includes if you have numbers with spaces in between them.

Number("twelve");	// returns NaN
Number("20,000");	// returns NaN
Number("2 3");		// returns NaN
Number("11-11-11");	// returns NaN
Copy

When you have true or false words, true turns into the number 1, and false turns into the number 0.

Number(false);		// returns 0
Number(true);		// returns 1

Copy

The Numeric() action turns other kinds of stuff into numbers.

Understanding Boolean Conversion

When we want to check if something has a value or not, we can use a method called Boolean(). This is helpful, for instance, if we want to see if someone typed something into a text box.

If we use Boolean() on something like the number 0, an empty space, or if there’s nothing there at all, it will become ‘false’. It’s like asking a question: ‘Does this have something?’ If the answer is ‘no’, it becomes ‘false’.

Boolean(0);		// returns false
Boolean("");		// returns false
Boolean(undefined);	// returns false
Boolean(NaN);		// returns false
Boolean(null);		// returns false
Copy

Other things, like words or numbers that aren’t empty, will become ‘true’. Even if it’s just spaces in a sentence, it will still be considered ‘true’. It’s like asking, ‘Is there something here?’ If the answer is ‘yes’, it becomes ‘true’.

Boolean(2000);		// returns true
Boolean(" ");		// returns true
Boolean("Maniacs");	// returns true
Copy

Remember, even if we have a string that looks like a number, like “0”, it will still become ‘true’. That’s because it’s not an empty string – it has something in it. So, if there’s anything there, it will be ‘true’.

Boolean("0");	// returns true
Copy

Changing numbers and words into ‘true’ or ‘false’ can help us understand information in a simple way. We can use this in our programs to make decisions easier. It’s like putting things into boxes labeled ‘yes’ or ‘no’.

Conclusion:

In this tutorial, we learned how JavaScript changes its basic types of information. Sometimes, JavaScript automatically changes types to make things work, but it’s a good idea to change them yourself to be sure everything runs smoothly in your programs. Remember, it’s like double-checking your work to make sure it’s right. 

Want to try it yourself? Practice what you’ve learned by writing some simple JavaScript code!

image

A cloud for entire journey

Bring your team together. No contracts, no commitments.

image

Copyright ©2023 Design & Developed by Cloudtopiaa