# Zero + Five is 05? — narration script Runtime 8:40. Timecodes are when each chapter starts; the film's animation is keyed to these cue times, so a recorded voice-over should keep each line near its timecode. ## 0:00 · What goes in a form field - `0:01` Here's a running total, starting at zero. Someone types five into a form field, and you add it to the total. You expect five. You get 05. There's no error, no warning. - `0:16` But it isn't a number. A form field's value is always a string, so that five is the string five. In many languages such as Python, if we then add a number to this string, it would stop the program with a type error. JavaScript converts one of them and tries to add them. This is called coercion, and once you know its rules, you can predict what it will do. ## 0:44 · Ask what it holds - `0:44` If you need to know the type of something, you can use the typeof operator, which returns a value's type as a string. typeof total says number. typeof input says string, and there's our problem. - `1:00` It knows strings, numbers, booleans, undefined, big integers, symbols, objects and functions. Two answers look wrong: null and arrays both report object. So to test for those, use triple equals null and Array.isArray. ## 1:20 · The plus operator has two jobs - `1:20` The plus is tricky, though. In JavaScript, it is an overloaded operator and serves as both addition and string concatenation. To decide, it first turns the operands into their primitive values. Then it asks one question: is either side a string? - `1:39` If so, it converts both to strings and concatenates them. So zero plus the string five is 05. If neither side is a string, it adds them as numbers, even when neither one is a number. True plus true is two. Null plus one is one. - `1:58` Plus runs left to right, so order counts. One plus two plus the string three adds first and then joins, giving 33. The string one plus two plus three joins twice, giving us the string 123. ## 2:14 · Every other arithmetic operator wants numbers - `2:15` Only plus is overloaded. Minus, times, divide and remainder convert to numbers. So the same two values give the string 05 with plus and negative five with minus. - `2:31` So true becomes one, false becomes zero, and a string with just a number in it becomes that number. ## 2:40 · Convert on purpose - `2:41` So always make sure you convert, and do so on purpose. Wrap the field's value in Number, and the total is five. - `2:51` Number takes the whole string or gives up. The string 12px can't convert, so it becomes NaN, short for Not a Number. It has its own oddities, and the Types and Coercion page covers them. - `3:07` parseInt and parseFloat read as far as they can, and stop. 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. Pass parseInt a base of ten, unless you mean another base. Number and parseInt also differ on a blank field. Number turns an empty string into zero, and parseInt gives you NaN, so decide what a blank field means in your program. - `3:42` Going the other way, use String or the toString method. Both turn five into the string five. The difference shows up with null. String gives you the string null, and toString throws an error, because null has no methods. ## 3:59 · Tricks you shouldn't write - `3:59` You'll also see short conversions that lean on what operators do to their operands. A plus sign in front of a value makes it a number, and so does subtracting zero. Adding an empty string makes a string. Two exclamation points make a boolean, and two tildes chop a number down to an integer. - `4:23` Even the plus plus operator converts. Put it after a variable holding the string five, and that variable now holds the number six. - `4:32` People write these because they're short, and minified code is full of them. A minifier will write not zero for true, because it saves two characters. That's fine, because no one is meant to read minified code. - `4:48` Don't write these yourself. They hide the conversion from the next reader, and they don't always match the long form. A plus sign throws an error on a BigInt, where Number works. Write the long form for readability. ## 5:04 · Truthy and falsy - `5:04` 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. Only these values are falsy: false, zero in any form, NaN, the empty string, null and undefined. Everything else is truthy. So yes, the string false is actually true. - `5:31` Boolean conversions can really trip people up. A string with spaces, an empty array or an empty object will all be true. ## 5:41 · And and or return a value - `5:42` Careful, these don't work the way you might believe. Five && ten should be true, and this is only somewhat true. 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. However, things get a little interesting when you look closer, because these operators return one of their values. The and operator returns the first falsy value it encounters, or the final value if all are truthy. The or operator returns the first truthy value, or the last value if all are falsy. - `6:22` All this will be fine in an if statement. It gets tricky in an assignment. A count of zero, || ten, gives ten, because zero is falsy, and your real zero is gone. The newer operator, ??, only falls back on null or undefined, so it keeps the zero. ## 6:43 · Double equals follows a list - `6:44` Double equals follows a list of rules that convert until the types match. Watch an empty array compared with false. - `6:52` A boolean becomes a number, so false becomes zero. An object becomes a primitive, so the array becomes an empty string. A string compared with a number becomes a number, so the empty string becomes zero. Zero equals zero, and the result is true. - `7:12` Yet an empty array is truthy, so an if statement on that same array runs. Double equals never asks about truthiness. It has its own rules, and there are exceptions. Null only equals null and undefined, so null double equals zero is false. ## 7:32 · Know the rules, then choose - `7:32` All this might seem odd, but JavaScript is permissive to help make things work. Sometimes the coercion helps, and sometimes it hurts. 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. - `7:58` Triple equals skips conversion, so two different types are never equal. To be safe, use triple equals, and when dealing with conversion, try to be explicit so future readers of the code will understand. - `8:15` But other people's code may not follow our advice, and you need to be able to read it. Remember the Prof's law of weird stuff, and focus on what's odd compared with languages you know. Then open the Type Explorer, pick any two values, and watch each step.