# Type Coercion and Its Effects

Salesforce Certified JavaScript Developer I · lesson 3

Six rules decide almost every coercion question.

Video: https://www.youtube.com/watch?v=SDo3AXP98Nk
Page: https://shipitcertified.com/learn/salesforce-javascript-developer/type-coercion-and-its-effects/
Free slide PDF (free account): https://shipitcertified.com/learn/salesforce-javascript-developer/type-coercion-and-its-effects/

## Chapters

- 0:00 [Type Coercion and Its Effects](https://www.youtube.com/watch?v=SDo3AXP98Nk)
- 0:33 [Quick recap: three values, three rules](https://www.youtube.com/watch?v=SDo3AXP98Nk&t=33s)
- 1:08 [Six rules decide almost every coercion question](https://www.youtube.com/watch?v=SDo3AXP98Nk&t=68s)
- 1:56 [One table holds the whole lesson](https://www.youtube.com/watch?v=SDo3AXP98Nk&t=116s)
- 3:03 [Coercion happens to you; conversion you can ask for](https://www.youtube.com/watch?v=SDo3AXP98Nk&t=183s)
- 4:01 [Binary + concatenates when either side is a string](https://www.youtube.com/watch?v=SDo3AXP98Nk&t=241s)
- 5:03 [Form input is a string, so + joins it](https://www.youtube.com/watch?v=SDo3AXP98Nk&t=303s)
- 5:47 [Every other math operator converts to numbers](https://www.youtube.com/watch?v=SDo3AXP98Nk&t=347s)
- 6:34 [Number() converts by a short list of rules](https://www.youtube.com/watch?v=SDo3AXP98Nk&t=394s)
- 7:30 [null becomes 0; undefined becomes NaN](https://www.youtube.com/watch?v=SDo3AXP98Nk&t=450s)
- 8:06 [== converts types first; === never does](https://www.youtube.com/watch?v=SDo3AXP98Nk&t=486s)
- 8:55 [Six == results to know by heart](https://www.youtube.com/watch?v=SDo3AXP98Nk&t=535s)
- 9:49 [null equals only undefined, even under ==](https://www.youtube.com/watch?v=SDo3AXP98Nk&t=589s)
- 10:29 [An object in + becomes a primitive in a fixed order](https://www.youtube.com/watch?v=SDo3AXP98Nk&t=629s)
- 11:06 [Objects in + usually end up as text](https://www.youtube.com/watch?v=SDo3AXP98Nk&t=666s)
- 12:15 [Strings compare as text; the rest as numbers](https://www.youtube.com/watch?v=SDo3AXP98Nk&t=735s)
- 13:05 [Six comparisons, six reasons](https://www.youtube.com/watch?v=SDo3AXP98Nk&t=785s)
- 14:02 [Six terms to say in your own words](https://www.youtube.com/watch?v=SDo3AXP98Nk&t=842s)
- 14:43 [Fill in the table, then run it in Node](https://www.youtube.com/watch?v=SDo3AXP98Nk&t=883s)
- 16:23 [Eight questions, closed book](https://www.youtube.com/watch?v=SDo3AXP98Nk&t=983s)
- 17:20 [A developer runs the following code. What is logged?](https://www.youtube.com/watch?v=SDo3AXP98Nk&t=1040s)
- 18:04 [true true true false](https://www.youtube.com/watch?v=SDo3AXP98Nk&t=1084s)
- 19:04 [Four operators, four rules](https://www.youtube.com/watch?v=SDo3AXP98Nk&t=1144s)
- 19:44 [Now test it, then move to truthy and falsy](https://www.youtube.com/watch?v=SDo3AXP98Nk&t=1184s)

## Transcript

### Type Coercion and Its Effects (0:00)

Welcome to module one, lesson three: type coercion and its effects. This module is called Variables, Types, and Collections, and it carries twenty three percent of the exam. In this lesson we look at what JavaScript does when values of different types meet. It converts them for you, and the exam asks what comes out. Plus, double equals, and less than each have their own rules. By the end, you will be able to predict what JavaScript returns when types mix, and spot the trap before you run it.

### Quick recap: three values, three rules (0:33)

Before we start, a quick recap from lesson two. First, strings never change in place. Their methods return new strings, and the original stays the same. Second, Number checks the whole value, while "parse int" reads a prefix. Third, a Date counts milliseconds, and subtracting two dates gives milliseconds. And fourth, our rhythm in every lesson is rule, trace, trap, proof. Today we move from single values to mixed values: what JavaScript does when different types meet.

### Six rules decide almost every coercion question (1:08)

This domain is twenty three percent of the exam. This lesson boils down to six rules, grouped into four operator families: plus, the other math operators, double equals, and the comparison operators. First, plus prefers strings. Second, the other math operators prefer numbers. Third, the rules Number follows when it converts a value. Fourth, double equals versus triple equals. Fifth, what happens to objects inside plus. And sixth, how less than and greater than compare mixed types. Rules one, three, and four produce most of the questions, so we slow down there. We will also cover unary plus, String, Boolean, and nan comparisons.

### One table holds the whole lesson (1:56)

This is the foundations slide, and one table holds the whole lesson. Every remaining slide is one row of this table, with an example, so pause here and read each row aloud. Plus. The rule is that it concatenates if either side is a string. The trap is that the string five plus nine is the string fifty nine. The safe habit is to call Number first. Minus, times, and divide. The rule is that they always convert to numbers. The trap is that null becomes zero, and undefined becomes nan. The safe habit is to check the inputs. Double equals. The rule is that it converts different types first. The trap is that null double equals zero is false. The safe habit is to use triple equals. Less than and greater than. The rule is that two strings compare as text. The trap is that any nan gives false. The safe habit is to convert first. One practical rule to carry with you: when types mix, JavaScript converts, and when it matters, convert on purpose.

### Coercion happens to you; conversion you can ask for (3:03)

Let's start with vocabulary. Coercion happens to you, and conversion you can ask for. Look at the code. In the first block, JavaScript decides. The string five times two is ten, because JavaScript turned the string into a number on its own. That is implicit. In the second block, you decide. Number of the string five, times two, is ten. String of forty two is the string forty two. String of null is the string null. And Boolean of the string x is true. So type coercion is automatic and implicit. Type conversion can also be explicit, when you call String, Number, or Boolean yourself. Boolean gives false for zero, the empty string, null, undefined, and nan. Everything else is true. The full truthy and falsy story is lesson four. The exam point: when you call Number yourself, nothing is left to guess.

### Binary + concatenates when either side is a string (4:01)

Our first rule. Binary plus concatenates when either side is a string. Look at the code. The string one plus two is the string one two, because the two becomes text. Two plus two plus the string one is the string forty one. And the string one plus two plus two is the string one, two, two. Why the difference? Evaluation runs left to right. In the second line, two plus two happens first, and gives four. Then four plus the string one joins into forty one. In the third line, the string one plus two comes first, and gives the string one two. Then one two plus two joins into one, two, two. So if either operand is a string, the other becomes a string. Numbers before the first string still add as numbers. And after a string appears, everything else joins the text. The exam point: two plus two plus the string one is forty one, while the string one plus two plus two is one, two, two.

### Form input is a string, so + joins it (5:03)

Now a trap you will meet in real code. Form input is a string, so plus joins it. The wrong shortcut says, plus always adds numbers. The correct exam test asks, is either operand a string? Look at the code. We declare a as the string five, and b as the number nine. Console dot log of a plus b prints the string fifty nine, because a is a string. Console dot log of Number of a, plus b, prints fourteen, because we converted first. Values read from a form or a request arrive as strings, so this trap shows up in practice, not only on the exam. The practical rule: convert text to numbers with Number before you add.

### Every other math operator converts to numbers (5:47)

Rule two. Every other math operator converts to numbers. Look at the code. Six minus the string two is four. The string six divided by the string two is three. And the string three times the string four is twelve. Unary plus converts like Number. Plus true is one. Plus the empty string is zero. And unary plus on the string three, added to unary plus on the string two, is five. So minus, times, divide, remainder, and exponent always convert both sides to numbers. Only plus concatenates text. And a failed conversion gives nan. The exam point: six minus the string two is four, but the string six plus two is the string six two.

### Number() converts by a short list of rules (6:34)

Rule three. Number converts by a short list of rules. Here is the table. First, undefined. Number of undefined is nan. Second, null. Number of null is zero. A missing value silently becomes zero. Third, true. Number of true is one, and false is zero. Fourth, the empty string. Number of the empty string is zero. Fifth, a number with spaces around it, like space, forty two, space. Whitespace is trimmed, so the result is forty two. Sixth, the string four p x. It is not a valid number, so the result is nan. Anything else that cannot be read as a number gives nan. The exam point: Number of null is zero, Number of undefined is nan, Number of the empty string is zero, and Number of four p x is nan.

### null becomes 0; undefined becomes NaN (7:30)

A trap hidden in that table: null becomes zero, and undefined becomes nan. The wrong shortcut says, null and undefined behave the same. The correct exam test says, null converts to zero, and undefined converts to nan. Look at the code. Number of null is zero. Number of undefined is nan. Then null plus one is one, because null becomes zero. But undefined plus one is nan. The practical rule: a missing value silently becomes zero, or poisons the math with nan.

### == converts types first; === never does (8:06)

Rule four. Double equals converts types first, and triple equals never does. Look at the code. The string one double equals one is true, because the string becomes the number one. But the string one triple equals one is false, because the types differ. Zero double equals false is true, because false becomes zero. And zero triple equals false is false. So double equals converts differing types, then compares. Triple equals returns false for any cross type comparison. The conversion rules: a boolean becomes a number, and a string compared with a number becomes a number. And null and undefined equal only each other. The practical rule: when the types must match, use triple equals.

### Six == results to know by heart (8:55)

Here are six double equals results to know by heart. Read each row aloud, then check the reason. First, the string one double equals one is true. The string becomes the number one. Second, zero double equals false is true. False becomes zero. Third, null double equals undefined is true. They equal only each other. Fourth, null double equals zero is false. Null equals only undefined. Fifth, nan double equals nan is false. Nan equals nothing, not even itself. Sixth, the array one, two, three, double equals the string one comma two comma three, is true. The array becomes a string. The exam point: triple equals gives false for every cross type pair in this table.

### null equals only undefined, even under == (9:49)

Another trap. Null equals only undefined, even under double equals. The wrong shortcut says, null is falsy, so null double equals zero. The correct exam test says, double equals equates null only with undefined. Look at the code. Null double equals undefined is true. Null double equals zero is false. Zero double equals undefined is false. And null triple equals undefined is false, because they are different types. The exam point: null double equals undefined is true, but zero double equals null and zero double equals undefined are false.

### An object in + becomes a primitive in a fixed order (10:29)

Rule five. What happens when an object appears inside plus? Plus first turns each operand into a primitive. For an object, JavaScript follows a fixed order. First, it tries Symbol dot "to primitive", with the hint default. Then it tries "value of". And then it tries "to string". If one of those returns an object, that result is ignored, and the next method is tried. If none gives a primitive, you get a Type Error. The exam point: Date treats the default hint as string, so "to string" runs first.

### Objects in + usually end up as text (11:06)

Now see where that order leads. Objects in plus usually end up as text. Look at the code. An empty object plus an empty array is the string object Object, in square brackets. Neither has Symbol dot "to primitive", and "value of" returns the object itself, which is ignored, so "to string" is used. The empty object's "to string" gives the bracketed text, and the empty array's "to string" gives the empty string. Now a Date. New Date of zero plus one is a string, and "type of" it is string. So an empty object becomes the text object Object, and an empty array becomes the empty string. One side is now a string, so plus concatenates. A Date in plus becomes a string, never a number, because Date overrides the default hint. One more case. The string one plus two n, where two n is a "big int", is the string one two. But a "big int" plus a plain number throws a Type Error. The exam point: an empty object plus an empty array is the string object Object, and new Date of zero plus one is a string.

### Strings compare as text; the rest as numbers (12:15)

Rule six. Comparing with less than and greater than. Look at the code. The string three less than five is true. The string five less than three is false. The string a less than the string three is false. Null less than one is true. And undefined less than three is false. Here is the rule. Two strings compare as text, by U T F sixteen code units. Otherwise, both sides become numbers. True is one, and null is zero. Undefined and non numeric strings become nan, and any nan gives false. Greater than, greater than or equal, and less than or equal all use the same algorithm. The exam point: two strings compare as strings, and any nan makes the result false.

### Six comparisons, six reasons (13:05)

Six comparisons, six reasons. Say the reason before you read it. One. The string three less than five is true. The string becomes three, and three is less than five. Two. The string five less than three is false. The string becomes five, and five is not less than three. Three. The string a less than the string three is false. Both are strings, so they compare as text. Four. Null less than one is true. Null becomes zero, and zero is less than one. Five. Null less than zero is false. Null becomes zero, and zero is not less than zero. Six. Undefined less than three is false. Undefined becomes nan, and any nan gives false. The practical rule: compare numbers with numbers, and convert text first.

### Six terms to say in your own words (14:02)

Six key terms to say in your own words. Type coercion is automatic, implicit conversion between types. Explicit conversion means calling String, Number, or Boolean yourself. Unary plus is plus x, which converts x to a number. Loose equality is double equals, which coerces differing types first. Strict equality is triple equals, which never coerces. And primitive coercion is when an object becomes a primitive, through Symbol dot "to primitive", then "value of", then "to string". Pause the video now. Cover each card and explain the term aloud.

### Fill in the table, then run it in Node (14:43)

Now the proof stage, starting with a lab. Fill in the table, then run it in Node. You have six pairs of operands on screen. For each pair, predict four results: plus, minus, double equals, and less than. Write them down before checking. This is the coercion table lab from the curriculum. Take three minutes on your own, and write down your predictions before checking. Now the answers, one pair at a time. Pair one, the string five and two. Plus gives the string five two. Minus gives three. Double equals is false, and less than is false. Pair two, true and one. Plus gives two. Minus gives zero. Double equals is true, and less than is false. Pair three, null and zero. Plus gives zero, and minus gives zero. Double equals is false, because null equals only undefined. Less than is false. Pair four, the empty string and zero. Plus gives the string zero. Minus gives zero. Double equals is true, because the empty string becomes zero. Less than is false. Pair five, undefined and one. Plus gives nan, and minus gives nan. Double equals is false, and less than is false. Pair six, the string a and the string three. Plus gives the string a three. Minus gives nan. Double equals is false, and less than is false, because they compare as text. A wrong prediction is the lesson. Go back to the slide that explains it.

### Eight questions, closed book (16:23)

Self check: eight questions, closed book. Answer out loud, then I will reveal each one. One. What is the string five plus nine? The string fifty nine. Two. What is the string five minus two? Three. Three. What is two plus two plus the string one? The string forty one. Four. What do Number of null and Number of undefined return? Zero, and nan. Five. Is null double equals zero? False. Six. Is nan double equals nan? False. Seven. What is the type of new Date of zero, plus one? String. And eight. Is the string a less than the string three? False, because strings compare as text. How many did you get? Anything you missed, go back to its slide.

### A developer runs the following code. What is logged? (17:20)

Time for a practice question, taken from the question bank. This is a predict question. Pause the video and trace each comparison before you read the options. A developer runs the code shown. What is logged? Option A: true, true, false, false. Option B: false, true, true, false. Option C: true, true, true, false. Option D: true, true, true, true. This question combines the loose equality rules from this lesson. Work through the four comparisons one at a time. Pause now, and I will give you the answer on the next slide.

### true true true false (18:04)

The answer is C. True, true, true, false. Here is why. The string one double equals one is true, because the string becomes the number one. Zero double equals false is true, because false becomes zero. Null double equals undefined is true, because they equal only each other. But null double equals zero is false, because null equals only undefined. Now the wrong options. A says true, true, false, false. That treats null and undefined as different, but null double equals undefined is true. B says false, true, true, false. That thinks a string never equals a number, but the string one becomes the number one. D says true, true, true, true. That treats null as loosely equal to zero, but null equals only undefined. The takeaway: double equals converts differing types, and null equals only undefined.

### Four operators, four rules (19:04)

Let's consolidate. Four operators, four rules. Plus: a string on either side means concatenation, left to right. Math: minus, times, and divide convert to numbers. Null is zero, and undefined is nan. Equality: double equals converts types, and triple equals does not. Null equals only undefined. Order: two strings compare as text, otherwise numbers. Any nan is false. Remember: when in doubt, convert on purpose and use triple equals. If you can say these four cards from memory, you've got the lesson.

### Now test it, then move to truthy and falsy (19:44)

That completes lesson three. Now test it, then move on to truthy and falsy. The flow is: read it, predict it, test it. Your practice set is this lesson's questions in the bank. Do them now, closed book, and map any miss back to the slide that explains it. In the next lesson, Truthy and Falsy Evaluations, we look at which values count as true or false. See you there.