1
00:00:00,670 --> 00:00:05,582
Earlier you learned about the unexpected
behavior caused by treating strings like

2
00:00:05,582 --> 00:00:06,644
numeric values.

3
00:00:06,644 --> 00:00:10,346
And that if you're dealing with input
that is supposed to be a number,

4
00:00:10,346 --> 00:00:14,743
it's best to convert strings that contain
numeric characters into real numbers or

5
00:00:14,743 --> 00:00:16,590
numeric data types.

6
00:00:16,590 --> 00:00:20,720
JavaScript provides a few ways
to convert strings to numbers.

7
00:00:20,720 --> 00:00:26,210
One way is with the parseInt method,
which converts a string to an integer.

8
00:00:26,210 --> 00:00:31,990
An integer is a whole number without a
decimal point, like 1, 5, or negative 233.

9
00:00:31,990 --> 00:00:36,140
You provide the parseInt method a string
and it returns an integer value.

10
00:00:36,140 --> 00:00:39,230
This is a good way to solve
the problem with my program.

11
00:00:39,230 --> 00:00:44,821
So first, I'll test it in the console

12
00:00:44,821 --> 00:00:50,590
with typeof parseInt, HTMLBadges and

13
00:00:50,590 --> 00:00:54,974
typeof parseInt CSSBadges.

14
00:00:59,370 --> 00:01:03,200
Notice how this time,
typeof HTMLBadges returns number and

15
00:01:03,200 --> 00:01:05,950
typeof CSS badges also returns number.

16
00:01:05,950 --> 00:01:06,790
Good.

17
00:01:06,790 --> 00:01:13,146
So now I'll change the value of
the total badges variable to

18
00:01:13,146 --> 00:01:18,621
parseInt HTMLBadges,
plus parseInt CSSBadges.

19
00:01:20,785 --> 00:01:21,976
Let's see how this works now.

20
00:01:24,006 --> 00:01:29,540
I'll enter 10 HTML badges,
and 5 CSS badges.

21
00:01:29,540 --> 00:01:31,790
Great, and now I get 15 total badges.

22
00:01:33,320 --> 00:01:36,340
There's a similar method for
numbers that have decimal points.

23
00:01:36,340 --> 00:01:37,720
It's called parseFloat.

24
00:01:37,720 --> 00:01:41,080
It also gets a string value and
returns a floating point value.

25
00:01:42,150 --> 00:01:46,850
Let me comment out these three lines so
that they don't run in the browser.

26
00:01:46,850 --> 00:01:52,859
Now I'll declare a new
variable named pi and

27
00:01:52,859 --> 00:01:55,950
log it to the console.

28
00:01:55,950 --> 00:02:01,612
The quote marks around 3.14 means that
the value stored in pi is a string.

29
00:02:01,612 --> 00:02:07,445
For example, adding the type of
operator in front of pi returns string.

30
00:02:10,292 --> 00:02:14,858
This time,
I'll use the parseFloat method and

31
00:02:14,858 --> 00:02:18,864
provide it the string value stored in pi.

32
00:02:18,864 --> 00:02:22,610
Checking the console,
notice how type of pi returns number.

33
00:02:22,610 --> 00:02:24,720
That means it's a number now.

34
00:02:24,720 --> 00:02:29,072
As you can see, the typeof operator is
really handy and developers use it all

35
00:02:29,072 --> 00:02:33,700
the time to check a variable's type and
ensure that it's the correct data type.

36
00:02:34,750 --> 00:02:36,640
You can even use the parseInt and

37
00:02:36,640 --> 00:02:41,471
parseFloat methods on numbers that include
letters and non numeric characters.

38
00:02:41,471 --> 00:02:48,115
For example, I'll pass parseFloat
the string 1.89 light years away.

39
00:02:50,764 --> 00:02:54,441
If your string starts with a number
followed by other characters,

40
00:02:54,441 --> 00:02:57,030
parseFloat returns the number only.

41
00:02:57,030 --> 00:03:02,580
Notice how it returns just the number part
at the very beginning of the string, 1.89.

42
00:03:02,580 --> 00:03:06,440
However, if the string begins with
letters, you get a strange value.

43
00:03:07,440 --> 00:03:10,940
This time, I'll use parseInt,

44
00:03:10,940 --> 00:03:15,690
and pass it the string, that is so 2008.

45
00:03:15,690 --> 00:03:19,618
And the console, we see NaN.

46
00:03:19,618 --> 00:03:22,350
NaN stands for not a number.

47
00:03:22,350 --> 00:03:25,370
And it's JavaScript's way of saying
that it can't find a number,

48
00:03:25,370 --> 00:03:27,590
at least at the beginning of the string.

49
00:03:27,590 --> 00:03:30,680
NaN usually represents an error,
for example,

50
00:03:30,680 --> 00:03:33,950
a result of an incorrect
mathematical operation.

51
00:03:33,950 --> 00:03:37,760
You'll get a variety of different
return values from the parseInt and

52
00:03:37,760 --> 00:03:39,140
parseFloat methods.

53
00:03:39,140 --> 00:03:44,760
For example, if you provide the parseInt
method a string that's a decimal

54
00:03:44,760 --> 00:03:50,290
number like 202.99,
you only get the 202 part back,

55
00:03:50,290 --> 00:03:54,640
because parseInt only returns
a whole number or an integer.

56
00:03:54,640 --> 00:03:57,000
You can see more examples of parseInt and

57
00:03:57,000 --> 00:03:59,790
parseFloat return values in
the teacher's notes with this video.

58
00:04:01,000 --> 00:04:04,410
There are other ways to convert
a string to a number in JavaScript.

59
00:04:04,410 --> 00:04:08,110
For example, in a previous course,
you learned to use the unary plus

60
00:04:08,110 --> 00:04:11,160
operator as a quick way of
converting a string to a number.

61
00:04:11,160 --> 00:04:14,080
You place a plus symbol just
before the variable name or

62
00:04:14,080 --> 00:04:16,170
string that you wanna convert.

63
00:04:16,170 --> 00:04:20,840
Back in my JavaScript file,
I'll uncomment these three statements.

64
00:04:20,840 --> 00:04:27,898
And change the value of the totalBadges
variable to plus HTMLBadges,

65
00:04:27,898 --> 00:04:34,128
followed by the addition operator,
then, plus CSSBadges.

66
00:04:34,128 --> 00:04:37,062
And console.log, totalBadges.

67
00:04:41,126 --> 00:04:46,032
The unary plus operator attempts to
convert the value to a number if it isn't

68
00:04:46,032 --> 00:04:46,730
already.

69
00:04:48,050 --> 00:04:52,620
Back in the browser,
when I enter 10 HTML badges and

70
00:04:52,620 --> 00:04:57,630
15 CSS badges,
the console prints 25 total badges.

71
00:04:57,630 --> 00:05:01,460
Keep in mind that the unary plus
operator works with both integers and

72
00:05:01,460 --> 00:05:03,400
floating point numbers.

73
00:05:03,400 --> 00:05:09,307
Let's try placing the plus just before

74
00:05:09,307 --> 00:05:14,861
the pi variable with typeof plus pi.

75
00:05:14,861 --> 00:05:18,401
The console lets me know
that pi is now a number.

76
00:05:18,401 --> 00:05:23,503
Because the syntax is so brief, the unary
plus is becoming one of the fastest and

77
00:05:23,503 --> 00:05:26,950
preferred ways of converting
a string into a number.

78
00:05:26,950 --> 00:05:31,820
However, many developers often prefer
code readability over brevity.

79
00:05:31,820 --> 00:05:34,900
So it's still really common
to use the parseInt and

80
00:05:34,900 --> 00:05:38,520
parseFloat methods, because they
clearly explain their purpose.

81
00:05:38,520 --> 00:05:40,638
The approach you use is up to you.

82
00:05:40,638 --> 00:05:45,630
Also, parseInt, parseFloat, and the unary
plus operator can help you when making

83
00:05:45,630 --> 00:05:48,690
making comparisons and
working with conditional statements.

84
00:05:48,690 --> 00:05:53,678
For example,
within console.log, I'll write

85
00:05:53,678 --> 00:05:58,672
the comparison pi is
strictly equal to 3.14.

86
00:06:00,780 --> 00:06:04,700
And I'll display a prompt

87
00:06:04,700 --> 00:06:09,696
dialogue that asks, what is pi?

88
00:06:09,696 --> 00:06:15,080
Remember, if you compare a number
value with a string using the triple

89
00:06:15,080 --> 00:06:20,918
equal sign or strict equality operator,
it will always evaluate to false,

90
00:06:20,918 --> 00:06:24,860
because you're comparing
a number with a string.

91
00:06:28,990 --> 00:06:34,955
In this case, converting the string
stored in pi to a number returns true.

92
00:06:36,922 --> 00:06:40,680
Since you'll work with strings frequently,
especially when collecting input from

93
00:06:40,680 --> 00:06:45,150
a user, you will need to be careful when
dealing with strings that contain numbers.

94
00:06:45,150 --> 00:06:49,900
Remember, to do math using input values,
always convert the string to an integer or

95
00:06:49,900 --> 00:06:51,930
float using the methods you just learned.