Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll
Preview
Start a free Courses trial
to watch this video
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