WEBVTT

1
00:00:01.200 --> 00:00:04.252
Here's a running total, starting at zero.

2
00:00:04.555 --> 00:00:09.337
Someone types five into a form field, and you add it to the total.

3
00:00:09.362 --> 00:00:10.985
You expect five.

4
00:00:11.068 --> 00:00:12.843
You get 05.

5
00:00:12.926 --> 00:00:15.803
There's no error, no warning.

6
00:00:16.003 --> 00:00:17.719
But it isn't a number.

7
00:00:17.791 --> 00:00:24.000
A form field's value is always a string, so that five is the string five.

8
00:00:24.374 --> 00:00:33.010
In many languages such as Python, if we then add a number to this string, it would stop the program with a type error.

9
00:00:33.221 --> 00:00:37.201
JavaScript converts one of them and tries to add them.

10
00:00:37.412 --> 00:00:44.260
This is called coercion, and once you know its rules, you can predict what it will do.

11
00:00:44.960 --> 00:00:52.806
If you need to know the type of something, you can use the typeof operator, which returns a value's type as a string.

12
00:00:53.110 --> 00:00:55.848
typeof total says number.

13
00:00:56.059 --> 00:00:59.935
typeof input says string, and there's our problem.

14
00:01:00.135 --> 00:01:08.098
It knows strings, numbers, booleans, undefined, big integers, symbols, objects and functions.

15
00:01:08.204 --> 00:01:13.450
Two answers look wrong: null and arrays both report object.

16
00:01:13.545 --> 00:01:19.800
So to test for those, use triple equals null and Array.isArray.

17
00:01:20.501 --> 00:01:22.310
The plus is tricky, though.

18
00:01:22.510 --> 00:01:29.334
In JavaScript, it is an overloaded operator and serves as both addition and string concatenation.

19
00:01:29.534 --> 00:01:34.268
To decide, it first turns the operands into their primitive values.

20
00:01:34.294 --> 00:01:39.423
Then it asks one question: is either side a string?

21
00:01:39.623 --> 00:01:43.650
If so, it converts both to strings and concatenates them.

22
00:01:43.803 --> 00:01:47.330
So zero plus the string five is 05.

23
00:01:47.378 --> 00:01:53.193
If neither side is a string, it adds them as numbers, even when neither one is a number.

24
00:01:53.346 --> 00:01:55.526
True plus true is two.

25
00:01:55.679 --> 00:01:58.173
Null plus one is one.

26
00:01:58.374 --> 00:02:01.426
Plus runs left to right, so order counts.

27
00:02:01.520 --> 00:02:08.043
One plus two plus the string three adds first and then joins, giving 33.

28
00:02:08.208 --> 00:02:14.371
The string one plus two plus three joins twice, giving us the string 123.

29
00:02:15.071 --> 00:02:17.530
Only plus is overloaded.

30
00:02:17.811 --> 00:02:23.115
Minus, times, divide and remainder convert to numbers.

31
00:02:23.244 --> 00:02:31.161
So the same two values give the string 05 with plus and negative five with minus.

32
00:02:31.360 --> 00:02:40.391
So true becomes one, false becomes zero, and a string with just a number in it becomes that number.

33
00:02:41.091 --> 00:02:45.524
So always make sure you convert, and do so on purpose.

34
00:02:45.828 --> 00:02:51.004
Wrap the field's value in Number, and the total is five.

35
00:02:51.204 --> 00:02:54.186
Number takes the whole string or gives up.

36
00:02:54.327 --> 00:03:01.523
The string 12px can't convert, so it becomes NaN, short for Not a Number.

37
00:03:01.665 --> 00:03:07.108
It has its own oddities, and the Types and Coercion page covers them.

38
00:03:07.308 --> 00:03:12.705
parseInt and parseFloat read as far as they can, and stop.

39
00:03:12.916 --> 00:03:23.792
The parseInt function gives you twelve from that same string, while parseFloat gives you three point one four from a number with letters after it.

40
00:03:24.096 --> 00:03:28.030
Pass parseInt a base of ten, unless you mean another base.

41
00:03:28.206 --> 00:03:31.989
Number and parseInt also differ on a blank field.

42
00:03:32.351 --> 00:03:42.113
Number turns an empty string into zero, and parseInt gives you NaN, so decide what a blank field means in your program.

43
00:03:42.313 --> 00:03:46.827
Going the other way, use String or the toString method.

44
00:03:47.038 --> 00:03:50.113
Both turn five into the string five.

45
00:03:50.196 --> 00:03:52.296
The difference shows up with null.

46
00:03:52.507 --> 00:03:58.914
String gives you the string null, and toString throws an error, because null has no methods.

47
00:03:59.613 --> 00:04:05.613
You'll also see short conversions that lean on what operators do to their operands.

48
00:04:05.673 --> 00:04:12.591
A plus sign in front of a value makes it a number, and so does subtracting zero.

49
00:04:12.953 --> 00:04:16.202
Adding an empty string makes a string.

50
00:04:16.564 --> 00:04:22.901
Two exclamation points make a boolean, and two tildes chop a number down to an integer.

51
00:04:23.101 --> 00:04:25.793
Even the plus plus operator converts.

52
00:04:25.818 --> 00:04:32.132
Put it after a variable holding the string five, and that variable now holds the number six.

53
00:04:32.332 --> 00:04:37.346
People write these because they're short, and minified code is full of them.

54
00:04:37.487 --> 00:04:43.766
A minifier will write not zero for true, because it saves two characters.

55
00:04:43.977 --> 00:04:48.422
That's fine, because no one is meant to read minified code.

56
00:04:48.621 --> 00:04:50.512
Don't write these yourself.

57
00:04:50.815 --> 00:04:56.003
They hide the conversion from the next reader, and they don't always match the long form.

58
00:04:56.400 --> 00:05:00.984
A plus sign throws an error on a BigInt, where Number works.

59
00:05:01.125 --> 00:05:04.200
Write the long form for readability.

60
00:05:04.900 --> 00:05:14.511
Conversion to a boolean is the easiest to describe, and it happens whenever you use a value where a boolean is expected, like in an if statement.

61
00:05:14.710 --> 00:05:24.484
Only these values are falsy: false, zero in any form, NaN, the empty string, null and undefined.

62
00:05:24.567 --> 00:05:26.724
Everything else is truthy.

63
00:05:26.866 --> 00:05:31.299
So yes, the string false is actually true.

64
00:05:31.499 --> 00:05:34.539
Boolean conversions can really trip people up.

65
00:05:34.622 --> 00:05:41.551
A string with spaces, an empty array or an empty object will all be true.

66
00:05:42.252 --> 00:05:46.070
Careful, these don't work the way you might believe.

67
00:05:46.362 --> 00:05:51.062
Five && ten should be true, and this is only somewhat true.

68
00:05:51.261 --> 00:05:59.827
The result is ten, and if that is used in an if statement, that ten becomes true and the condition works as you'd hope.

69
00:05:59.968 --> 00:06:06.979
However, things get a little interesting when you look closer, because these operators return one of their values.

70
00:06:07.062 --> 00:06:14.282
The and operator returns the first falsy value it encounters, or the final value if all are truthy.

71
00:06:14.586 --> 00:06:22.212
The or operator returns the first truthy value, or the last value if all are falsy.

72
00:06:22.411 --> 00:06:25.313
All this will be fine in an if statement.

73
00:06:25.313 --> 00:06:27.438
It gets tricky in an assignment.

74
00:06:27.438 --> 00:06:34.925
A count of zero, || ten, gives ten, because zero is falsy, and your real zero is gone.

75
00:06:35.019 --> 00:06:43.423
The newer operator, ??, only falls back on null or undefined, so it keeps the zero.

76
00:06:44.123 --> 00:06:48.939
Double equals follows a list of rules that convert until the types match.

77
00:06:49.150 --> 00:06:52.550
Watch an empty array compared with false.

78
00:06:52.750 --> 00:06:56.974
A boolean becomes a number, so false becomes zero.

79
00:06:57.115 --> 00:07:01.908
An object becomes a primitive, so the array becomes an empty string.

80
00:07:02.305 --> 00:07:07.864
A string compared with a number becomes a number, so the empty string becomes zero.

81
00:07:08.168 --> 00:07:12.694
Zero equals zero, and the result is true.

82
00:07:12.894 --> 00:07:18.767
Yet an empty array is truthy, so an if statement on that same array runs.

83
00:07:18.978 --> 00:07:22.101
Double equals never asks about truthiness.

84
00:07:22.101 --> 00:07:24.955
It has its own rules, and there are exceptions.

85
00:07:25.166 --> 00:07:32.188
Null only equals null and undefined, so null double equals zero is false.

86
00:07:32.888 --> 00:07:38.633
All this might seem odd, but JavaScript is permissive to help make things work.

87
00:07:38.925 --> 00:07:43.161
Sometimes the coercion helps, and sometimes it hurts.

88
00:07:43.244 --> 00:07:57.941
Not knowing this and getting stung with unexpected input is why many people assume JavaScript was made by crazy people, as opposed to considering they should have spent some time figuring things out.

89
00:07:58.141 --> 00:08:04.072
Triple equals skips conversion, so two different types are never equal.

90
00:08:04.376 --> 00:08:15.345
To be safe, use triple equals, and when dealing with conversion, try to be explicit so future readers of the code will understand.

91
00:08:15.545 --> 00:08:21.278
But other people's code may not follow our advice, and you need to be able to read it.

92
00:08:21.582 --> 00:08:28.860
Remember the Prof's law of weird stuff, and focus on what's odd compared with languages you know.

93
00:08:29.164 --> 00:08:35.304
Then open the Type Explorer, pick any two values, and watch each step.