See the Pen thecodelog.com - JS Coercion 1 by Deano (@deangilewicz) on CodePen.
There are two types of coercion – implicit and explicit.
Implicit coercion occurs as a less obvious side effect of some other intentional operation. It usually involves an intermediate step that happens behind the scenes when going from one type to another. Whereas explicit coercion is obvious from looking at the code that a type conversion is intentionally occurring.
See the Pen thecodelog.com - JS Coercion 2 by Deano (@deangilewicz) on CodePen.
To String type conversion:
See the Pen thecodelog.com - JS Coercion 3 by Deano (@deangilewicz) on CodePen.
To String JSON values:
See the Pen thecodelog.com - JS Coercion 4 by Deano (@deangilewicz) on CodePen.
JSON.stringify can pass in a second argument that acts as a replacer and can be an array or a function.
See the Pen thecodelog.com - JS Coercion 5 by Deano (@deangilewicz) on CodePen.
JSON.stringify can pass in a third argument as a space / indentation for prettier human-friendly output as a positive integer or a string.
See the Pen thecodelog.com - JS Coercion 6 by Deano (@deangilewicz) on CodePen.
To Number type conversion:
See the Pen thecodelog.com - JS Coercion 7 by Deano (@deangilewicz) on CodePen.
To Boolean type conversion:
See the Pen thecodelog.com - JS Coercion 8 by Deano (@deangilewicz) on CodePen.
When coercing from a string to a number back to a string it is recommended to use the built-in String() and Number() functions.
See the Pen thecodelog.com - JS Coercion 9 by Deano (@deangilewicz) on CodePen.
Coercion (Number()) is not tolerant of non-numeric characters and will fail, resulting in NaN value. However, parsing (parseInt()) is tolerant of non-numeric characters. It parses left to right and stops parsing when a non-numeric character is encountered.
See the Pen thecodelog.com - JS Coercion 10 by Deano (@deangilewicz) on CodePen.
It is possible to flip boolean values e.g. from false to true, or true to false by using the single bang character (!) that coerces and flips boolean, or the double bang characters (!!) that coerces and flips boolean and flips boolean back.
See the Pen thecodelog.com - JS Coercion 11 by Deano (@deangilewicz) on CodePen.
Implicit coercion – String to Number and Number to String
See the Pen thecodelog.com - JS Coercion 12 by Deano (@deangilewicz) on CodePen.
You can coerce a number to a string simply by adding the number and an empty string:
See the Pen thecodelog.com - JS Coercion 13 by Deano (@deangilewicz) on CodePen.
You can coerce a string to a number using the “-“, “*”, or “/” operators since they are defined only for numeric operations.
See the Pen thecodelog.com - JS Coercion 14 by Deano (@deangilewicz) on CodePen.
Below both array values are first coerced to strings (using toString() serialization), then coerced to numbers in or to be able to perform the subtraction operation.
See the Pen thecodelog.com - JS Coercion 15 by Deano (@deangilewicz) on CodePen.
Implicit coercion – Boolean to Number and Number to Boolean
See the Pen thecodelog.com - JS Coercion 16 by Deano (@deangilewicz) on CodePen.
Implicit coercion – anything to Boolean
Expression operations force (implicitly) a boolean coercion. Any value used in the following context that is not already a boolean will be implicitly coerced to a boolean.
1. The test expression in an if (..) statement
See the Pen thecodelog.com - JS Coercion 17 by Deano (@deangilewicz) on CodePen.
2. The test expression (secondclause) in a for(..;..;..) loop
See the Pen thecodelog.com - JS Coercion 18 by Deano (@deangilewicz) on CodePen.
3. The test expression in while (..) and do..while(..) loops
See the Pen thecodelog.com - JS Coercion 19 by Deano (@deangilewicz) on CodePen.
4. The test expression in ternary expressions
See the Pen thecodelog.com - JS Coercion 20 by Deano (@deangilewicz) on CodePen.
5. The left hand operand to the and && and or || operators
The value produced by a && or || operator is not necessarily of type Boolean. In JavaScript the value produced will always be the value of one of the two operand expressions.
See the Pen thecodelog.com - JS Coercion 21 by Deano (@deangilewicz) on CodePen.
For the || operator, if the test is true, the || expression results in the value of the first operand. If the test is false, the || expression results in the value of the second operand.
See the Pen thecodelog.com - JS Coercion 22 by Deano (@deangilewicz) on CodePen.
Inversely, for the && operator, if the test is true, the && expression results in the value of the second operand. If the test is false, the && expression results in the value of the first operand.
See the Pen thecodelog.com - JS Coercion 23 by Deano (@deangilewicz) on CodePen.
You can use conditional operators to safely assign values to variables like so.
See the Pen thecodelog.com - JS Coercion 24 by Deano (@deangilewicz) on CodePen.
Loose Equals (==) Versus Strict Equals (===):
Loose equals allows coercion in the equality comparison and strict equals disallows coercion. Loose equals has to do more work because it has to follow through the steps of coercion if the types are different (perform implicit coercion on one or both values).
See the Pen thecodelog.com - JS Coercion 25 by Deano (@deangilewicz) on CodePen.
Null and undefined coerced as same value when used with loose equals ‘==’
See the Pen thecodelog.com - JS Coercion 26 by Deano (@deangilewicz) on CodePen.
Below, the a == null check will pass only if doSomething() returns either null or undefined, and will fail with any other value, even other falsey values
See the Pen thecodelog.com - JS Coercion 27 by Deano (@deangilewicz) on CodePen.
Comparing Objects to non-objects
See the Pen thecodelog.com - JS Coercion 28 by Deano (@deangilewicz) on CodePen.
The null and undefined values cannot be boxed as they have no object wrapper equivalent. Therefore, Object(null) is just like Object() in that both just produce a normal object.
The comparison for less than and greater than first calls toPrimitive coercion on both values, and if the return result of either call is not a string, then both values are coerced to number values using the toNumber operation rules, and compared numerically.
See the Pen thecodelog.com - JS Coercion 29 by Deano (@deangilewicz) on CodePen.
If both values are strings for the < comparison, simple alphabetic comparison on the characters is performed:
See the Pen thecodelog.com - JS Coercion 30 by Deano (@deangilewicz) on CodePen.