Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll
Well done!
You have completed JavaScript Numbers!
You have completed JavaScript Numbers!
Preview
Learn how treating strings like numbers can lead to unexpected behavior.
Resources
Related Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign upRelated Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign up
As you've experienced,
0:00
much of the information you'll work
with in JavaScript will be strings.
0:01
For example, the prompt command you used
in a previous course returns a string.
0:05
That is, whatever the user types
into the prompt dialog box.
0:09
Even if you ask for users' age and
they type the number 32,
0:12
JavaScript still treats
it as a string of text.
0:16
It returns a string
with two numbers in it.
0:19
This is also true when
working with web forms.
0:22
Say you had a text field in a form
that asked someone to type the number
0:24
of times they've been to
the movies this year.
0:27
If they type 1, 10, 100 or 200,
0:30
JavaScript will still treat the value
inside that text field as a string value.
0:33
So let me show you how treating strings
like numbers can lead to weird and
0:37
unexpected behavior.
0:41
Now open the string-to-number.js file
inside your js folder and make sure to
0:43
update the script tag in index.html so
that it points to string-to-number.js.
0:49
The file contains two variables that
retrieve input from a user via the prompt
0:57
method.
1:01
The first statement asks how many
HTML badges do you have, and
1:02
stores the result in
a variable name HTMLBadges.
1:06
The second statement asks for
the number of CSS badges and
1:09
stores the result in
the variable CSSBadges.
1:12
So now I'll do a little
math to determine the total
1:16
number of badges with const
totalBadges = HTMLBadges + CSSBadges.
1:21
This adds the two values together to get
the total number of badges, or does it?
1:29
I'll use the console.log() method to
display the value of total badges in
1:35
the JavaScript console.
1:39
In the browser, I'll type 10 for
1:42
HTML badges and 5 for CSS badges.
1:46
10 plus 5 is 15, right?
1:50
Well, the console shows that I have
105 badges, that's a lot of badges.
1:52
So what exactly is going on here?
1:57
Well, remember, the prompt method
returns what the user types as a string.
2:00
And when working with strings,
the + operator combines or
2:05
concatenate the strings.
2:09
In other words,
it just combines the strings together.
2:11
So if we had one string with 10, and
2:16
another string with 5 and
added them together, the result is not 15.
2:20
Instead, we get the two strings combined,
105.
2:25
To avoid this problem, it's a good
idea to convert strings that contain
2:29
numeric characters into real numbers or
numeric data types.
2:33
This means if you receive input that is
supposed to be a number from a form or
2:37
a prompt dialog box,
you should convert the string to a number.
2:42
Before we do that, though, JavaScript
has a special operator you can use
2:46
to verify the type of a variable in
your code or any JavaScript expression.
2:50
It's called typeof and you place it
just before the variable name or
2:55
value you want to evaluate.
2:58
For example, I'll use console.log to print
3:00
the typeof HTMLBadges and
the typeof CSSBadges.
3:06
In the browser I'll again type 10 and 5.
3:12
And notice how, in the console,
typeof HTMLBadges returns string,
3:19
and typeof CSSBadges also returns string.
3:24
So how do we convert them to numbers?
3:27
I'll teach you how in the next video.
3:30
You need to sign up for Treehouse in order to download course files.
Sign upYou need to sign up for Treehouse in order to set up Workspace
Sign up